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

:root {
    --font-family:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    --font-size-base: 0.95rem;
    --line-height-base: 1.6;

    /* Dark Theme Palette */
    --bg-deep: #1a1d21; /* Deepest background */
    --bg-primary: #21252b; /* Main background */
    --bg-secondary: #282c34; /* Slightly lighter bg (sidebar, inputs) */
    --bg-tertiary: #323840; /* Even lighter (hover, active elements) */
    --bg-canvas-wrapper: #181a1f; /* Background behind the canvas */

    --text-primary: #abb2bf; /* Primary text */
    --text-secondary: #828a9a; /* Secondary/muted text */
    --text-on-accent: #ffffff; /* Text on primary buttons */
    --text-heading: #d7dae0; /* Headings */

    --border-primary: #3a4049; /* Primary borders */
    --border-secondary: #4b515c; /* Secondary/lighter borders */
    --border-focus: var(--accent-primary); /* Border on focus */

    --accent-primary: #61afef; /* Primary accent (e.g., blue) */
    --accent-primary-hover: #6abeff;
    --accent-secondary: #98c379; /* Secondary accent (e.g., green for save/export) */
    --accent-secondary-hover: #a5d087;
    --danger-primary: #e06c75; /* Danger/delete (e.g., red) */
    --danger-hover: #ea7f88;

    --shadow-color: rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px var(--shadow-color);
    --shadow-md:
        0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);

    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --spacing-unit: 1rem; /* Base for padding/margins */
}

/* Apply dark theme preference */
html {
    color-scheme: dark;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header & Footer --- */
header {
    background-color: var(--bg-secondary);
    color: var(--text-heading);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    z-index: 10; /* Keep header above content */
}

header h1 {
    font-size: 1.3em;
    font-weight: 600;
}

footer {
    background-color: var(--bg-deep);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-unit);
    border-top: 1px solid var(--border-primary);
    font-size: 0.85em;
    margin-top: auto; /* Pushes footer to bottom */
}

/* --- Main Layout --- */
main {
    flex: 1;
    padding: var(--spacing-unit);
    overflow: hidden; /* Prevent main scrollbars */
    display: flex; /* Use flex here for workspace */
}

.workspace {
    flex: 1; /* Workspace takes full space in main */
    display: flex;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* Crucial */
    border: 1px solid var(--border-primary);
    /* Removed fixed height calculation */
}

/* --- Sidebar --- */
.sidebar {
    width: 280px; /* Slightly narrower */
    flex-shrink: 0; /* Prevent shrinking */
    background-color: var(--bg-secondary);
    padding: var(--spacing-unit);
    overflow-y: auto;
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5); /* Space between sections */
}

.tool-section,
.labels-section,
.annotations-section {
    /* Removed margin-bottom, using gap in sidebar now */
}

h3 {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    color: var(--text-heading);
    font-weight: 600;
    font-size: 1.1em;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: calc(var(--spacing-unit) * 0.3);
}

/* --- Canvas Area --- */
.canvas-container {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary);
}

.canvas-tools {
    padding: calc(var(--spacing-unit) * 0.6) var(--spacing-unit);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: calc(var(--spacing-unit) * 0.75);
    box-shadow: var(--shadow-sm); /* Add subtle shadow below tools */
    z-index: 5; /* Keep tools above canvas wrapper */
}

.canvas-wrapper {
    flex: 1; /* Takes remaining vertical space */
    overflow: auto; /* Allows scrolling for large canvas */
    position: relative;
    background-color: var(--bg-canvas-wrapper); /* Distinct background */
    display: grid; /* Simpler centering */
    place-items: center; /* Center canvas */
    padding: var(--spacing-unit); /* Add padding around canvas */
}

canvas {
    background-color: #fff; /* Keep canvas white for image clarity */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: block;
    max-width: 100%; /* Ensure canvas doesn't overflow wrapper */
    max-height: 100%;
    border-radius: var(--border-radius-sm);
    transition: opacity 0.3s ease; /* Add transition for AI assist opacity change */
}

/* Style for when AI assist is running */
canvas[style*="opacity: 0.7"] {
    cursor: wait;
}

/* --- Buttons & Controls --- */
.btn {
    padding: 0.5rem 0.9rem; /* Slightly adjusted padding */
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2; /* Ensure consistent height */
    display: inline-flex; /* Align icon and text if needed */
    align-items: center;
    justify-content: center;
}

