/* Laser Settings Library
   Complete application stylesheet
   Designed to work after the Tailwind CDN stylesheet in layout.twig.
*/

:root {
    color-scheme: dark;
    --page: #09090b;
    --surface: #18181b;
    --surface-2: #202024;
    --surface-3: #27272a;
    --border: #303036;
    --border-strong: #52525b;
    --text: #fafafa;
    --text-soft: #d4d4d8;
    --muted: #a1a1aa;
    --muted-dark: #71717a;
    --primary: #f4f4f5;
    --primary-hover: #e4e4e7;
    --primary-text: #18181b;
    --danger: #7f1d1d;
    --danger-hover: #991b1b;
    --success-bg: #052e16;
    --success-text: #bbf7d0;
    --error-bg: #450a0a;
    --error-text: #fecaca;
    --focus: #a1a1aa;
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* Shared panels */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.1rem !important;
    box-shadow: var(--shadow);
}

.card:hover {
    border-color: #3f3f46 !important;
}

/* Inputs */
.input {
    display: block !important;
    width: 100% !important;
    min-height: 2.65rem;
    margin-top: 0.35rem !important;
    padding: 0.65rem 0.75rem !important;
    background: #0c0c0f !important;
    border: 1px solid #3f3f46 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    caret-color: var(--text);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.input:hover {
    border-color: var(--border-strong) !important;
}

.input:focus,
.input:focus-visible {
    outline: none !important;
    border-color: var(--focus) !important;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.2) !important;
    background: #101014 !important;
}

.input::placeholder {
    color: var(--muted-dark) !important;
    opacity: 1;
}

select.input {
    cursor: pointer;
}

textarea.input {
    min-height: 7rem;
    resize: vertical;
}

input[type="file"].input {
    padding: 0.45rem !important;
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.48rem 0.7rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--surface-3);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #e4e4e7;
}

/* Buttons */
.btn,
.btn-secondary,
.btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.55rem;
    padding: 0.58rem 0.88rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}

.btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text) !important;
}

.btn:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #09090b !important;
}

.btn-secondary {
    background: var(--surface-3) !important;
    border-color: #3f3f46 !important;
    color: var(--text) !important;
}

.btn-secondary:hover {
    background: #3f3f46 !important;
    border-color: var(--border-strong) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--danger) !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: var(--danger-hover) !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

.btn:active,
.btn-secondary:active,
.btn-danger:active {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
}

button:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Text and labels */
.section-title {
    margin: 0 0 1rem !important;
    color: var(--text);
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.help {
    margin-top: 0.4rem !important;
    color: var(--muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.45;
}

.badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.55rem !important;
    background: var(--surface-3) !important;
    border: 1px solid #3f3f46;
    border-radius: 999px !important;
    color: var(--text-soft) !important;
    font-size: 0.72rem !important;
    font-weight: 650;
    line-height: 1.2;
}

.link {
    color: var(--text-soft) !important;
    text-decoration: underline !important;
    text-decoration-color: #52525b !important;
    text-underline-offset: 3px;
}

.link:hover {
    color: #fff !important;
    text-decoration-color: #a1a1aa !important;
}

/* Alerts */
.flash {
    margin-bottom: 1rem !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid transparent;
    border-radius: 0.65rem !important;
    font-size: 0.92rem;
}

.success {
    background: var(--success-bg) !important;
    border-color: #166534 !important;
    color: var(--success-text) !important;
}

.error {
    background: var(--error-bg) !important;
    border-color: #991b1b !important;
    color: var(--error-text) !important;
}

/* Record details */
.data-grid {
    display: grid !important;
    grid-template-columns: minmax(130px, 0.85fr) minmax(0, 1.5fr) !important;
    gap: 0.58rem 1rem !important;
    margin: 0;
}

.data-grid dt {
    color: var(--muted) !important;
}

.data-grid dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-weight: 550 !important;
    overflow-wrap: anywhere;
}

