/* style.css - Basic styling for the Wattage Calculator */

:root {
    /* Simplified Shadcn-like neutral palette (light mode) */
    --background: hsl(0 0% 100%); /* White */
    --foreground: hsl(0 0% 3.9%); /* Near black */
    --card: hsl(0 0% 100%); /* White */
    --card-foreground: hsl(0 0% 3.9%); /* Near black */
    --popover: hsl(0 0% 100%); /* White */
    --popover-foreground: hsl(0 0% 3.9%); /* Near black */
    --primary: hsl(0 0% 9%); /* Near black */
    --primary-foreground: hsl(0 0% 98%); /* Near white */
    --secondary: hsl(0 0% 96.1%); /* Light gray */
    --secondary-foreground: hsl(0 0% 9%); /* Near black */
    --muted: hsl(0 0% 96.1%); /* Light gray */
    --muted-foreground: hsl(0 0% 45.1%); /* Medium gray */
    --accent: hsl(0 0% 96.1%); /* Light gray */
    --accent-foreground: hsl(0 0% 9%); /* Near black */
    --destructive: hsl(0 84.2% 60.2%); /* Red */
    --destructive-foreground: hsl(0 0% 98%); /* Near white */
    --border: hsl(0 0% 89.8%); /* Light gray border */
    --input: hsl(0 0% 89.8%); /* Light gray border for input */
    --ring: hsl(0 0% 3.9%); /* Focus ring */

    --radius: 0.5rem; /* Default border radius (8px) */
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    padding: 1rem;
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 1rem auto;
    background: var(--card);
    /* Use card for main container bg */
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    /* Removed box-shadow for flatter look */
}

h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.875rem; /* ~30px */
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 {
    color: var(--card-foreground);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem; /* ~20px */
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem; /* ~14px */
    color: var(--foreground);
}

/* Input Fields */
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 0.5rem 0.75rem; /* ~8px 12px */
    margin-bottom: 1rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px); /* Slightly less radius than container */
    box-sizing: border-box;
    font-size: 0.875rem;
    background-color: var(--background);
    color: var(--foreground);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
}

/* Buttons */
button {
    display: inline-flex; /* Use flex for alignment if adding icons later */
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem; /* ~8px 16px */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border: none;
}

/* Primary Button (Add Appliance) */
#applianceForm button[type="submit"] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

#applianceForm button[type="submit"]:hover {
    background-color: hsl(0 0% 20%); /* Slightly lighter black for hover */
}

/* Destructive Button (Remove in table) */
table button {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    font-size: 0.8125rem; /* ~13px */
    padding: 0.25rem 0.75rem; /* ~4px 12px */
}

table button:hover {
    background-color: hsl(0 75% 55%); /* Slightly adjusted red for hover */
}

/* Layout adjustments */
.main-layout {
    display: grid;
    /* Define grid areas for desktop */
    grid-template-areas: "form summary"; 
    grid-template-columns: 1fr 2fr; /* Ratio for left/right panels */
    gap: 1.5rem;
}

/* Assign panels to grid areas for desktop */
.panel-form { 
    grid-area: form; 
}
.panel-summary { 
    grid-area: summary; 
}

/* Hide mobile-specific inputs on desktop */
.mobile-settings-inputs {
    display: none;
}

/* Ensure original settings section is visible on desktop */
.settings-section {
    display: block; /* Explicitly show */
}

