headphones/data/interfaces/default/css/style.css

/* --- Variables (Optional but Recommended) --- */
:root {
    --primary-color: #4183C4;
    --secondary-color: #8B8B8B;
    --text-color: #343434;
    --light-grey: #e0e0e0;
    --medium-grey: #CCCCCC;
    --dark-grey: #666666;
    --header-bg-start: #FAFAFA;
    --header-bg-end: #E7E7E7;
    --alert-info-bg-start: #FCF5C2;
    --alert-info-bg-end: #FFF6A9;
    --alert-success-bg-start: #D3FFD7;
    --alert-success-bg-end: #C2EDC6;
    --alert-error-bg-start: #FFD3D3;
    --alert-error-bg-end: #EDC4C4;

    --border-radius-sm: 3px;
    --border-radius-md: 7px;
    --border-radius-lg: 10px;

    --box-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 0 10px rgba(0, 0, 0, 0.1);
    --box-shadow-alert: 0 0 2px #aaa;
}

/* --- Base Styles & Reset --- */
/* A more modern, concise reset. Consider using Normalize.css or a more opinionated reset like "reset.css" */
*,
*::before,
*::after {
    box-sizing: border-box; /* Crucial for responsive layouts */
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    color: var(--text-color);
    font-size: 16px; /* Base font size, consider 'rem' for scaling */
    line-height: 1.5;
}

body {
    background: #fff;
    color: var(--text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    margin: 0;
    overflow-y: scroll;
}

/* --- Links --- */
a {
    color: var(--primary-color);
    text-decoration: none;
    outline: none;
}

a:hover {
    color: var(--secondary-color);
}

a.blue {
    color: blue; /* Consider making this a CSS variable */
}

a .ui-icon {
    display: inline-block;
    position: relative;
    top: 2px;
}

.links a {
    color: var(--dark-grey);
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    gap: 5px; /* Spacing between icon and text */
}

.links a:hover {
    color: var(--primary-color);
}

/* --- Typography --- */
h1 { font-size: 2.5rem; } /* Using rem for scalability */
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

p.center {
    text-align: center;
}

hr {
    border: 0;
    border-top: 1px solid var(--medium-grey);
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

small, .small {
    font-size: 0.75rem; /* Use rem */
}

/* --- Header & Navigation --- */
header {
    background-image: linear-gradient(to bottom, var(--header-bg-start), var(--header-bg-end));
    border-bottom: 1px solid var(--medium-grey);
    box-shadow: var(--box-shadow-md);
    height: 60px; /* Adjusted slightly */
    position: fixed;
    width: 100%;
    z-index: 999;
    display: flex; /* Use flexbox for main layout */
    align-items: center; /* Vertically center items */
    padding: 0 1rem; /* Add padding for smaller screens */
}

header .wrapper {
    width: 100%;
    max-width: 1200px; /* Increased max-width for modern wider screens, adjust as needed */
    margin: 0 auto;
    display: flex; /* Use flexbox for logo, nav, search arrangement */
    justify-content: space-between; /* Distribute items */
    align-items: center; /* Vertically center items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 1rem; /* Gap between items */
}

header #logo {
    flex-shrink: 0; /* Prevent logo from shrinking */
    margin: 0; /* Reset margins */
}

/* Navigation List */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox for horizontal nav items */
    flex-wrap: wrap; /* Allow nav items to wrap */
    gap: 0.5rem; /* Space between nav items */
    height: auto; /* Allow height to adjust */
}

nav li {
    display: block; /* Flex items are block-level by default */
    font-size: 1.125rem; /* Use rem */
    font-weight: bold;
    text-align: center;
}

nav li a {
    color: var(--text-color);
    display: block;
    padding: 0.5rem 1rem; /* Use rem for padding */
    text-shadow: 1px 1px 0px #FFF;
    text-transform: capitalize;
    border: 1px solid transparent;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    border-radius: var(--border-radius-sm);
}

nav li a:hover {
    background-image: linear-gradient(to bottom, #F1F1F1, #E0E0E0);
    border: 1px solid #DDDDDD;
    box-shadow: 0 1px 0 #FAFAFA, inset 0 1px 0 #FAFAFA;
    transition: color 0.2s ease-in;
}

nav li a.config {
    display: flex; /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* Adjusted padding for icon-only link */
    width: auto; /* Allow width to be determined by content */
    height: auto;
}

nav li a.config i {
    position: static; /* Remove relative positioning if flex handles it */
    left: auto;
    top: auto;
}

/* Search Bar */
#searchbar {
    flex-grow: 1; /* Allow search bar to grow */
    max-width: 400px; /* Max width for searchbar */
    position: relative;
    display: flex; /* Use flex for search bar elements */
    align-items: center;
    gap: 5px; /* Spacing between elements */
}

