/* Small additions on top of Tabler core — things Tabler doesn't ship out of
   the box: monospace utility, language switch active state, the gallery photo
   aspect ratio, and the variant search-combo dropdown. */

.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* language + theme switch buttons, styled as small segmented controls inside
   the Settings dropdown */
.lang-btn, .theme-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-color: var(--tblr-border-color);
    color: var(--tblr-secondary);
}
.lang-btn.active, .theme-btn.active {
    background: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: #fff;
}

/* gallery photo tiles: fixed aspect ratio so the grid stays even regardless
   of each photo's real dimensions */
.gallery-thumb {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* variant search-combo (manufacturer/model/colour typeahead) */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    z-index: 20;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown, 0 0.25rem 1rem rgba(0,0,0,0.15));
    padding: 0.25rem 0;
}
.combo-dropdown.show { display: block; }
.combo-item { padding: 0.4rem 0.9rem; font-size: 0.875rem; cursor: pointer; color: var(--tblr-body-color); }
.combo-item:hover { background: var(--tblr-bg-surface-secondary); }
.combo-empty { padding: 0.5rem 0.9rem; color: var(--tblr-secondary); font-size: 0.85rem; }

/* optional clear ("x") button sitting inside a combo input, right-aligned */
.combo-input.has-clear-btn { padding-right: 2rem; }
.combo-clear-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 4px;
    line-height: 0;
    color: var(--tblr-secondary);
    cursor: pointer;
}
.combo-clear-btn:hover { color: var(--tblr-body-color); }
.combo-clear-btn svg { width: 16px; height: 16px; }

/* Tabler's .form-fieldset doesn't style a bare <legend> — the browser UA
   stylesheet renders it heading-sized, so bring it down to a form-label look. */
.form-fieldset legend { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; padding: 0; border: 0; width: auto; }

/* Tabler's .form-select:disabled only swaps the background for
   --tblr-bg-surface-secondary, which in dark mode resolves to the exact same
   colour as the normal background (--tblr-bg-forms) — so a disabled select
   looks completely unchanged. .form-control:disabled already dims its text
   for this reason; give select the same treatment. */
.form-select:disabled { color: var(--tblr-secondary); opacity: .7; cursor: not-allowed; }

/* sortable table headers (admin variants, my tools, profile tools) */
th[data-key] { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
th[data-key] .sort-icon { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; color: var(--tblr-secondary); opacity: .5; }
th[data-key] .sort-icon svg { width: 14px; height: 14px; }
th[data-key].sort-active .sort-icon { color: var(--tblr-primary); opacity: 1; }

.variant-thumb { width: 40px; min-width: 40px; max-width: 40px; height: 40px; object-fit: contain; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); }
.variant-preview { max-height: 96px; max-width: 220px; object-fit: contain; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); display: block; }

/* photo detail page */
.photo-stage { display: flex; align-items: center; justify-content: center; background: var(--tblr-bg-surface-secondary); min-height: 200px; }
.photo-full { max-width: 100%; max-height: 78vh; object-fit: contain; }

footer.footer { font-size: 0.8rem; }

/* tool modal: expandable raw-details tree (manufacturer hallmark data, JSON) */
.pst-details { margin-top: 1rem; border-top: 1px solid var(--tblr-border-color); padding-top: 0.875rem; }
.pst-details summary { cursor: pointer; color: var(--tblr-primary); font-size: 0.85rem; font-weight: 500; }
.details-tree { font-size: 0.82rem; margin-top: 0.625rem; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.details-tree ul { margin: 0.25rem 0 0.25rem 0.875rem; padding-left: 0.75rem; border-left: 1px solid var(--tblr-border-color); }
.details-tree li { margin: 0.1875rem 0; }
.details-tree .key { color: var(--tblr-secondary); }

/* tool modal: photo lightbox overlay */
.lightbox-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(0, 0, 0, .92); }
.lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4rem 5rem; touch-action: none; }
.lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-btn { position: absolute; color: #fff; background: rgba(255, 255, 255, .1); }
.lightbox-btn-close { top: 1rem; right: 1rem; }
.lightbox-btn-prev { top: 50%; left: 1rem; transform: translateY(-50%); }
.lightbox-btn-next { top: 50%; right: 1rem; transform: translateY(-50%); }
.lightbox-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: .85rem; }

/* on small screens, let the photo fill the whole viewport instead of leaving
   large empty margins meant for pointer-based prev/next controls */
@media (max-width: 576px) {
    .lightbox-stage { padding: 0; }
}