@media (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        /* Reset grid areas for mobile stacking */
        grid-template-areas: none; 
    }
    /* Reset grid area assignments for mobile */
    .panel-form, .panel-summary {
        grid-area: auto; 
    }

    /* Hide original settings section on mobile */
    .settings-section {
        display: none;
    }

    /* Show and style mobile-specific inputs */
    .mobile-settings-inputs {
        display: flex; /* Use flex for side-by-side layout */
        gap: 0.5rem; /* Space between inputs */
        margin-bottom: 1rem; /* Space below inputs */
    }

    .mobile-settings-inputs input[type="number"] {
        width: 50%; /* Each input takes half the width */
        margin-bottom: 0; /* Remove default margin-bottom from inputs */
        /* Use mobile padding defined earlier */
        padding: 0.6rem 0.8rem; 
        font-size: 0.9rem; /* Adjust font size if needed */
    }

    /* Add mobile-specific adjustments below */
    .container {
        padding: 1rem; /* Reduce container padding */
        margin: 0.5rem auto; /* Reduce top/bottom margin */
    }

    h1 {
        font-size: 1.5rem; /* Reduce heading size */
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.125rem; /* Reduce subheading size */
    }

    label,
    input[type="text"],
    input[type="number"],
    button,
    table {
        font-size: 0.95rem; /* Slightly larger base font size for readability */
    }

    input[type="text"],
    input[type="number"] {
        padding: 0.6rem 0.8rem; /* Adjust input padding */
    }

    button {
        padding: 0.6rem 1.1rem; /* Adjust button padding */
    }

    #applianceForm button[type="submit"] {
        width: 100%; /* Make add button full width */
    }

    table button {
        padding: 0.3rem 0.6rem; /* Adjust table button padding */
    }

    /* Improve table readability on small screens */
    thead th, tbody td {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Hide table header on mobile */
    table thead {
        display: none;
    }

    /* Adjust table container for card view */
    .table-container {
        border: none; /* Remove border */
        overflow-x: visible; /* Remove horizontal scroll */
        overflow-y: visible; /* Remove vertical scroll if needed */
    }

    /* Style the list container (tbody) for card view */
    #appliancesListContainer {
        display: block; /* Override default tbody display */
    }

    /* Style individual appliance cards */
    .appliance-card {
        display: block; 
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.6rem; /* Reduced padding */
        margin-bottom: 0.6rem; /* Reduced margin */
        background-color: var(--card); /* Use card background */
    }

    .appliance-card:last-child {
        margin-bottom: 0;
    }

    .appliance-card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem; /* Reduced margin */
        padding-bottom: 0.4rem; /* Reduced padding */
        border-bottom: 1px solid var(--border);
    }

    .appliance-card .card-header strong {
        font-size: 1.0em; /* Slightly smaller name */
        font-weight: 600;
    }

    .appliance-card .card-body > div {
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 0; /* Reduced vertical spacing */
        font-size: 0.85em; /* Slightly smaller font */
    }

    .appliance-card .card-body > div span:first-child {
        font-weight: 500; /* Make label slightly bolder */
        color: var(--muted-foreground);
        margin-right: 0.5rem;
    }
    
    .appliance-card .card-body > div span:last-child {
        text-align: right;
    }

    /* Style the remove button within the card */
    .appliance-card button.remove-button {
        background-color: var(--destructive);
        color: var(--destructive-foreground);
        font-size: 0.8125rem; /* Match previous table button size */
        padding: 0.25rem 0.75rem; /* Match previous table button padding */
    }

    .appliance-card button.remove-button:hover {
         background-color: hsl(0 75% 55%);
    }

    /* Remove rules specific to desktop table view structure if any */
    /* e.g., .desktop-table-view td { min-width: initial; } */
    /* Not needed as JS/CSS handles view separation */

    /* Hide table footer on mobile */
    table tfoot {
        display: none;
    }

    /* Style and show mobile totals container */
    .summary-totals-mobile {
        display: block; /* Show the container */
        margin-top: 1rem; /* Add space above totals */
        padding: 0.8rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background-color: var(--secondary); /* Match footer background */
    }

    .summary-totals-mobile h4 {
        margin: 0 0 0.5rem 0;
        font-size: 1.0em;
        font-weight: 600;
        padding-bottom: 0.3rem;
        border-bottom: 1px solid var(--border);
    }

    .summary-totals-mobile > div {
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 0; 
        font-size: 0.9em; /* Slightly larger than card body */
    }

    .summary-totals-mobile > div span:first-child {
        font-weight: 500;
        color: var(--muted-foreground);
        margin-right: 0.5rem;
    }

    .summary-totals-mobile > div span:last-child {
        text-align: right;
        font-weight: 600; /* Make total values bold */
    }

    /* Add visual cue for editable values in mobile cards */
    .appliance-card span.editable-value {
        cursor: pointer;
        border-bottom: 1px dotted var(--muted-foreground);
        /* Adjust padding slightly if needed */
        /* padding-bottom: 1px; */
    }
}