/* Tables, in case records are later shown in table form */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Header refinements */
header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

header nav form {
    display: inline-flex;
    margin: 0;
}

/* Gallery and media */
.aspect-square,
.aspect-video {
    background: #111114;
}

img.object-cover {
    width: 100%;
    height: 100%;
}

/* Better scrollbar on desktop */
@media (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #3f3f46 #111114;
    }

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: #111114;
    }

    *::-webkit-scrollbar-thumb {
        background: #3f3f46;
        border: 2px solid #111114;
        border-radius: 999px;
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    header > div {
        align-items: flex-start !important;
        gap: 0.8rem;
    }

    header nav {
        justify-content: flex-end;
    }

    .btn,
    .btn-secondary,
    .btn-danger {
        min-height: 2.35rem;
        padding: 0.52rem 0.72rem !important;
        font-size: 0.84rem !important;
    }

    .card {
        padding: 0.95rem !important;
    }

    .data-grid {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }

    .data-grid dd {
        margin-bottom: 0.65rem;
    }
}

@media (max-width: 520px) {
    header > div {
        flex-direction: column;
    }

    header nav {
        width: 100%;
        justify-content: flex-start;
    }

    header nav .btn,
    header nav .btn-secondary,
    header nav form,
    header nav form button {
        flex: 1 1 auto;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Strong button label override
   Handles Tailwind, browser extensions, and WebKit text-fill behavior. */
a.btn,
button.btn,
input.btn,
.btn:link,
.btn:visited,
.btn *,
a.btn *,
button.btn * {
    color: #111114 !important;
    -webkit-text-fill-color: #111114 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

a.btn:hover,
button.btn:hover,
.btn:hover *,
a.btn:focus,
button.btn:focus {
    color: #050506 !important;
    -webkit-text-fill-color: #050506 !important;
}

a.btn::before,
a.btn::after,
button.btn::before,
button.btn::after {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
/* Laser Settings Library
   Complete application stylesheet
   Designed to work after the Tailwind CDN stylesheet in layout.twig.
*/

:root {
    color-scheme: dark;
    --page: #09090b;
    --surface: #18181b;
    --surface-2: #202024;
    --surface-3: #27272a;
    --border: #303036;
    --border-strong: #52525b;
    --text: #fafafa;
    --text-soft: #d4d4d8;
    --muted: #a1a1aa;
    --muted-dark: #71717a;
    --primary: #f4f4f5;
    --primary-hover: #e4e4e7;
    --primary-text: #18181b;
    --danger: #7f1d1d;
    --danger-hover: #991b1b;
    --success-bg: #052e16;
    --success-text: #bbf7d0;
    --error-bg: #450a0a;
    --error-text: #fecaca;
    --focus: #a1a1aa;
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* Shared panels */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.1rem !important;
    box-shadow: var(--shadow);
}

.card:hover {
    border-color: #3f3f46 !important;
}

/* Inputs */
.input {
    display: block !important;
    width: 100% !important;
    min-height: 2.65rem;
    margin-top: 0.35rem !important;
    padding: 0.65rem 0.75rem !important;
    background: #0c0c0f !important;
    border: 1px solid #3f3f46 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    caret-color: var(--text);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.input:hover {
    border-color: var(--border-strong) !important;
}

.input:focus,
.input:focus-visible {
    outline: none !important;
    border-color: var(--focus) !important;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.2) !important;
    background: #101014 !important;
}

.input::placeholder {
    color: var(--muted-dark) !important;
    opacity: 1;
}

select.input {
    cursor: pointer;
}

textarea.input {
    min-height: 7rem;
    resize: vertical;
}

input[type="file"].input {
    padding: 0.45rem !important;
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.48rem 0.7rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--surface-3);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #e4e4e7;
}

/* Buttons */
.btn,
.btn-secondary,
.btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.55rem;
    padding: 0.58rem 0.88rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}

.btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text) !important;
}

