@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    font-family: "VT323", "Courier New", monospace;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top for scrollability */
    min-height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;

    background-image: url('notebook_texture.png'); /* Replace with actual filename/path if different */
    background-color: #f4f4f4; /* Fallback color if the image doesn't load */
    background-repeat: no-repeat;   /* Since your image is large, don't repeat it */
    background-size: cover;         /* Scale the image to cover the entire background */
    background-position: center center; /* Center the image */
    background-attachment: fixed;
}

.container {
    flex-grow: 1;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 500px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.input-group, .color-pickers, .picker-group {
    margin-bottom: 20px;
}

.input-group label, .picker-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}

#qr-text {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: monospace;
}

.color-pickers {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Adds space between foreground and background pickers */
}

.picker-group {
    flex: 1; /* Allows pickers to share space */
}


.hex-input {
    width: calc(100% - 22px); /* Match other inputs */
    padding: 8px 10px;
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace; /* Good for hex codes */
}

button {
    display: block; /* This might be overridden by flex, which is fine */
    width: 100%;    /* This will be overridden by flex-grow in .action-buttons context */
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 28px;
    font-family: "VT323", "Courier New", monospace;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

#qrcode-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Placeholder height */
    border: 1px dashed #ddd;
    padding: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

#qrcode-container img { /* Styling for the image generated by qrcode.js */
    display: block;
    max-width: 100%;
    height: auto;
}

/* Pickr specific styling if needed for alignment */
.pcr-button {
    width: 100% !important; /* Make Pickr button full width */
    height: 40px !important;
}

#ascii-title {
    font-family: "Courier New", Courier, monospace; /* Essential for ASCII art */
    font-size: 10px; /* Adjust this value! Start small. */
    line-height: 1;  /* Adjust for tighter or looser lines, 1 or 1.1 usually looks good */
    text-align: center; /* To center the ASCII art block */
    color: #333;       /* Or any color you prefer for the title */
    margin-bottom: 20px; /* Same margin as the previous h1 */
    overflow-x: hidden; /* This will hide the horizontal scrollbar */
    overflow-y: hidden;
}

.action-buttons {
    display: flex; /* Arrange buttons horizontally */
    gap: 10px;     /* Space between buttons */
    margin-bottom: 20px; /* Space below the button group */
}

.action-buttons button {
    flex-grow: 1; /* Allow buttons to share space equally */
    /* display: block; /* Already set by general button style, flex overrides */
    /* width: 100%; /* Not needed if using flex-grow */
    padding: 12px;
    /* background-color: #007bff; /* From general button style */
    /* color: white; /* From general button style */
    /* border: none; /* From general button style */
    /* border-radius: 4px; /* From general button style */
    /* cursor: pointer; /* From general button style */
    /* font-size: 16px; /* From general button style */
    /* transition: background-color 0.3s ease; /* From general button style */
}

/* You might want a slightly different style for the download button, or keep it consistent */
#download-qr-btn {
    background-color: #28a745; /* Example: Green color for download */
}

#download-qr-btn:hover {
    background-color: #218838;
}

#border-control-group {
    margin-bottom: 20px;
}

#border-control-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}

#qr-border-slider {
    width: 100%; /* Make slider take full width of its container */
    cursor: pointer;
}

#app-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Allow wrapping on smaller screens if necessary */
    gap: 20px;       /* Space between main content and sidebar */
    /* max-width: 1200px; /* Optional: constrain overall width */
    margin: 0 auto;  /* Center the app wrapper */
    align-items: flex-start; /* Align items to the top */
}

#favorites-panel {
    width: 500px; /* Adjust width as needed */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff; /* Slightly different background for the panel */
    height: fit-content; /* Panel height adjusts to its content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    /* font-family: 'VT323', "Courier New", monospace; */ /* Apply chosen font if not inherited */
}

#favorites-panel h2 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.3em; /* Adjust as needed, em allows scaling with base font */
    color: #333;
}

#favorites-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* max-height: 400px; /* Example max height for scrollability */
    overflow-y: auto;  /* Add scroll if content exceeds max-height */
}

#favorites-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px; /* More padding for each item */
    border-bottom: 1px solid #e0e0e0;
    /* font-size: 0.9em; */ /* Adjust item font size if needed */
}

#favorites-list li:last-child {
    border-bottom: none;
}

.fav-color-details { /* Renamed from fav-color-info for clarity */
    display: flex;
    align-items: center;
    gap: 10px; /* Increased gap */
    flex-grow: 1; /* Allow this part to take available space */
    overflow: hidden; /* Prevent overflow issues */
}

.fav-color-swatch {
    min-width: 24px; /* Slightly larger swatch */
    width: 24px;
    height: 24px;
    border: 1px solid #adadad; /* Darker border for swatch */
    border-radius: 4px; /* Rounded corners for swatch */
}

.fav-color-name {
    font-weight: bold; /* Make name stand out */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 15px; 
    flex-shrink: 1; /* Allow name to shrink if space is tight */
    /* max-width: 100px; */ /* Consider a max-width if names are long */
}

.fav-color-hex {
    /* font-family: 'VT323', "Courier New", monospace; */ /* Ensure this inherits or is set */
    font-size: 0.95em;
    color: #555;
    margin-left: 5px; /* Space between name and hex */
}

.fav-buttons {
    display: flex;  /* Lays out children (buttons) in a row by default */
    gap: 6px;       /* Adds a small space between the F and B buttons */
    align-items: center; /* If buttons ever have different heights, this helps */
}

.fav-buttons button {
    display: inline-block; /* Override any global 'display: block;' for buttons */
    width: auto;           /* Override any global 'width: 100%;' */
    padding: 5px 10px;     /* Adjust padding for a good size */
    font-size: 0.85em;     /* Adjust font size if needed */
    margin-left: 0;        /* Reset margin-left if previously used for spacing; 'gap' on parent handles it now */
    min-width: auto;       /* Reset min-width if you want them to be just as wide as content + padding */
                           /* Or set a specific small min-width: e.g., min-width: 28px; */
    line-height: 1;        /* Helps with consistent height if font size is small */
    /* Inherit other button styles like background, color, border, border-radius, cursor, font-family,
       or define them specifically here if you want them to look different from other buttons.
       Example:
       background-color: #f0f0f0;
       color: #333;
       border: 1px solid #ccc;
    */
}