.left-panel {
    /* No specific styles needed, grid handles sizing */
}

.right-panel {
    /* No specific styles needed, grid handles sizing */
}

.settings-section,
.add-appliance-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.settings-section:last-child,
.add-appliance-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.input-group {
    margin-bottom: 1rem;
}

/* Table Styles */
.table-container {
    /* max-height: 55vh; */ /* Let grid handle height, maybe remove fixed height? */
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem; /* ~14px */
}

thead th {
    position: sticky;
    top: 0;
    background-color: var(--muted); /* Use muted for header background */
    color: var(--muted-foreground);
    text-align: left;
    padding: 0.75rem 1rem; /* ~12px 16px */
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    z-index: 10;
}

thead th:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
}

thead th:last-child {
    border-top-right-radius: calc(var(--radius) - 1px);
}

tbody tr {
    border-bottom: 1px solid var(--border);
}

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

tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);
}

tr:nth-child(even) {
    background-color: transparent; /* Remove zebra striping for cleaner look */
}

/* Style Table Footer */
tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 600; /* Make totals bold */
    color: var(--foreground);
    background-color: var(--secondary); /* Slightly different background */
    border-top: 2px solid var(--border); /* Stronger top border */
}

/* Battery Status Visual */
.battery-status {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
}

.battery-status label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.progress-bar-container {
    width: 100%;
    background-color: var(--secondary); /* Use secondary for track */
    border-radius: calc(var(--radius) - 4px);
    height: 1rem; /* ~16px */
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    width: 100%; /* Default to full */
    background-color: hsl(142, 71%, 45%); /* Initial Green */
    border-radius: calc(var(--radius) - 4px);
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* Removed text styling from bar */
}

/* Progress bar color updates (keep JS logic, reference colors here) */
/* Red: var(--destructive) ~ hsl(0, 84%, 60%) */
/* Orange: ~ hsl(35, 92%, 60%) */
/* Green: ~ hsl(142, 71%, 45%) */


#batteryPercentage {
    font-weight: 600;
    font-size: 1rem;
    color: var(--foreground);
}

/* Style for inline editing input */
.inline-edit-input {
    width: 100%; /* Fill the cell */
    padding: 0.2rem 0.4rem;
    margin: 0;
    border: 1px solid var(--ring); /* Use ring color for focus indication */
    border-radius: calc(var(--radius) - 4px);
    font-family: inherit; /* Match table font */
    font-size: inherit; /* Match table font size */
    box-sizing: border-box; /* Include padding/border in width */
}

/* Add visual cue for editable cells on desktop */
td.editable-cell {
    cursor: pointer; /* Indicate interactivity */
    position: relative; 
    /* Remove border style */
    /* border-bottom: 1px dotted var(--muted-foreground); */ 
    /* Add persistent dotted underline using text-decoration */
    text-decoration: underline dotted var(--muted-foreground); 
    text-decoration-thickness: 1px; /* Ensure it's thin */
    text-underline-offset: 3px; /* Add some space between text and underline */
}

/* Keep cursor change on hover, remove background change */
td.editable-cell:hover {
    /* background-color: var(--secondary); */ 
    /* You could potentially slightly darken the underline on hover if desired */
    /* text-decoration-color: var(--foreground); */
}

/* Remove default number input spinners (optional) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}