#searchbar form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}

#searchbar input[type="text"] {
    flex-grow: 1; /* Allow text input to fill available space */
    border: 1px solid var(--light-grey);
    border-top: 1px solid #CDCDCD;
    box-shadow: inset 0 1px 1px #e0e0e0;
    color: var(--text-color);
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

#searchbar .mini-icon {
    position: absolute; /* Keep icon positioned if needed, or adjust with flex */
    left: 8px; /* Adjust as per input padding */
    color: #999;
    pointer-events: none; /* Allow clicks to pass through */
}

#searchbar input[type="text"] {
    padding-left: 28px; /* Make space for the icon */
}

#searchbar select {
    border: 1px solid var(--light-grey);
    border-radius: var(--border-radius-sm);
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
}

#searchbar input[type="submit"], #searchbar button {
    /* Use button styling for submit */
    background: #222222;
    background-image: linear-gradient(to bottom, #222222, #333333); /* Darker gradient */
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    white-space: nowrap; /* Prevent button text from wrapping */
}


/* --- Main Content Area --- */
#main {
    line-height: 1.5;
    margin: 0 auto;
    padding-top: 80px; /* Adjust padding to account for fixed header height */
    max-width: 1200px; /* Fluid width with a max-width */
    width: calc(100% - 2rem); /* Use calc for some side padding */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --- Footer --- */
footer {
    display: flex; /* Use flexbox for footer sections */
    flex-wrap: wrap; /* Allow sections to wrap */
    justify-content: space-between; /* Distribute content */
    margin: 60px auto 50px auto;
    max-width: 1200px; /* Fluid width with a max-width */
    width: calc(100% - 2rem);
    padding: 1rem;
    border-top: 1px solid #EEE;
    gap: 1rem; /* Space between footer sections */
}

#footer > div {
    flex: 1; /* Allow each div to take equal space */
    min-width: 250px; /* Minimum width before wrapping */
}

/* --- Alerts & Messages (General styling, ensure responsiveness of parent) --- */
.message,
.ajaxMsg,
#updatebar {
    border: 1px solid var(--medium-grey);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-alert);
    padding: 0.5rem 1rem;
    text-align: center;
    position: fixed; /* Keep fixed position for alerts */
    z-index: 9999;
    /* Use rgba for opacity instead of filter/moz/khtml/o-opacity */
    background-color: rgba(255, 255, 255, 0.9); /* Default for ajaxMsg/updatebar */
    right: 1rem;
    bottom: 1rem;
    max-width: 300px; /* Restrict max width */
    width: 90%; /* Fluid width */
    font-size: 1rem;
}

.message {
    position: static; /* Messages within content should be static */
    display: inline-block;
    margin-top: 10px;
    background-image: linear-gradient(to bottom, var(--alert-info-bg-start), var(--alert-info-bg-end));
}

.ajaxMsg.success, #updatebar.success {
    background-image: linear-gradient(to bottom, var(--alert-success-bg-start), var(--alert-success-bg-end));
}
.ajaxMsg.error, #updatebar.error {
    background-image: linear-gradient(to bottom, var(--alert-error-bg-start), var(--alert-error-bg-end));
}

.ajaxMsg .msg, #updatebar .msg {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    line-height: normal;
    padding-left: 20px; /* Keep icon padding */
}

.ajaxMsg .ui-icon, #updatebar .ui-icon {
    display: inline-block;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

#updatebar {
    display: block; /* It starts hidden via JS, but its base state is block */
    background-image: linear-gradient(to bottom, var(--alert-info-bg-start), var(--alert-info-bg-end));
}

/* --- Config Table / Form Styles --- */
.configtable td {
    padding-right: 15px;
    width: auto; /* Allow width to be flexible */
}
.configtable tr td:last-child {
    border-left: 1px dotted #ddd;
    padding-left: 20px;
}

.config legend {
    font-size: 1.25rem; /* Use rem */
    font-weight: bold;
    margin-bottom: 1em;
    text-shadow: 1px 1px 0 #FFFFFF;
}

.config .caption {
    color: #999999;
    line-height: 1.2; /* Use rem or relative units */
    margin-top: 3px;
}

/* Modernizing the .config .tab layout with Flexbox */
.config .tab {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap */
    gap: 4em; /* Gap between columns */
    /* Remove column-rule/columns properties here if using Flexbox for structure */
}

