/* Whisky Inventar – theme on top of Bootstrap 5.3 */
:root, [data-bs-theme="light"] {
  --amber: #c9771f;
  --amber-strong: #a85f12;
  --gold: #b8892b;
  --app-bg: #f6f3ef;
  --surface: #ffffff;
  --surface-2: #efe9e2;
  --hairline: rgba(60, 40, 20, .12);
  --bs-body-bg: var(--app-bg);
  --bs-link-color-rgb: 168, 95, 18;
  --bs-link-hover-color-rgb: 120, 66, 10;
}
[data-bs-theme="dark"] {
  --amber: #d9852a;
  --amber-strong: #eb9a3f;
  --gold: #ebc252;
  --app-bg: #141110;
  --surface: #1d1917;
  --surface-2: #26211e;
  --hairline: rgba(255, 235, 210, .09);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: #ece6df;
  --bs-secondary-color: rgba(236, 230, 223, .62);
  --bs-border-color: var(--hairline);
  --bs-link-color-rgb: 235, 154, 63;
  --bs-link-hover-color-rgb: 245, 190, 110;
}
body { background: var(--app-bg); -webkit-font-smoothing: antialiased; }
.serif, h1, .h1, .h2, .bottle-name {
  font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  letter-spacing: -.01em;
}

/* Nav */
.app-nav { background: color-mix(in srgb, var(--app-bg) 82%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--hairline); }
.app-nav .nav-link { border-radius: .6rem; padding: .4rem .75rem !important; }
.app-nav .nav-link.active { color: var(--amber-strong); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--gold), var(--amber) 55%, #7a3f0a); box-shadow: 0 2px 8px rgba(201,119,31,.35); }
.brand-mark-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.8rem; }
.brand-text { font-family: ui-serif, "New York", Georgia, serif; font-weight: 600; }

.btn-icon { border: 0; color: var(--bs-secondary-color); }

/* Surfaces */
.card-soft { background: var(--surface); border: 1px solid var(--hairline); border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--hairline); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--amber) 7%, transparent); }

/* Buttons */
.btn-amber { --bs-btn-color: #fff; --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--amber-strong); --bs-btn-hover-border-color: var(--amber-strong); --bs-btn-active-bg: var(--amber-strong); font-weight: 600; border-radius: .7rem; }
.form-control, .form-select { border-radius: .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--amber); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent); }

/* Stats */
.stat { padding: 1.1rem 1.25rem; }
.stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.stat .value { font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .value.gold { color: var(--gold); }

/* Bottle grid */
.bottle-card { position: relative; height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.bottle-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.12); }
.bottle-thumb { aspect-ratio: 3/4; border-radius: .8rem .8rem 0 0; background: radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--gold) 35%, transparent), transparent 60%), linear-gradient(160deg, var(--surface-2), var(--surface)); display: grid; place-items: center; overflow: hidden; }
.bottle-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bottle-thumb .bi { font-size: 3rem; color: color-mix(in srgb, var(--amber) 70%, transparent); }
.bottle-name { font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; background: var(--surface-2); color: var(--bs-secondary-color); }
.chip-amber { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-strong); }
.qty-badge { position: absolute; top: .6rem; right: .6rem; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; font-size: .75rem; padding: .1rem .5rem; backdrop-filter: blur(6px); }
.stretched-link:focus-visible { outline: 2px solid var(--amber); }

.view-toggle .btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }

@media (prefers-reduced-motion: reduce) { .bottle-card { transition: none; } }

/* Timeline */
.timeline-dot { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; }
.timeline li:last-child { border-bottom: 0 !important; }
.bottle-thumb-detail { aspect-ratio: 4/5; }
@media (max-width: 991.98px) { .bottle-thumb-detail { aspect-ratio: auto; height: 160px; } }

