/* Modern overlay UI — search, modals, toasts, tag cloud, selects.
   Scoped to body[data-layout-version="modern"]. Classic unchanged.

   Tokens (--layout-*) come from layout-modern-tokens.css, which loads first.
   Do not redefine them here. */

/* ─── Search overlay ───────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .shortcut-search {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body[data-layout-version="modern"] .search-container {
    border-radius: var(--layout-radius-lg);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body[data-layout-version="modern"]:not([data-button-position="side-left"]):not([data-button-position="bottom-left"]):not([data-button-position="bottom-right"]) .search-container {
    width: min(52rem, calc(100vw - 2.5rem));
    max-width: 100%;
}

body[data-layout-version="modern"] .search-prefix {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .search-match {
    border-radius: var(--layout-radius-sm);
    border-left: none;
}

body[data-layout-version="modern"] .search-match:hover,
body[data-layout-version="modern"] .search-match.keyboard-selected {
    background: color-mix(in srgb, var(--accent-primary) 11%, var(--background-secondary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

body[data-layout-version="modern"] .search-command-group-header {
    margin-top: 0.35rem;
    padding: 0.45rem 0.55rem 0.25rem;
    border-top: none;
    border-radius: var(--layout-radius-sm);
    opacity: 0.72;
}

body[data-layout-version="modern"] .search-command-group-header:hover,
body[data-layout-version="modern"] .search-command-group-header.keyboard-selected {
    opacity: 1;
    background: color-mix(in srgb, var(--background-primary) 55%, transparent);
}

body[data-layout-version="modern"] .search-command-group-header.keyboard-selected {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

body[data-layout-version="modern"] .search-mode-tabs {
    gap: 0.35rem;
    padding: 0.35rem;
    margin-top: 0.5rem;
    border-top: none;
    border-radius: var(--layout-radius-md);
    background: var(--background-secondary);
    border: 1px solid var(--border-primary);
}

body[data-layout-version="modern"] .search-mode-tab {
    border-radius: var(--layout-radius-pill);
    border: 1px solid transparent;
    transition:
        color var(--layout-transition),
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .search-mode-tab.active {
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .search-mode-tab:hover {
    background: color-mix(in srgb, var(--background-primary) 70%, transparent);
}

body[data-layout-version="modern"] .search-history-chip,
body[data-layout-version="modern"] .search-command-chip {
    border-radius: var(--layout-radius-pill);
    background: color-mix(in srgb, var(--background-secondary) 80%, transparent);
}

body[data-layout-version="modern"] .search-history-chip:hover,
body[data-layout-version="modern"] .search-command-chip:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--background-secondary));
}

/* ─── Modals ─────────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body[data-layout-version="modern"] .modal {
    border-radius: var(--layout-radius-lg);
    box-shadow: var(--layout-shadow-lg);
    overflow: hidden;
    background: var(--layout-modal-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-layout-version="modern"] .modal-header {
    background: var(--background-secondary);
    border-bottom-color: color-mix(in srgb, var(--border-primary) 45%, transparent);
}

body[data-layout-version="modern"] .modal-body {
    background: var(--background-primary);
}

body[data-layout-version="modern"] .modal-new-bookmark {
    border-radius: var(--layout-radius-lg);
}

body[data-layout-version="modern"] .nbm-header {
    background: var(--background-secondary);
}

body[data-layout-version="modern"] .nbm-input,
body[data-layout-version="modern"] .nbm-select {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .nbm-input:focus,
body[data-layout-version="modern"] .nbm-select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

body[data-layout-version="modern"] .wn-intro {
    border-radius: var(--layout-radius-sm);
    background: var(--background-secondary);
}

body[data-layout-version="modern"] .wn-kofi-btn,
body[data-layout-version="modern"] .wn-release-tag {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .modal-button,
body[data-layout-version="modern"] .modal .btn {
    border-radius: var(--layout-radius-sm);
}

/* Dashboard + config toolbar modals — surface parity with search overlay */
body[data-layout-version="modern"]:has(#dashboard-layout) #app-modal.modal-overlay:has(.recent-bookmarks-modal) .modal,
body[data-layout-version="modern"]:has(#dashboard-layout) #app-modal.modal-overlay:has(.keyboard-cheat-sheet-modal) .modal,
body[data-layout-version="modern"]:has(#dashboard-layout) #app-modal.modal-overlay:has(.whats-new-modal) .modal,
body[data-layout-version="modern"]:has(#dashboard-layout) #app-modal.modal-overlay:has(.inbox-intro-modal) .modal,
body[data-layout-version="modern"]:has(#config-main) #app-modal.modal-overlay:has(.whats-new-modal) .modal {
    border-radius: var(--layout-radius-lg);
    border-color: var(--layout-surface-border);
    background: var(--layout-modal-bg);
    box-shadow: var(--layout-shadow-md);
}

body[data-layout-version="modern"] .recent-bookmarks-modal-item,
body[data-layout-version="modern"] .recent-bookmarks-skeleton-row,
body[data-layout-version="modern"] .page-overview-modal-link {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .recent-bookmarks-modal-item:hover,
body[data-layout-version="modern"] .page-overview-modal-link:hover,
body[data-layout-version="modern"] .page-overview-modal-item.is-focused .page-overview-modal-link {
    background: color-mix(in srgb, var(--accent-primary) 11%, var(--background-secondary));
    border-color: color-mix(in srgb, var(--accent-primary) 24%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

/* ─── Toasts ─────────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .app-notification {
    border-radius: var(--layout-radius-md);
    background: var(--background-secondary);
    box-shadow: var(--layout-shadow-md);
}

body[data-layout-version="modern"] .app-notification-action {
    border-radius: var(--layout-radius-sm);
}

/* ─── Tag cloud ──────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .tag-cloud-modal {
    border-radius: var(--layout-radius-lg);
    background: var(--background-secondary);
    border-color: var(--border-primary);
    box-shadow: var(--layout-shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-layout-version="modern"] .tag-cloud-modal-close {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .tag-cloud-modal-close:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--background-primary));
}

body[data-layout-version="modern"] .tag-cloud-word:hover,
body[data-layout-version="modern"] .tag-cloud-word.is-selected {
    border-radius: var(--layout-radius-sm);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

body[data-layout-version="modern"] .tag-cloud-clear-filter {
    border-radius: var(--layout-radius-pill);
}

/* ─── Custom selects (dashboard + config) ────────────────────────────────── */

body[data-layout-version="modern"] .custom-select-trigger {
    border-radius: var(--layout-radius-sm);
    transition:
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .custom-select.open .custom-select-trigger,
body[data-layout-version="modern"] .custom-select-trigger:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

body[data-layout-version="modern"] .custom-select-options {
    border-radius: var(--layout-radius-sm);
    box-shadow: var(--layout-shadow-md);
}

body[data-layout-version="modern"] .custom-select-option:hover,
body[data-layout-version="modern"] .custom-select-option.selected {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--background-primary));
}

/* Tag autocomplete (config bookmarks form — portaled to body) */
body[data-layout-version="modern"] .tag-ac-dropdown {
    border-radius: var(--layout-radius-sm);
    box-shadow: var(--layout-shadow-md);
}

body[data-layout-version="modern"] .tag-ac-item:hover,
body[data-layout-version="modern"] .tag-ac-item-active {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--background-secondary));
    border-radius: var(--layout-radius-sm);
}

/* ─── Feature tour (dashboard onboarding) ────────────────────────────────── */

body[data-layout-version="modern"] .feature-tour-card {
    border-radius: var(--layout-radius-lg);
    box-shadow: var(--layout-shadow-lg);
    background: var(--layout-overlay-bg);
}

body[data-layout-version="modern"] .feature-tour-input,
body[data-layout-version="modern"] .feature-tour-fieldset {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .feature-tour-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

body[data-layout-version="modern"] .feature-tour-btn {
    border-radius: var(--layout-radius-sm);
    transition:
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .feature-tour-btn:hover:not(:disabled) {
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .feature-tour-focus-ring {
    border-radius: var(--layout-radius-sm);
}

/* ─── Config guided tours ─────────────────────────────────────────────────── */

body[data-layout-version="modern"] [class*="-tour-card"] {
    border-radius: var(--layout-radius-lg);
    box-shadow: var(--layout-shadow-lg);
    background: var(--layout-overlay-bg);
}

body[data-layout-version="modern"] [class*="-tour-card"] .btn,
body[data-layout-version="modern"] [class*="-tour-card"] button {
    border-radius: var(--layout-radius-sm);
}