.config .tab .message {
    width: 100%; /* Force message to span full width */
    background-color: transparent;
    margin-bottom: 1em;
}

.config .block {
    flex: 1; /* Allow blocks to grow and shrink */
    min-width: 300px; /* Minimum width for a block before wrapping */
    break-inside: avoid-column; /* Still relevant for CSS columns, but less so with flex */
}

.config .option {
    margin-bottom: 1em;
    font-size: 1rem;
    display: flex; /* Use flex for label and input alignment */
    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
    gap: 10px; /* Space between label and input */
}

.config .option label {
    flex-shrink: 0; /* Prevent label from shrinking */
    width: 170px; /* Initial width, adjust with media queries */
    font-size: 1rem;
}

.config .option .input-wrapper {
    flex-grow: 1; /* Allow input wrapper to take available space */
}

.config .option input[type=text],
.config .option input[type=password],
.config .option input[type=number] {
    border: 1px solid #DDD;
    border-top: 1px solid #CDCDCD;
    box-shadow: inset 0 1px 1px #e0e0e0;
    color: var(--text-color);
    font-size: 1rem;
    width: 100%; /* Make inputs fluid */
    max-width: 230px; /* Max width */
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

.config .option input[type=number] {
    max-width: 6em; /* Adjust to be slightly larger */
}

.config .embed-option-block {
    margin-left: 1em;
}

/* --- Image Styling --- */
img.albumArt,
img.albumArt-nostretch {
    float: left; /* Consider using flex/grid for image layout for better responsiveness */
    width: 100%; /* Make images fluid */
    height: auto; /* Maintain aspect ratio */
    max-width: 250px; /* Keep max width */
    display: block; /* Remove float in a flex/grid context */
}
img.albumArt-nostretch {
    min-width: 64px;
    min-height: 64px;
}

/* --- Tables --- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%; /* Make tables fluid */
    overflow-x: auto; /* Enable horizontal scrolling for narrow screens */
    display: block; /* To allow overflow-x: auto */
}
table th {
    background-image: linear-gradient(to bottom, #FAFAFA, #E7E7E7);
    border-left: 1px solid var(--light-grey);
    box-shadow: 1px 0 0 #FAFAFA;
    text-shadow: 1px 1px 0 #FFFFFF;
    padding: 0.5rem; /* Add padding */
    text-align: left; /* Default text alignment for headers */
}

table th:first-child {
    border-left: 0;
    box-shadow: none;
}

table th.sorting_desc,
table th.sorting_asc {
    background-image: linear-gradient(to bottom, #FAFBFD, #DCE6EF);
    color: var(--primary-color);
}

table td {
    vertical-align: top;
    padding: 0.5rem; /* Add padding */
    border-bottom: 1px solid #eee; /* Add bottom border for rows */
}

table td a {
    color: var(--dark-grey);
}

/* --- Form Elements --- */
select,
input,
textarea,
button {
    font-size: 1rem; /* Use rem */
    border-radius: var(--border-radius-sm);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--medium-grey);
}

textarea {
    overflow: auto;
    width: 100%; /* Make textarea fluid */
    max-width: 400px; /* Optional max-width */
}

input:invalid,
textarea:invalid {
    box-shadow: 0 0 5px #ff0000;
    border-radius: var(--border-radius-sm);
}

input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle; /* Align checkboxes/radios consistently */
    margin-right: 0.5rem; /* Add some spacing */
}

label,
input[type="button"],
input[type="submit"],
input[type="image"],
button {
    cursor: pointer;
}

button,
input,
select,
textarea {
    margin: 0;
}