/* Searchable dropdowns (Tom Select) – match the theme in light and dark */
.ts-wrapper.form-select { padding: 0; border: 0; background: none; }
.ts-wrapper .ts-control { border-radius: .6rem; background-color: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); min-height: calc(1.5em + .75rem + 2px); }
.ts-wrapper.form-select-sm .ts-control { min-height: calc(1.5em + .5rem + 2px); padding: .2rem .5rem; font-size: .875rem; }
.ts-wrapper.focus .ts-control { border-color: var(--amber); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent); }
.ts-wrapper .ts-control input { color: var(--bs-body-color); }
.ts-dropdown { background: var(--surface); color: var(--bs-body-color); border-color: var(--bs-border-color); border-radius: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 1060; }
.ts-dropdown .option { padding: .4rem .75rem; }
.ts-dropdown .active { background: color-mix(in srgb, var(--amber) 18%, transparent); color: inherit; }
.ts-dropdown .no-results { padding: .5rem .75rem; color: var(--bs-secondary-color); font-size: .85rem; }
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; }
.input-group > .ts-wrapper:not(:last-child) .ts-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Sold / empty bottles in search results */
.bottle-card.is-out .bottle-thumb, .bottle-card.is-out .bottle-name { opacity: .55; }
tr.is-out td { opacity: .6; }
.ts-wrapper .clear-button { color: var(--bs-secondary-color); }
.ts-wrapper.plugin-clear_button .ts-control { padding-right: 3.5rem !important; }

/* Searchable dropdowns: same frame as the normal selects + magnifier icon (overrides Tom Select theme) */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-select.single .ts-control,
.ts-wrapper.form-select-sm .ts-control {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .6rem !important;
  background-color: var(--bs-body-bg) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .7rem center !important;
  background-size: 13px 13px !important;
  padding-right: 2.2rem !important;
  box-shadow: none;
}
.input-group > .ts-wrapper:not(:last-child) .ts-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ts-wrapper.focus .ts-control { border-color: var(--amber) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent) !important; }
.ts-wrapper.plugin-clear_button .clear-button { right: 2rem !important; }
.ts-wrapper .ts-control > input::placeholder { color: var(--bs-body-color); opacity: .85; }

/* Filter bar */
.filter-bar .input-group-text { background: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-secondary-color); border-radius: .6rem 0 0 .6rem; }
.filter-bar .input-group .form-control { border-left: 0; border-radius: 0 .6rem .6rem 0; }
.filter-count { background: var(--amber); font-size: .65rem; }
.modal-content { background: var(--surface); border: 1px solid var(--hairline); border-radius: 1rem; }
.modal-header, .modal-footer { border-color: var(--hairline); }
.btn-link { --bs-btn-color: var(--amber-strong); --bs-btn-hover-color: var(--amber); }

/* Pagination */
.pagination { --bs-pagination-active-bg: var(--amber); --bs-pagination-active-border-color: var(--amber); --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--hairline); --bs-pagination-hover-color: var(--amber-strong); --bs-pagination-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent); }
.pager .btn-group .btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }

/* Invoices */
.invoice-preview { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--hairline); border-radius: .6rem; background: #fff; }
.ts-wrapper.multi .ts-control { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); min-height: calc(1.5em + .5rem + 2px); }
.ts-wrapper.multi .ts-control .item { background: color-mix(in srgb, var(--amber) 18%, transparent); color: inherit; border-radius: .4rem; border: 0; }

/* Premium */
.badge-premium { background: linear-gradient(135deg, var(--gold), var(--amber)); color: #fff; font-weight: 600; letter-spacing: .02em; }
.btn-locked { opacity: .7; cursor: not-allowed; }

.ts-dropdown .option.disabled.ts-premium, .ts-dropdown .ts-premium { opacity: .75; cursor: not-allowed; }
select option:disabled { color: var(--bs-secondary-color); }
.chip-tag { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--bs-body-color); }
.tag-toggle { display: inline-flex; }
.tag-toggle input { display: none; }
.tag-toggle span { cursor: pointer; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--hairline); font-size: .82rem; user-select: none; }
.tag-toggle input:checked + span { background: color-mix(in srgb, var(--amber) 18%, transparent); border-color: var(--amber); color: var(--amber-strong); }