.btn:hover:not(:disabled) {
    background-color: var(
        --border-secondary
    ); /* Use border color for subtle hover */
    border-color: #565c68; /* Slightly lighter border on hover */
    color: var(--text-heading);
}

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Active state (e.g., selected tool) */
.btn.active {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}
.btn.active:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* Primary action button (Save/Export) */
.btn.primary {
    background-color: var(
        --accent-secondary
    ); /* Using green as primary action */
    color: var(--text-on-accent);
    border-color: var(--accent-secondary);
}
.btn.primary:hover:not(:disabled) {
    background-color: var(--accent-secondary-hover);
    border-color: var(--accent-secondary-hover);
}

/* Danger button */
.btn.btn-danger {
    background-color: var(--danger-primary);
    color: var(--text-on-accent);
    border-color: var(--danger-primary);
}
.btn.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* Disabled state */
.btn:disabled {
    background-color: var(--bg-secondary); /* Less prominent background */
    color: var(--text-secondary);
    border-color: var(--border-primary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Specific Controls --- */
.navigation-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

#image-info {
    font-size: 0.9em;
    color: var(--text-secondary);
    min-width: 150px; /* Allow more space for filename */
    max-width: 250px; /* Prevent excessive width */
    text-align: center;
    font-weight: 500;
    background-color: var(--bg-primary); /* Match main bg */
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for long names */
}

.save-export-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5); /* Consistent gap */
}

/* --- Sidebar Inputs & Lists --- */
.label-input {
    display: flex;
    margin-bottom: var(--spacing-unit);
}

/* Style all relevant inputs and selects */
input[type="text"],
select, /* Added select here */
.annotation-label-select {
    /* Keep specific class for potential overrides */
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-primary); /* Darker input background */
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 0; /* Prevent flex item overflow */
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}
input[type="text"]:focus,
select:focus, /* Added select here */
.annotation-label-select:focus {
    outline: none;
    border-color: var(--border-focus);
    background-color: var(--bg-secondary); /* Slightly lighter on focus */
}

.label-input input[type="text"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none; /* Connect to button */
}

.label-input button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* Use default button styles, they fit well */
}

.labels-list,
.annotations-list {
    background-color: var(--bg-primary); /* Match darker background */
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-primary);
    max-height: 250px; /* Increased max-height slightly */
    overflow-y: auto;
    /* Add subtle scrollbar styling (optional, webkit only) */
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) var(--bg-secondary);
}
.labels-list::-webkit-scrollbar,
.annotations-list::-webkit-scrollbar {
    width: 8px;
}
.labels-list::-webkit-scrollbar-track,
.annotations-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
}
.labels-list::-webkit-scrollbar-thumb,
.annotations-list::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--bg-secondary);
}

.label-item,
.annotation-item {
    padding: 0.6rem var(--spacing-unit);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    transition: background-color 0.15s ease;
}
.label-item:hover,
.annotation-item:hover {
    background-color: var(--bg-tertiary); /* Subtle hover */
}

.label-item:last-child,
.annotation-item:last-child {
    border-bottom: none;
}

/* Delete buttons within lists */
.delete-label-btn,
.delete-annotation-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.8em;
    line-height: 1;
    background-color: transparent; /* Make them less prominent */
    color: var(--danger-primary);
    border: 1px solid transparent; /* Add border for consistent size */
    border-radius: var(--border-radius-sm);
    flex-shrink: 0; /* Prevent shrinking */
}
.delete-label-btn:hover,
.delete-annotation-btn:hover {
    background-color: hsla(
        from var(--danger-primary) h s l / 0.1
    ); /* Use hsla for alpha */
    color: var(--danger-hover);
    border-color: hsla(from var(--danger-primary) h s l / 0.3);
}

.label-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for light colors */
}

/* Label name / Select dropdown container */
.label-item > div:first-child {
    /* Target the div containing the color span and name */
    flex-grow: 1;
    min-width: 0; /* Prevent overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9em;
}

.annotation-item > select {
    /* Target the select directly */
    flex-grow: 1;
    min-width: 0; /* Prevent overflow */
    /* Inherits base select styles */
    padding: 0.3rem 0.6rem; /* Smaller padding for list item */
    font-size: 0.85em;
    /* Let flexbox handle width, no need for max-width: 100% typically */
}

/* Style select dropdown in annotation list (already covered by general select styling) */
/* .annotation-label-select { } */

/* Style for placeholder text in lists */
.labels-list p,
.annotations-list p {
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--spacing-unit);
    text-align: center;
    font-size: 0.9em;
}