input[type=submit],
input[type=button] {
    background: #222222;
    background-image: linear-gradient(to bottom, #222222, #333333);
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem; /* Use rem */
    padding: 0.5rem 1rem; /* Use rem */
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    transition: background-image 0.2s ease-in-out; /* Add transition */
}
input[type=submit]:hover,
input[type=button]:hover {
    background-image: linear-gradient(to bottom, #333333, #444444);
}

form legend,
form h2 {
    font-size: 1.25rem; /* Use rem */
    font-weight: bold;
    margin-bottom: 0.8rem;
}

form table {
    width: 100%;
}

form fieldset {
    margin-bottom: 1.5rem;
}

form fieldset small.heading {
    color: var(--dark-grey);
    display: block;
    font-style: italic;
    margin-bottom: 0.8rem;
    margin-top: -1rem; /* Adjust negative margin based on context */
}

form .row {
    margin-bottom: 1rem;
    display: flex; /* Use flex for form rows */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* Gap between label and input */
}

form .row label {
    flex-basis: 170px; /* Set a preferred basis */
    flex-shrink: 0;
    display: block;
    font-size: 1rem;
    line-height: normal;
    padding-top: 5px; /* Adjust padding */
}

form .row label.inline {
    flex-basis: auto;
    margin-right: 0.5rem;
    width: auto;
}

form .row input[type=text],
form .row input[type=password] {
    flex-grow: 1; /* Allow input to grow */
    border: 1px solid #DDD;
    border-top: 1px solid #CDCDCD;
    box-shadow: inset 0 1px 1px #e0e0e0;
    color: var(--text-color);
    font-size: 1rem;
    height: auto;
    line-height: normal;
    max-width: 230px; /* Keep a max width */
    margin-right: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

form .row small {
    color: #999;
    display: block;
    font-size: 0.65rem; /* Smaller font for hints */
    line-height: 1.2;
    margin-left: 170px; /* Adjust based on label width */
    margin-top: 3px;
    flex-basis: 100%; /* Force hint to new line if wrapping */
}

form .left label,
form .radio label {
    float: none; /* Remove floats */
    display: block;
    line-height: normal;
    margin-bottom: 0.5rem;
    padding-top: 0;
    width: auto;
}

form .left input,
form .radio input {
    float: none; /* Remove floats */
    margin-bottom: 0.5rem;
}

form .radio small,
form .checkbox small {
    display: inline !important; /* Keep inline for these hints */
    line-height: normal !important;
    margin: 0 !important;
    width: auto;
}

/* --- Utility Classes --- */
#toTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1.5rem;
    display: none; /* Hidden by default, shown with JS */
    z-index: 1000;
}
#toTop:hover {
    background-color: rgba(0, 0, 0, 0.9);
}
#toTop span {
    display: none; /* Hide text on desktop, show on hover or small screens if needed */
}

/* --- Responsive Adjustments --- */

@media (max-width: 990px) {
    header .wrapper {
        justify-content: center; /* Center items on smaller screens if they wrap */
        flex-direction: column; /* Stack logo, nav, search vertically */
        align-items: stretch; /* Stretch items horizontally */
        height: auto; /* Allow header height to expand */
        padding: 1rem;
    }

    header #logo {
        margin-bottom: 1rem; /* Space below logo */
    }

    nav ul {
        width: 100%;
        justify-content: center; /* Center nav items */
        margin-bottom: 1rem; /* Space below nav */
        border-left: none; /* Remove border */
        box-shadow: none; /* Remove shadow */
    }

    #searchbar {
        width: 100%;
        max-width: none; /* Allow searchbar to take full width */
    }
    #searchbar form {
        flex-direction: column; /* Stack search elements */
        align-items: stretch;
    }
    #searchbar input[type="text"],
    #searchbar select,
    #searchbar input[type="submit"] {
        width: 100%;
        max-width: none;
    }
    #searchbar .mini-icon {
        left: 1rem; /* Adjust icon position */
    }


    #main {
        padding-top: 180px; /* Adjust padding for expanded header */
        width: calc(100% - 2rem); /* Keep padding */
    }

    footer {
        flex-direction: column; /* Stack footer sections */
        align-items: center;
        text-align: center;
        width: calc(100% - 2rem);
    }
    #footer > div {
        min-width: unset; /* Remove min-width on small screens */
        width: 100%;
    }

    .config .tab {
        flex-direction: column; /* Stack config columns */
        gap: 2em;
    }
    .config .option label {
        width: 100%; /* Labels take full width */
        text-align: left;
    }
    form .row label {
        flex-basis: 100%;
        text-align: left;
    }
    form .row small {
        margin-left: 0; /* Remove left margin for hints */
    }

    table {
        /* overflow-x: auto; and display: block; should handle this */
    }

    .ajaxMsg, #updatebar {
        max-width: 90%; /* Ensure they don't get too wide on very small screens */
        left: 5%; /* Center roughly */
        right: 5%;
        margin: 0 auto;
    }

    #toTop span {
        display: inline; /* Show text on smaller screens */
        margin-left: 5px;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 14px; /* Slightly reduce base font size for very small screens */
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    header {
        height: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #main {
        padding-top: calc(1rem + 180px); /* Adjust padding dynamically based on header height */
    }

    nav li {
        width: 100%; /* Each nav item takes full width */
        margin-bottom: 0.5rem;
    }
    nav li a {
        padding: 0.8rem 1rem; /* Larger touch targets */
    }
}