.btn:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #09090b !important;
}

.btn-secondary {
    background: var(--surface-3) !important;
    border-color: #3f3f46 !important;
    color: var(--text) !important;
}

.btn-secondary:hover {
    background: #3f3f46 !important;
    border-color: var(--border-strong) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--danger) !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: var(--danger-hover) !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

.btn:active,
.btn-secondary:active,
.btn-danger:active {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
}

button:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Text and labels */
.section-title {
    margin: 0 0 1rem !important;
    color: var(--text);
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.help {
    margin-top: 0.4rem !important;
    color: var(--muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.45;
}

.badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.55rem !important;
    background: var(--surface-3) !important;
    border: 1px solid #3f3f46;
    border-radius: 999px !important;
    color: var(--text-soft) !important;
    font-size: 0.72rem !important;
    font-weight: 650;
    line-height: 1.2;
}

.link {
    color: var(--text-soft) !important;
    text-decoration: underline !important;
    text-decoration-color: #52525b !important;
    text-underline-offset: 3px;
}

.link:hover {
    color: #fff !important;
    text-decoration-color: #a1a1aa !important;
}

/* Alerts */
.flash {
    margin-bottom: 1rem !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid transparent;
    border-radius: 0.65rem !important;
    font-size: 0.92rem;
}

.success {
    background: var(--success-bg) !important;
    border-color: #166534 !important;
    color: var(--success-text) !important;
}

.error {
    background: var(--error-bg) !important;
    border-color: #991b1b !important;
    color: var(--error-text) !important;
}

/* Record details */
.data-grid {
    display: grid !important;
    grid-template-columns: minmax(130px, 0.85fr) minmax(0, 1.5fr) !important;
    gap: 0.58rem 1rem !important;
    margin: 0;
}

.data-grid dt {
    color: var(--muted) !important;
}

.data-grid dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-weight: 550 !important;
    overflow-wrap: anywhere;
}

/* Tables, in case records are later shown in table form */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Header refinements */
header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

header nav form {
    display: inline-flex;
    margin: 0;
}

/* Gallery and media */
.aspect-square,
.aspect-video {
    background: #111114;
}

img.object-cover {
    width: 100%;
    height: 100%;
}

/* Better scrollbar on desktop */
@media (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #3f3f46 #111114;
    }

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: #111114;
    }

    *::-webkit-scrollbar-thumb {
        background: #3f3f46;
        border: 2px solid #111114;
        border-radius: 999px;
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    header > div {
        align-items: flex-start !important;
        gap: 0.8rem;
    }

    header nav {
        justify-content: flex-end;
    }

    .btn,
    .btn-secondary,
    .btn-danger {
        min-height: 2.35rem;
        padding: 0.52rem 0.72rem !important;
        font-size: 0.84rem !important;
    }

    .card {
        padding: 0.95rem !important;
    }

    .data-grid {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }

    .data-grid dd {
        margin-bottom: 0.65rem;
    }
}

@media (max-width: 520px) {
    header > div {
        flex-direction: column;
    }

    header nav {
        width: 100%;
        justify-content: flex-start;
    }

    header nav .btn,
    header nav .btn-secondary,
    header nav form,
    header nav form button {
        flex: 1 1 auto;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Strong button label override
   Handles Tailwind, browser extensions, and WebKit text-fill behavior. */
a.btn,
button.btn,
input.btn,
.btn:link,
.btn:visited,
.btn *,
a.btn *,
button.btn * {
    color: #111114 !important;
    -webkit-text-fill-color: #111114 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

a.btn:hover,
button.btn:hover,
.btn:hover *,
a.btn:focus,
button.btn:focus {
    color: #050506 !important;
    -webkit-text-fill-color: #050506 !important;
}

a.btn::before,
a.btn::after,
button.btn::before,
button.btn::after {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}


/* =========================================================
   Setting detail grid view
   ========================================================= */

.setting-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.setting-gallery__item {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    aspect-ratio: 16 / 10;
}

.setting-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.setting-gallery__item:hover img {
    transform: scale(1.02);
}

.core-settings-panel {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.045), transparent 34%),
        var(--surface);
    box-shadow: var(--shadow);
}

.core-settings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.core-settings-heading h2 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.core-settings-eyebrow {
    margin: 0 0 0.18rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.core-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.core-setting-card {
    min-height: 145px;
    padding: 1.05rem;
    border: 1px solid #34343a;
    border-radius: 0.9rem;
    background: #f1f1f3;
    color: #121216;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 8px 22px rgba(0,0,0,0.14);
}

.core-setting-card--wide {
    grid-column: span 2;
}

.core-setting-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.45rem;
}

.core-setting-card__label {
    color: #686871;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.core-setting-card__unit {
    color: #888891;
    font-size: 0.67rem;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.core-setting-card__value {
    color: #111115;
    font-size: clamp(1.55rem, 2.2vw, 2.25rem);
    font-weight: 760;
    line-height: 1.05;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}

.core-setting-card--wide .core-setting-card__value {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.setting-status {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.68rem;
    border: 1px solid #44444b;
    border-radius: 999px;
    background: #252529;
    color: #e4e4e7;
    font-size: 0.75rem;
    font-weight: 720;
}

.setting-status--production-approved,
.setting-status--approved,
.setting-status--usable {
    border-color: #166534;
    background: #052e16;
    color: #bbf7d0;
}

.setting-status--failed {
    border-color: #991b1b;
    background: #450a0a;
    color: #fecaca;
}

.setting-status--testing {
    border-color: #854d0e;
    background: #422006;
    color: #fde68a;
}

.setting-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 1.25rem;
}

.setting-details-card,
.setting-notes-card {
    min-width: 0;
}

.note-section + .note-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.note-section h3 {
    margin: 0 0 0.35rem;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 720;
}

.note-section p {
    margin: 0;
    color: var(--text-soft);
    white-space: pre-line;
}

.empty-note {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 1050px) {
    .core-settings-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .setting-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .core-settings-panel {
        padding: 1rem;
    }

    .core-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .core-setting-card--wide {
        grid-column: span 2;
    }

    .core-setting-card {
        min-height: 125px;
    }
}

@media (max-width: 480px) {
    .core-settings-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .core-settings-grid {
        grid-template-columns: 1fr;
    }

    .core-setting-card--wide {
        grid-column: auto;
    }

    .core-setting-card {
        min-height: 112px;
    }

    .core-setting-card__top {
        margin-bottom: 1rem;
    }
}


/* =========================================================
   Fixed button height normalization
   ========================================================= */

:root {
    --button-height: 2.75rem;
}

/* All primary application buttons */
.btn,
.btn-secondary,
.btn-danger {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/* Ensure forms do not alter button alignment or height */
header nav form,
.setting-actions form,
form.inline,
form.inline-flex {
    display: inline-flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

header nav form > button,
.setting-actions form > button,
form.inline > button,
form.inline-flex > button {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
}

/* Keep action groups aligned */
header nav,
.setting-actions,
.page-actions,
.flex.items-center.gap-2,
.flex.items-center.gap-3 {
    align-items: center !important;
}

/* Mobile keeps the same button height */
@media (max-width: 767px) {
    :root {
        --button-height: 2.6rem;
    }

    .btn,
    .btn-secondary,
    .btn-danger {
        height: var(--button-height) !important;
        min-height: var(--button-height) !important;
        max-height: var(--button-height) !important;
    }
}

/* Compact setting gallery */

.setting-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.setting-gallery__item {
    height: 220px;
    aspect-ratio: auto;
}

.setting-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 760px) {
    .setting-gallery {
        grid-template-columns: 1fr;
    }

    .setting-gallery__item {
        height: 180px;
    }
}