@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
@import url(/images/icons/simple-line-icons/css/simple-line-icons.css);
@import url(/images/icons/themify-icons/themify-icons.css);
/*
@import url(/images/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(/images/icons/weather-icons/css/weather-icons.min.css);
@import url(/images/icons/flag-icon-css/flag-icon.min.css);
*/

:root {
    --fs-theme-navigation-background: #F1F0F0;
    --fs-theme-text-color: #444444;

    --fs-primary-background: #F1F0F0;
    --fs-primary-text: #666666;
    --fs-primary-hover: #ced9e4;
    --fs-primary-active: #ced9e4;
    --fs-primary-focus: #ced9e4;
    --fs-primary-disabled: #edf1f5;

    --fs-secondary-background: #f8f9fa;
    --fs-secondary-text: #666666;
    --fs-secondary-hover: #e1e6ea;
    --fs-secondary-active: #e1e6ea;
    --fs-secondary-focus: #e1e6ea;
    --fs-secondary-disabled: #ffffff;

    --fs-info-background: #17a2b8;
    --fs-info-text: #fff;
    --fs-info-hover: #148c9f;
    --fs-info-active: #148c9f;
    --fs-info-focus: #148c9f;
    --fs-info-disabled: #4696a2;

    --fs-danger-background: #E57373;
    --fs-danger-text: #fff;
    --fs-danger-hover: #df5353;
    --fs-danger-active: #df5353;
    --fs-danger-focus: #df5353;
    --fs-danger-disabled: #efa9a9;


    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --fs-left-navigation-width: 250px;
    --fs-font-family: "Poppins", sans-serif;
}


/* Dynamic Sizing CSS */
/*
.fixed-layout .page-wrapper.xs {padding-top: 6.5rem;}
.fixed-layout .page-wrapper.sm {padding-top: 6.5rem;}
.fixed-layout .page-wrapper.md {padding-top: 6.5rem;}
.fixed-layout .page-wrapper.lg {padding-top: 6.5rem;}
.fixed-layout .page-wrapper.xl {padding-top: 6.5rem;}
 */



/*********************************************************
    HTML
 *********************************************************/
html {

}

body {
    font-family: var(--fs-font-family);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

* {
    font-family: var(--fs-font-family);
    font-size: 14px;
    font-weight: 300;
}

/*********************************************************
    LINKS
 *********************************************************/
a {
    color: var(--fs-theme-text-color);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:hover {
    color: #1d6d86;
    text-decoration: none;
}



/*********************************************************
    HEADERS
 *********************************************************/
.h1, h1 {
    font-size: 1.5rem;
}

.h2, h2 {
    font-size: 1.4rem;
}

.h3, h3 {
    font-size: 1.3rem;
}

.h4, h4 {
    font-size: 1.2rem;
}

.h5, h5 {
    font-size: 1.1rem;
}

.h6, h6 {
    font-size: 1.0rem;
}


/*********************************************************
    DARK MODE
 *********************************************************/
.dark-mode, .dark-mode *:not(aside):not(aside *):not(.btn-info):not(.btn-info *):not(.bg-info):not(.bg-info *):not(select):not(select *):not(.btn-danger):not(.btn-danger *):not(.tag-delete):not(.tag-delete *) {
    background-color: #343434;
    color: white !important;
}

.dark-mode .left-sidebar,
.dark-mode .offcanvas,
.dark-mode .offcanvas-body {
    background-color: #262626 !important;
}

.dark-mode .result-mini-card-view .card,
.dark-mode .result-shadow-card-view .card,
.dark-mode .result-boxes-view .card {
    border-width: 1px !important;
    border-color: #444 !important;
}

/* Boxes view: 25% thinner border than the default border-2 utility (2px -> 1.5px) */
.result-boxes-view .card {
    border-width: 1.5px !important;
}

.dark-mode .btn-close {
    background-color: white !important;
}

/* Phone-reported only: the left sidebar's close X (.nav-toggler.btn-close)
   showed a grey box around it in dark mode. Bootstrap's close button is a
   dark X icon drawn on a transparent background-image, with our white
   background-color sitting behind it and Bootstrap's own default 50%
   opacity applied to the whole thing - against a dark background that
   reads as a dingy grey square rather than a clean white X. Scoped to
   this specific mobile sidebar toggle only, inside the phone breakpoint -
   does not touch .dark-mode .btn-close above, which desktop (modals,
   etc.) still uses unchanged. */
@media (max-width: 767px) {
    .dark-mode .nav-toggler.btn-close {
        background-color: transparent !important;
        filter: invert(1) grayscale(100%) brightness(200%);
        opacity: 1 !important;
    }
}

.dark-mode .sidebar-nav ul li a.current,
.dark-mode .sidebar-nav ul li a.current i {
    background-color: #0d0d0d;
}

/* Keep modal containers transparent and backdrop semi-transparent so app content shows behind modals */
.dark-mode .modal,
.dark-mode .modal-dialog {
    background-color: transparent !important;
}

.dark-mode .modal-backdrop {
    background-color: #000;
    opacity: 0.5;
}

.dark-mode .card-body {
    border: 0.1px solid transparent;
}
.dark-mode .card {
    border: 0.1px solid grey;
}

/* Note cards on the bucket page, dark mode: a solid pastel-yellow fill
   reads as a jarring block against a dark page, same issue links' own
   hilite color had - swap to a thin yellow outline instead (still
   clearly marks it as a note), with light text since the background is
   no longer light. */
.dark-mode .note-card-body.border {
    background-color: transparent !important;
    border: 1.5px solid #f5d90a !important;
    color: #fff !important;
}

/* Note cards - classic sticky-note yellow in light mode (dark mode
   override is above, matching the more specific .note-card-body.border
   selector the real markup actually uses). */
.note-card-body {
    background-color: var(--note-color, #fffde8) !important;
    color: #333 !important;
}

/* "Color Off" on a note (see the Color modal) drops the sticky-note
   yellow entirely, back to a plain white card - the note equivalent of
   a link's bg_color 'N'. */
.note-card-body.color-off {
    background-color: #fff !important;
    color: #333 !important;
}

/* The swatch's actual color is per-user (each user's Site Colors
   "Color Each Link" value), so it's set as a CSS custom property
   inline rather than a plain inline background-color - that lets this
   rule (and the higher-specificity dark-mode override below it) keep
   re-applying the real color even where a broader rule would
   otherwise force a fixed background over it. */
#item-color-default-swatch {
    background-color: var(--item-color-default-swatch);
}

/* Overrides the generic ".dark-mode .btn:hover *" rule (turns
   everything inside a hovered button near-black) - the swatch keeps
   showing its actual color on hover instead. */
.dark-mode .btn:hover #item-color-default-swatch {
    background-color: var(--item-color-default-swatch) !important;
}

/* Lighter than Bootstrap's default btn-outline-secondary.active grey
   (#6c757d) - scoped to the Color modal's Off/Default/Custom picker
   only, not a sitewide button restyle. */
#item-color-mode-group .btn-outline-secondary {
    border-color: #6c757d;
}

#item-color-mode-group .btn-outline-secondary.active {
    background-color: #d8dadc !important;
    color: #212529 !important;
}

#item-color-mode-group .btn-outline-secondary:hover,
#item-color-mode-group .btn-outline-secondary:focus,
#item-color-mode-group .btn-outline-secondary:active,
#item-color-mode-group .btn-outline-secondary.active:hover,
#item-color-mode-group .btn-outline-secondary.active:focus {
    background-color: #e0e2e4 !important;
    color: #212529 !important;
}

.dark-mode .note-card-body.color-off {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

/* A note with its own color set (see the "Color" option on the note's
   ellipsis menu) overrides the default sticky-note yellow above via the
   --note-color custom property set inline on this same element - dark
   mode still swaps to a thin outline instead of a solid fill, same
   reasoning as the default-yellow dark-mode rule above. */
.dark-mode .note-card-body.border[style*="--note-color"] {
    background-color: transparent !important;
    border: 1.5px solid var(--note-color) !important;
    color: #fff !important;
}

/* Note text was rendering at h4 heading size (~1.5rem) via its markup's
   .h4 class - much larger than a link's description text. Match that
   same 13.2px used for link descriptions (see .results-show-description
   .card-text) instead. */
.note-card-body .h4 {
    font-size: 13.2px;
}

.note-card-body h1 {
    margin-top: -0.5em;
}

/* Note ellipsis menu - hidden until the card is hovered, same pattern
   as the per-link ellipsis/checkbox controls elsewhere. */
.note-ellipsis {
    visibility: hidden;
}

.card:hover .note-ellipsis {
    visibility: visible;
}

.dark-mode .modal-content {
    background-color: #111 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bootstrap's active nav-tab gets a bottom border color matching the
   page background (white), so the tab visually "merges" into the
   content below it - in dark mode that background is #111, not white,
   so the leftover white blend-border shows up as a stray bright line
   instead of disappearing. Match it to the actual dark background, and
   give the tab bar's own underline (under the inactive tabs) a visible
   dark-mode-appropriate color instead of the light-mode gray. */
.dark-mode .nav-tabs {
    border-bottom-color: #444 !important;
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: #111 !important;
    border-color: #444 #444 #111 !important;
    color: #fff !important;
}

/* Each tab link's own border overlaps the tab bar's underline directly
   (Bootstrap positions them 1px on top of each other on purpose) - an
   inactive tab's border is transparent by default, which masks the
   line wherever that tab sits instead of just leaving it visible. */
.dark-mode .nav-tabs .nav-link:not(.active) {
    border-bottom-color: #444 !important;
}

.dark-mode .modal-header,
.dark-mode .modal-body,
.dark-mode .modal-footer {
    background-color: #111 !important;
    border: none !important;
}

.dark-mode .modal-content *:not(.btn-info):not(.btn-info *):not(.btn-danger):not(.btn-danger *):not(.btn-close):not(.dropdown-item):not(.dropdown-item *):not(#site-colors-logo-preview):not(.site-colors-save-btn):not(.tag-delete):not(.tag-delete *):not(#item-color-default-swatch):not(#item-color-mode-group .active) {
    background-color: #111 !important;
}

.dark-mode .modal-content .dropdown-item,
.dark-mode .modal-content .dropdown-item * {
    background-color: #111 !important;
    color: white !important;
}

.dark-mode .modal-content .dropdown-item:hover,
.dark-mode .modal-content .dropdown-item:hover *,
.dark-mode .modal-content li.active > .dropdown-item,
.dark-mode .modal-content li.active > .dropdown-item * {
    background-color: #2a2a2a !important;
    color: white !important;
}

.dark-mode .modal-content .btn-close {
    filter: invert(1) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Toggle switch circle - blue dot */
.dark-mode .modal-content .form-check-input[type="checkbox"],
.modal-content .form-check-input[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230dcaf0'/%3e%3c/svg%3e") !important;
}

/* Toggle switch pill outline - thin (1pt) dark grey, same in both states.
   Per explicit request: only the knob should move/change on toggle - the
   track itself (background + outline) should look identical whether on
   or off, not fill with color when switched on. */
.modal-content .form-check-input[type="checkbox"],
.modal-content .form-check-input[type="checkbox"]:checked {
    border-width: 1px !important;
    border-color: #555 !important;
    background-color: #fff !important;
}

/* The "too thick" outline turned out to be Bootstrap's default blue
   focus ring (box-shadow on :focus), not the border - remove it in both
   states, since the switch already shows its state clearly via color. */
.modal-content .form-check-input[type="checkbox"]:focus {
    box-shadow: none !important;
}

/* Site Colors' Reset/Match checkboxes and Add/Edit Link's "Also grab
   website description" are plain checkboxes (no .form-switch), not
   toggle switches - the rules above are meant for actual switches like
   Add Link's "Favorite?" and would otherwise make these look identical
   (a filled dot) whether checked or not. Restore normal Bootstrap
   checkbox appearance (empty box vs. filled checkmark) for these. */
#logo-color-reset-checkbox,
#logo-color-match-checkbox,
#button-color-reset-checkbox,
#frm_link_auto_fetch_description {
    background-image: none !important;
    border-width: 1px !important;
    border-color: #adb5bd !important;
    background-color: #fff !important;
}

#logo-color-reset-checkbox:checked,
#logo-color-match-checkbox:checked,
#button-color-reset-checkbox:checked,
#frm_link_auto_fetch_description:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-color: var(--fs-info-background) !important;
    border-color: var(--fs-info-background) !important;
}

/* Radio buttons - white ring unselected, teal when selected */
.dark-mode .modal-content .form-check-input[type="radio"] {
    background-color: transparent !important;
    border-color: white !important;
}

.dark-mode .modal-content .form-check-input[type="radio"]:checked {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

.dark-mode .modal-content ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .modal-content ::-webkit-scrollbar-track {
    background: #111;
}

.dark-mode .modal-content ::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

.dark-mode .modal-content {
    scrollbar-color: #555 #111;
    scrollbar-width: thin;
}

.dark-mode .bootstrap-select .dropdown-menu,
.dark-mode .bootstrap-select .dropdown-menu .inner,
.dark-mode .bootstrap-select div.inner,
.dark-mode .bootstrap-select .dropdown-menu li,
.dark-mode .bootstrap-select .dropdown-menu li a,
.dark-mode .bootstrap-select .dropdown-menu li a span,
.dark-mode .bootstrap-select .dropdown-menu .dropdown-header {
    scrollbar-color: #2a2a2a #111 !important;
    scrollbar-width: thin !important;
    background-color: #111 !important;
    color: white !important;
}

.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar,
.dark-mode .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar,
.dark-mode .bootstrap-select div.inner::-webkit-scrollbar,
.dark-mode .bootstrap-select .dropdown-menu *::-webkit-scrollbar {
    width: 8px !important;
}

.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-track,
.dark-mode .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track,
.dark-mode .bootstrap-select div.inner::-webkit-scrollbar-track,
.dark-mode .bootstrap-select .dropdown-menu *::-webkit-scrollbar-track {
    background: #111 !important;
}

.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb,
.dark-mode .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb,
.dark-mode .bootstrap-select div.inner::-webkit-scrollbar-thumb,
.dark-mode .bootstrap-select .dropdown-menu *::-webkit-scrollbar-thumb {
    background-color: #2a2a2a !important;
    border-radius: 4px !important;
}

.dark-mode .modal-content .bootstrap-select .dropdown-menu li a:hover,
.dark-mode .modal-content .bootstrap-select .dropdown-menu li a:hover span,
.dark-mode .modal-content .bootstrap-select .dropdown-menu li.active a,
.dark-mode .modal-content .bootstrap-select .dropdown-menu li:hover a,
.dark-mode .bootstrap-select .dropdown-menu li a:hover,
.dark-mode .bootstrap-select .dropdown-menu li a:hover span,
.dark-mode .bootstrap-select .dropdown-menu li:hover a {
    background-color: #2a2a2a !important;
    color: white !important;
}

.dark-mode .result-icons-view * {
    border: none;
}

/* Auto-generated fallback icon (a link with no real favicon): a colored
   circle/square with the site's first letter in it. The outer div sets
   its own inline background-color (one of five accent colors), which
   correctly wins over dark mode's sitewide background override above -
   but the inner span holding just the letter has no background of its
   own to win with, so that sitewide rule paints a small dark box behind
   the letter instead of leaving it transparent against the real color. */
.dark-mode .link-display div[style*="background-color"] * {
    background-color: transparent !important;
}

/* SweetAlert dark mode */
.dark-mode .swal2-container {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .swal2-popup {
    background-color: #111 !important;
    border: none !important;
    box-shadow: none !important;
}

.dark-mode .swal2-popup *:not(.swal2-confirm):not(.swal2-cancel) {
    background-color: #111 !important;
    color: white !important;
}

.dark-mode .swal2-actions {
    background-color: transparent !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.selected a span,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.active a span {
    background-color: white !important;
    color: #333 !important;
}

.dark-mode #fullsort_search_block *:not(.link-select) {
    background-color: #0d0d0d !important;
}

.dark-mode ::placeholder {
    color: white !important;
    opacity: 1 !important;
}

.dark-mode #toggleLock {
    color: white !important;
}

.dark-mode .btn:hover, .dark-mode .btn:hover * {
    background-color: #0d0d0d !important;
}

/* Inline-edit (x-editable) checkmark/X buttons - strip the default
   Bootstrap button chrome (border/background) so the checkmark floats
   the same way the plain-link X next to it does, instead of sitting
   in its own grey box. */
.editable-submit {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dark-mode .editable-submit, .dark-mode .editable-submit * {
    background-color: transparent !important;
}

.dark-mode .dropdown-item:hover, .dark-mode .dropdown-item:hover * {
    background-color: #3a3a3a !important;
}

.dark-mode .dropdown-item:hover {
    background-color: #3a3a3a !important;
}

.dark-mode .change-all-color, .dark-mode .change-color-hilite {
    background-color: #0d0d0d !important;
}

.dark-mode .feedback_trigger_text,
.dark-mode .feedback_content * {
    color: black !important;
}

.dark-mode .link-select {
    background-color: #0d0d0d !important;
}

.dark-mode .link-select:hover, .dark-mode .link-select:hover * {
    background-color: #262626 !important;
}

.dark-mode .current,
.dark-mode .current *,
.dark-mode .sidebar-nav,
.dark-mode .sidebar-nav * {
    color: white !important;
    background-color: transparent !important;
}

.dark-mode .sidebar-nav ul li:hover {
    background-color: #0d0d0d !important;
}



/*********************************************************
    LEFT NAVIGATION
 *********************************************************/
.left-sidebar {
    background: var(--fs-theme-navigation-background);
    position: fixed;
    width: var(--fs-left-navigation-width);
    height: 100%;
    top: 0px;
    z-index: 50;
}

.left-sidebar.show-sidebar {
    display: block;
}


@media (max-width:991px) {
    .left-sidebar {
        display: none;
    }
    .left-sidebar.show-sidebar {
        display: block;
    }
}
@media (min-width:992px) {
    .left-sidebar {
        display: block;
    }
}

.offcanvas {
    width: var(--fs-left-navigation-width)!important;
}

.offcanvas-body::-webkit-scrollbar {
    display: none;
}

.sidebar-nav ul li {
    list-style: none
}

.sidebar-nav ul li a {
    color: var(--fs-theme-text-color);
    padding: 7px 15px 7px 15px;
    display: block;
}

.sidebar-nav ul li a.current,
.sidebar-nav ul li a:hover,
.sidebar-nav ul li a.current i,
.sidebar-nav ul li a:hover i {
    background-color: #e7e5e4;
}

.sidebar-nav>ul>li>a i,
.sidebar-nav>ul>li>a .emoji-icon {
    width: 25px;
    display: inline-block;
    vertical-align: middle;
}

/* The emoji icon's own <img> doesn't have a fixed width like the fa-*
   icon font glyphs do, so it wasn't centering inside the 25px slot
   above the way the shape/font icons do - text-align pulls it (and
   its fallback text-node, if the image 404s) to the middle instead of
   sitting flush left. A small extra nudge left/up on top of that to
   better match the other icons' optical center. */
.sidebar-nav>ul>li>a .emoji-icon {
    text-align: center;
    transform: translate(-6px, -5px);
}

/* Color swatches keep their own fixed circular/square size (width:height
   must stay 1:1 or the shape distorts) - match the FA/emoji gutter with
   margin instead of stretching the box width. */
.sidebar-nav>ul>li>a .bucket-icon-color,
.sidebar-nav>ul>li>a .bucket-icon-color-square,
.sidebar-nav>ul>li>a .bucket-icon-color-triangle,
.sidebar-nav>ul>li>a .bucket-icon-color-diamond,
.sidebar-nav>ul>li>a .bucket-icon-color-star,
.sidebar-nav>ul>li>a .bucket-icon-color-arrow,
.sidebar-nav>ul>li>a .bucket-icon-color-arrow-skinny,
.sidebar-nav>ul>li>a .bucket-icon-color-rectangle,
.sidebar-nav>ul>li>a .bucket-icon-color-hexagon,
.sidebar-nav>ul>li>a .bucket-icon-color-pentagon,
.sidebar-nav>ul>li>a .bucket-icon-color-heart,
.sidebar-nav>ul>li>a .bucket-icon-color-plus,
.sidebar-nav>ul>li>a .bucket-icon-color-bucket {
    margin-right: 9px;
    vertical-align: middle;
}

.sidebar-nav ul li ul li a {
    padding: 10px 15px 10px 15px;
}

.sidebar-nav .has-arrow {
    position: relative
}

.sidebar-nav .has-arrow:after {
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    border-width: 1px 0 0 1px;
    border-style: solid;
    right: 20px;
    -webkit-transform: rotate(135deg) translate(0, -50%);
    -ms-transform: rotate(135deg) translate(0, -50%);
    -o-transform: rotate(135deg) translate(0, -50%);
    transform: rotate(135deg) translate(0, -50%);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    top: 15px;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.sidebar-nav .has-arrow[aria-expanded=true]:after,
.sidebar-nav li>.has-arrow.active:after {
    -webkit-transform: rotate(-135deg) translate(0, -50%);
    -ms-transform: rotate(-135deg) translate(0, -50%);
    -o-transform: rotate(-135deg) translate(0, -50%);
    top: 42%;
    width: 7px;
    transform: rotate(-135deg) translate(0, -50%)
}

#left-nav-create-bucket {
    cursor: pointer;
}



/*********************************************************
    TEMPLATE THEME
 *********************************************************/
.skin-default {}

.row {margin-left: 0rem; margin-right: 0rem;}

.hide {
    display: none
}

.editable {
    border-bottom: none !important;
}

.hide-caret:after { content: none!important; }
.hide-caret:before { content: none!important; }

.dropdown-menu .dropdown-item {
    padding: 7px 1.5rem;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* bootstrap-select (the Add Link bucket picker, etc.) also builds a
   .dropdown wrapper internally, so the sitewide hover-to-open rule
   above was catching it too - its own JS correctly starts closing the
   menu on selection, but the hover rule kept forcing it visibly open
   the whole time the mouse stayed over it. Making it conditional on
   :hover too (an earlier version of this fix) wasn't enough either -
   scrolling the list with the mouse wheel could momentarily drop the
   hover state, which made the menu disappear entirely mid-scroll since
   nothing else was keeping it visible at that instant. Unconditional
   instead: bootstrap-select's own dropdown is always governed purely by
   Bootstrap's .show class, never by hover, matching how it's supposed
   to work. Scoped to bootstrap-select only - every other dropdown in
   the app keeps the sitewide hover-to-open rule above untouched. */
.bootstrap-select.dropdown .dropdown-menu {
    display: none;
}

.bootstrap-select.dropdown .dropdown-menu.show {
    display: block;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--fs-info-background);
    color: white;
}

/* Every link on a bucket/favorites/inbox page renders once per view
   style (Table, Cards, Mini, Boxes, etc. - ~13 total) in the same
   markup, all at once - result_change_view() in results-view.blade.php
   then hides the ~12 inactive ones and reveals the active one via
   jQuery on page load. Nothing previously hid the inactive ones by
   default, so on a fresh page load (before that JS runs) every view's
   copy of every link was visible simultaneously - with only a handful
   of real links, that flooded the page with repeats of those same few
   items across all their variants, each rendered in its own
   (uncompacted) size, for as long as JS took to catch up. jQuery's
   .show() still correctly reveals the active one over this. */
.link-display.result-balance-view,
.link-display.result-balanced-view,
.link-display.result-boxes-view,
.link-display.result-card-view,
.link-display.result-headline-view,
.link-display.result-icons-view,
.link-display.result-list-view,
.link-display.result-list2-view,
.link-display.result-masonry-view,
.link-display.result-mini-card-view,
.link-display.result-shadow-card-view,
.link-display.result-table-view,
.link-display.result-vintage-view {
    display: none;
}

.card {
    border: none;
    background-color: #fff;
    background-clip: border-box;
}

.card.hilite {
    background-color: var(--hilite-color, #fafaaf);
    background-clip: border-box;
}

/* On mobile, two color-highlighted cards stacked back-to-back can blend
   into what looks like one card since they share the same background.
   Targets the .link-display WRAPPER (not just the inner .card) since
   that's what actually controls vertical stacking/spacing between
   items — margin on the inner card alone had no visible effect. */
@media (max-width: 767px) {
    .link-display:has(> .card.hilite) {
        margin-top: 0.5em;
    }
}

/* Icons view only: shrink the persistent "Color" highlight so it hugs
   the icon and title instead of filling the whole grid cell. Other
   views keep the full-width highlight. */
.result-icons-view .card.hilite {
    background-color: transparent !important;
}

.result-icons-view .card.hilite .card-body {
    background-color: var(--hilite-color, #fafaaf) !important;
    border-radius: 6px;
    padding: 4px 2% !important;
    width: fit-content;
    margin: 0 auto;
}

/* In dark mode a solid fill of the (usually pastel) hilite color reads
   as a thick, jarring block rather than an accent. Swap the fill for a
   thin colored outline instead - still clearly marks the link as
   colored, just lighter-touch against a dark card. */
body.dark-mode .result-icons-view .card.hilite .card-body {
    background-color: transparent !important;
    border: 1.5px solid var(--hilite-color, #fafaaf);
    padding: 3px calc(2% - 1.5px) !important;
}

/* Every other card view (Mini, Boxes, Shadow, Vanilla, Masonry, etc.) -
   Icons view already gets its own colored-outline treatment above, so
   it's excluded here. Recolors whatever thin border the view's card
   already has (full border, or just border-bottom/border-end) to match
   the highlight color instead of leaving it the default grey. */
body.dark-mode .link-display:not(.result-icons-view) .card.hilite {
    border-color: var(--hilite-color, #fafaaf) !important;
}

/* Belt-and-suspenders for Vanilla/Masonry specifically: their cards use
   Bootstrap's .border utility, which also sets border-color via
   !important, so name these views explicitly to guarantee this wins
   regardless of selector-specificity ordering between the two. */
body.dark-mode .result-list-view .card.hilite,
body.dark-mode .result-masonry-view .card.hilite {
    border-color: var(--hilite-color, #fafaaf) !important;
}

.card-title {
    color:#444444;
    /* Every card view puts this inside a flex row alongside the icon
       (and the ellipsis menu in a sibling flex item) - a flex child's
       default min-width is its content's own natural one-line width,
       not 0, so without this the title never wraps at all and just
       pushes the whole card past the edge of the screen instead
       (visible as horizontal page-scroll on narrow phones/tablets). */
    min-width: 0;
}

.modal-title {
    color:#444444;
}

.card-footer, .modal-footer {
    background-color: inherit;
    border-top: none;
}
.dark-mode .card-footer {
    border-top: 1px solid transparent !important;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box!important;
    -webkit-box-orient: vertical;
    /* truncate to 2 lines */
    -webkit-line-clamp: 2;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box!important;
    -webkit-box-orient: vertical;
    /* truncate to 1 line */
    -webkit-line-clamp: 1;
}

/* The whole-card stretched-link overlay (see the card's own title anchor)
   otherwise sits above everything else in the card, including the
   description text below it - so a real mouse hover over the description
   never actually reaches it, silently breaking the hover-to-expand-full-
   description behavior. Lift the description above that overlay so hover
   events land on it directly again. */
.results-show-description {
    position: relative;
    z-index: 3;
}

/* Same stretched-link overlay problem as the description above - tags
   need to be clickable (opens the tag modal) instead of falling
   through to the whole-card link underneath. .tagRow already has
   Bootstrap's position-relative class; it just needs a z-index above
   the overlay's to actually receive the click. */
.tagRow.results-show-tags {
    z-index: 3;
}

.tt-dataset {
    margin-bottom: 20px;
}

.master-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    background-color: #EAE7E6
}

.master-backdrop.fade {
    opacity: 0
}

.master-backdrop.show {
    opacity: 0.2
}

.card-background-shadow {
    background-color: #fbfbfb;
}


/*********************************************************
    HEADER
 *********************************************************/
.topbar {
    position: fixed;
    z-index: 50;
    width: 100%;
    background-color: #fff;
    max-height: 4.5rem;
}

@media (min-width:992px) {
    .topbar {padding-left: var(--fs-left-navigation-width); }
}

.input-group > .twitter-typeahead {
    flex: 1 1 auto;
    width: auto;
}

@media (max-width:991px) {
    #fullsort_search {padding-bottom: 0.5rem; padding-top: 0.5rem;}
    #fullsort_search_block {width: 100%;}
}
@media (min-width:992px) {
    #fullsort_search_block {width: 50%!important;}
}

#quick_search_string, #fullsort_search {
    height: 26.5px;
}


.twitter-typeahead .tt-menu .tt-suggestion {
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

.tt-suggestion:hover {
    background-color: var(--fs-info-background) !important;
}

/*********************************************************
    PAGE BODY
 *********************************************************/
.page-wrapper {
    padding-top: 4.5rem;
}

@media (min-width:992px) {
    .page-wrapper {
        margin-left: var(--fs-left-navigation-width)
    }
}

/* Mini and Boxes card views: split into N single-column lists side by
   side (see setupColumnSortable in results-view.blade.php) instead of
   one shared flex-wrap grid - jQuery UI Sortable handles a genuine
   single column correctly, unlike a wrapped multi-column row. Gap
   matches Bootstrap's usual 1.5rem row gutter so the grid looks the
   same as before. */
#split-columns {
    gap: 0 1.5rem;
}

.split-column {
    flex: 1 1 0;
    min-width: 0;
}

/* The item's own col-lg/col-md/col-sm classes set a fixed percentage
   width (e.g. col-lg-4 = width:33.3333%) meant for a 3-wide flex row -
   inside a single-item-wide column wrapper that leaves the card only a
   third as wide as its column, with a lot of blank space beside it.
   Override back to filling the column completely. */
.split-column .result-mini-card-view,
.split-column .result-boxes-view,
.split-column .result-list-view,
.split-column .result-balanced-view,
.split-column .result-balance-view {
    width: 100%;
    max-width: 100%;
    flex: none;
}

.link-sortable-placeholder {
    border: 2px dashed #aaa;
    height: 90px;
    width: 90px;
}

.bucket-sortable-placeholder {
    border: 2px dashed #aaa;
    height: 40px;
}

/* ============================================================
   LOCKED — hover/tap tint (day + dark mode). Confirmed final by
   user. DO NOT modify any rule in this block without asking the
   user first, even to "improve" or "simplify" it. See memory:
   feedback-hover-colors-locked.md
   ============================================================ */

/* card-overlay div disabled everywhere: hover/tap tint is applied directly
   to the card's own background-color instead of a layered semi-transparent
   div, so text/icons/favicon stay at full brightness (not dimmed). */
.card-overlay { display: none !important; }

/* Fix intermittent "second tap does nothing" on mobile: rapid taps on the
   same spot can be interpreted by the browser as a double-tap-to-zoom
   gesture, silently swallowing the second tap's click event before it
   ever reaches JS. touch-action:manipulation disables that disambiguation
   delay so consecutive taps register immediately and reliably. */
.link-display .card,
.link-display .list2-item,
.link-display .vintage-row,
.link-display .card a,
.link-display .list2-item a,
.link-display .vintage-row a {
    touch-action: manipulation;
}


/* Controls column sits above card content so ellipsis/checkbox stay visible.
   pointer-events:none on the column itself means blank padding within it
   doesn't block clicks meant for the card's stretched-link underneath —
   only the actual interactive children (re-enabled below) capture clicks.
   Matches both col-5 (Vanilla/Masonry's actions column before the Mini/
   Masonry title-widening change) and col-3 (Mini/Masonry after it) - the
   col-5-only version of this selector silently broke Mini/Masonry's
   ellipsis button when that column was narrowed. */
.link-display .card .col-5.position-relative,
.link-display .card .col-3.position-relative,
.link-display .list2-item .list2-actions { position: relative; z-index: 3; pointer-events: none; }
.link-display .card .col-5.position-relative > *,
.link-display .card .col-3.position-relative > *,
.link-display .list2-item .list2-actions > * { pointer-events: auto; }

/* When a card's menu is open (hover or touch-active), its controls must win
   the stacking fight against the NEXT card's controls, which share the same
   z-index and would otherwise paint over the open dropdown (same DOM tier,
   ties break by DOM order). Bump the active one way above everything else. */
.link-display .card:hover .col-5.position-relative,
.link-display .card:hover .col-3.position-relative,
.link-display .list2-item:hover .list2-actions,
.link-display .card.card-touch-active .col-5.position-relative,
.link-display .card.card-touch-active .col-3.position-relative,
.link-display .list2-item.card-touch-active .list2-actions { z-index: 1000; }

/* Hover/tap: light grey tint in day mode — DO NOT CHANGE, see memory */
.link-display .card:hover,
.link-display .list2-item:hover,
.link-display .vintage-row:hover,
.link-display .card.card-touch-active,
.link-display .list2-item.card-touch-active,
.link-display .vintage-row.card-touch-active {
    background-color: #f2f2f2 !important;
    border-color: rgba(0,0,0,0.5) !important;
}

/* Hover/tap: black tint in dark mode — covers every view type (card, list2, vintage) */
body.dark-mode .link-display .card:hover,
body.dark-mode .link-display .list2-item:hover,
body.dark-mode .link-display .vintage-row:hover,
body.dark-mode .link-display .card.card-touch-active,
body.dark-mode .link-display .list2-item.card-touch-active,
body.dark-mode .link-display .vintage-row.card-touch-active {
    background: #262626 !important;
    background-color: #262626 !important;
    border-color: #777 !important;
    box-shadow: inset 0 0 0 1px #777 !important;
}

/* ============================================================
   LOCKED — checkbox vertical position, confirmed exact by user
   ("perfect!!!!"). DO NOT change vertical-align/top without
   asking the user first, even for unrelated requests that touch
   nearby styles. See memory: feedback-hover-colors-locked.md
   ============================================================ */
.linkCheckbox {
    vertical-align: middle;
    position: relative;
    top: -3px;
}

/* Visibility for a CHECKED box must never depend only on JS mouseenter/
   mouseleave timing (app.blade.php) - that leaves a real window where a
   fast click can register as checked before the enter handler has set
   opacity, or a resize/re-render can leave it stuck invisible despite
   being checked. This guarantees a checked box is always visible
   regardless of hover state or event timing, while unchecked boxes still
   rely on hover/JS to stay hidden until interacted with. */
.linkCheckbox:checked {
    opacity: 1 !important;
}
/* ============================================================
   END LOCKED checkbox position
   ============================================================ */

/* Bulk-delete "Are you sure?" confirmation (delSelected in app.blade.php) -
   cherry red confirm button, white text, 10% darker on hover. */
.delete-confirm-swal .swal2-confirm {
    color: #fff !important;
}

.delete-confirm-swal .swal2-confirm:hover {
    background-color: #b01b34 !important;
}

/* Curated buckets admin "Are you sure?" confirmations - cherry red Cancel
   button, white text, 10% darker on hover. */
.curation-confirm-swal .swal2-cancel {
    color: #fff !important;
}

.curation-confirm-swal .swal2-cancel:hover {
    background-color: #b01b34 !important;
}

/* Every SweetAlert "Cancel" button sitewide (the public/private bucket
   lock toggle's confirmation, and any other "Are you sure?" dialog that
   didn't get its own scoped rule above) - cherry red, white text, 10%
   darker on hover. Unscoped on purpose so this covers every current and
   future swal cancel button without hunting each one down individually;
   the more specific .curation-confirm-swal rule above still applies the
   same colors, just redundantly now.
   EXCEPT .delete-confirm-swal: that dialog's Delete/Confirm button is
   already the cherry red destructive action (see above), so its Cancel
   stays the normal safe/info color - both buttons being cherry red on
   the same dialog was confusing about which one actually deletes. */
.swal2-cancel {
    background-color: #C41E3A !important;
    color: #fff !important;
}

.swal2-cancel:hover {
    background-color: #b01b34 !important;
}

.delete-confirm-swal .swal2-cancel {
    background-color: var(--fs-info-background) !important;
}

.delete-confirm-swal .swal2-cancel:hover {
    background-color: var(--fs-info-hover) !important;
}

/* Duplicate Detector's per-link delete buttons - cherry red, white
   text, 10% darker on hover. Scoped by its own class rather than the
   sitewide .btn-danger. */
.duplicate-delete-btn {
    background-color: #C41E3A !important;
    border-color: #C41E3A !important;
    color: #fff !important;
}

.duplicate-delete-btn:hover {
    background-color: #b01b34 !important;
    border-color: #b01b34 !important;
}

/* Tag modal delete buttons - same cherry red family but 15% lighter
   than the Duplicate Detector's, with hover kept the same 10%-darker-
   than-base relationship the original color had. */
.tag-delete {
    background-color: #9A3042 !important;
    border-color: #9A3042 !important;
    color: #fff !important;
}

.tag-delete:hover {
    background-color: #8B2B3B !important;
    border-color: #8B2B3B !important;
}

/* Tag modal: each tag in its own small bordered cell (25% of the
   original full-width input) with the delete button sitting just
   outside the cell instead of sharing its border. */
.tag-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.55rem;
}

.tag-row-cell {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 0.275rem 0.6rem;
    width: 207px;
}

.tag-row input.tag-row-input {
    border: none;
    background: transparent;
    padding: 0.25rem 0;
    width: 100%;
    min-width: 0;
}

.tag-row input.tag-row-input:focus {
    outline: none;
    box-shadow: none;
}

.tag-row .tag-delete {
    width: 31px;
    height: 31px;
    padding: 0;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Change Password modal: same bordered-cell look as the tag modal
   inputs, full width instead of a fixed 180px. */
.password-modal-cell {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    width: 100%;
}

.password-modal-input {
    border: none;
    background: transparent;
    padding: 0.25rem 0;
    width: 100%;
    min-width: 0;
}

.password-modal-input:focus {
    outline: none;
    box-shadow: none;
}

/* Bucket Description and Add Note modals: a real bordered box instead
   of Bootstrap's .form-material underline-only look, matching the
   bordered-cell style used elsewhere (tags, change password). */
.bordered-cell-textarea {
    border: 1px solid #eef0f2 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0.5rem 0.75rem !important;
}

.profile-pic-update-btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
}

.bordered-cell-textarea:focus {
    border-color: var(--fs-info-background) !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Edit Link modal's Delete button (#link-delete, add-link.blade.php) -
   same cherry red / white / 10%-darker-hover treatment, scoped to this
   specific button by id rather than .btn-danger so the other ~26
   .btn-danger buttons sitewide are untouched. */
#link-delete {
    background-color: #C41E3A !important;
    border-color: #C41E3A !important;
    color: #fff !important;
}

#link-delete:hover {
    background-color: #b01b34 !important;
    border-color: #b01b34 !important;
}

/* Bootstrap's checkbox has its own white box background by default —
   make it transparent so it blends into the black card instead of
   standing out as a separate light patch. */
body.dark-mode .link-display .card:hover .linkCheckbox,
body.dark-mode .link-display .list2-item:hover .linkCheckbox,
body.dark-mode .link-display .vintage-row:hover .linkCheckbox,
body.dark-mode .link-display .card.card-touch-active .linkCheckbox,
body.dark-mode .link-display .list2-item.card-touch-active .linkCheckbox,
body.dark-mode .link-display .vintage-row.card-touch-active .linkCheckbox {
    background-color: #262626 !important;
    border-color: #777 !important;
}

/* Ellipsis button: ensure no stray background of its own */
body.dark-mode .link-display .card:hover .dropdown-toggle,
body.dark-mode .link-display .list2-item:hover .dropdown-toggle,
body.dark-mode .link-display .vintage-row:hover .dropdown-toggle,
body.dark-mode .link-display .card.card-touch-active .dropdown-toggle,
body.dark-mode .link-display .list2-item.card-touch-active .dropdown-toggle,
body.dark-mode .link-display .vintage-row.card-touch-active .dropdown-toggle {
    background-color: transparent !important;
}

/* Force EVERY descendant within a hovered/touch-active card transparent.
   Root cause of the "patchy" look: a blanket dark-mode rule
   (".dark-mode *:not(...)") gives nearly every element its own #343434
   background, including the Bootstrap .row wrapping the title/controls.
   A wildcard here catches all of them, not just the few container
   classes we happened to name before. More specific overrides below
   (checkbox, dropdown-toggle) still win due to higher specificity. */
body.dark-mode .link-display .card:hover *,
body.dark-mode .link-display .card.card-touch-active *,
body.dark-mode .link-display .list2-item:hover *,
body.dark-mode .link-display .list2-item.card-touch-active *,
body.dark-mode .link-display .vintage-row:hover *,
body.dark-mode .link-display .vintage-row.card-touch-active * {
    background-color: transparent !important;
}
/* ============================================================
   END LOCKED hover/tap tint block
   ============================================================ */

/* Icons view only: shrink hover/tap highlight so it hugs the icon
   and title (plus a small margin) instead of filling the whole
   grid cell. Cancels the full-card tint above and re-applies the
   same colors to a fit-content box around the card body. Other
   views are untouched. */
.result-icons-view .card:hover,
.result-icons-view .card.card-touch-active {
    background-color: transparent !important;
    border-color: transparent !important;
}

.result-icons-view .card:hover .card-body,
.result-icons-view .card.card-touch-active .card-body {
    background-color: #f2f2f2 !important;
    border-radius: 6px;
    padding: 4px 2% !important;
    width: fit-content;
    margin: 0 auto;
}

body.dark-mode .result-icons-view .card:hover,
body.dark-mode .result-icons-view .card.card-touch-active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .result-icons-view .card:hover .card-body,
body.dark-mode .result-icons-view .card.card-touch-active .card-body {
    background: #262626 !important;
    background-color: #262626 !important;
    border-radius: 6px;
    padding: 4px 2% !important;
    width: fit-content;
    margin: 0 auto;
}

/* The "..." controls box sits invisibly (opacity:0) at the very top of
   every icon-view card, positioned absolute so it's removed from flow -
   but the blanket dark-mode rule still gives it a solid #343434
   background, which silently covers the top of the icon underneath in
   dark mode (only "uncovered" on hover, when a different rule makes
   every descendant transparent). transparent background alone wasn't
   enough to stop it visually intruding on the icon - go further and
   fully hide it from rendering except while actually hovered/touched,
   so nothing about it (background, border, any stray pixel) can ever
   sit on top of the icon underneath. */
body.dark-mode .result-icons-view .card .position-absolute.text-end,
body.dark-mode .result-icons-view .card .position-absolute.text-center {
    visibility: hidden;
    background-color: transparent !important;
}

body.dark-mode .result-icons-view .card:hover .position-absolute.text-end,
body.dark-mode .result-icons-view .card:hover .position-absolute.text-center,
body.dark-mode .result-icons-view .card.card-touch-active .position-absolute.text-end,
body.dark-mode .result-icons-view .card.card-touch-active .position-absolute.text-center {
    visibility: visible;
}

/* Icons view checkbox/ellipsis overlay: on phone and tablet it often lands
   in an inconsistent spot on top of the icon - it's position:absolute with
   no offset, so it falls back to wherever it would have sat in normal flow,
   which isn't reliable. Anchor it explicitly just outside the icon's
   top-right corner instead. left uses 50% + half the icon's width (40px/2)
   so it stays correct regardless of the card's actual pixel width (icon is
   centered in the card via mx-auto). Desktop/hover behavior is untouched. */
@media (max-width: 991px) {
    .result-icons-view .card-body .col-12.position-absolute.text-center {
        top: 2px !important;
        left: calc(50% + 14px) !important;
        right: auto !important;
        width: auto !important;
        text-align: left !important;
    }
}

/* ============================================================
   LOCKED — dropdown menu appearance inside hovered/touch-active
   cards (dark mode). Confirmed final by user. DO NOT modify
   without asking the user first. See memory:
   feedback-hover-colors-locked.md
   ============================================================ */

/* Exception to the locked wildcard above: the open dropdown menu itself
   must stay opaque even though it's a descendant of a hovered/touch-active
   card — otherwise card text bleeds through it. Higher specificity (6
   identifiers) than the wildcard (5) so this wins. */
body.dark-mode .link-display .card:hover .dropdown-menu,
body.dark-mode .link-display .card.card-touch-active .dropdown-menu,
body.dark-mode .link-display .list2-item:hover .dropdown-menu,
body.dark-mode .link-display .list2-item.card-touch-active .dropdown-menu,
body.dark-mode .link-display .vintage-row:hover .dropdown-menu,
body.dark-mode .link-display .vintage-row.card-touch-active .dropdown-menu,
body.dark-mode .table-row-item:hover .dropdown-menu {
    background-color: #111 !important;
}

/* Same exception for individual item hover — the wildcard was also killing
   this highlight for dropdown menus opened from inside a hovered card. */
body.dark-mode .link-display .card:hover .dropdown-item:hover,
body.dark-mode .link-display .card.card-touch-active .dropdown-item:hover,
body.dark-mode .link-display .list2-item:hover .dropdown-item:hover,
body.dark-mode .link-display .list2-item.card-touch-active .dropdown-item:hover,
body.dark-mode .link-display .vintage-row:hover .dropdown-item:hover,
body.dark-mode .link-display .vintage-row.card-touch-active .dropdown-item:hover,
body.dark-mode .link-display .card:hover .dropdown-item:hover *,
body.dark-mode .link-display .card.card-touch-active .dropdown-item:hover *,
body.dark-mode .link-display .list2-item:hover .dropdown-item:hover *,
body.dark-mode .link-display .list2-item.card-touch-active .dropdown-item:hover *,
body.dark-mode .link-display .vintage-row:hover .dropdown-item:hover *,
body.dark-mode .link-display .vintage-row.card-touch-active .dropdown-item:hover *,
body.dark-mode .table-row-item:hover .dropdown-item:hover,
body.dark-mode .table-row-item:hover .dropdown-item:hover * {
    background-color: #3a3a3a !important;
    color: #fff !important;
}
/* ============================================================
   END LOCKED dropdown-in-hovered-card block
   ============================================================ */

/* Dark mode: dropdown menus match modal background */
.dark-mode .dropdown-menu { background-color: #111 !important; border-color: #333 !important; }
.dark-mode .dropdown-menu * { color: #ddd !important; background-color: transparent !important; border-color: rgba(255,255,255,0.2) !important; }
.dark-mode .dropdown-menu .dropdown-item:hover,
.dark-mode .dropdown-menu .dropdown-item:hover * { background-color: #3a3a3a !important; color: #fff !important; }
.dark-mode .dropdown-menu .dropdown-divider {
    height: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
}

/* Plain view: hide inner card border. Vanilla (.result-list-view) used
   to be included here too, but that actually hid its grid lines
   (border-end/border-bottom) entirely, contradicting this comment's
   own "keep grid lines only" intent - removed so Vanilla's border
   shows again. */
.result-headline-view .card { border-color: transparent !important; }
.dark-mode .result-headline-view .card { border-color: transparent !important; }

/*********************************************************
    FOOTER
 *********************************************************/
.footer {
    bottom: 0;
    left: 0px;
    right: 0;
}



/*********************************************************
    THEME PRELOADER
 *********************************************************/
.preloader {
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 99999;
    background: #fff
}

.preloader .cssload-speeding-wheel {
    position: absolute;
    top: calc(50% - 3.5px);
    left: calc(50% - 3.5px)
}

.loader,
.loader__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.loader {
    overflow: visible;
    padding-top: 2em;
    height: 0;
    width: 2em
}

.loader__figure {
    height: 0;
    width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0 solid #1976d2;
    border-radius: 50%;
    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
}

.loader__label {
    float: left;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0.5em 0 0 50%;
    font-size: 0.875em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #1976d2;
    white-space: nowrap;
    -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
}

@-webkit-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2
    }
    29% {
        background-color: #1976d2
    }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }
    to {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-moz-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2
    }
    29% {
        background-color: #1976d2
    }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }
    to {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2
    }
    29% {
        background-color: #1976d2
    }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }
    to {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-label {
    0% {
        opacity: 0.25
    }
    30% {
        opacity: 1
    }
    to {
        opacity: 0.25
    }
}

@-moz-keyframes loader-label {
    0% {
        opacity: 0.25
    }
    30% {
        opacity: 1
    }
    to {
        opacity: 0.25
    }
}

@keyframes loader-label {
    0% {
        opacity: 0.25
    }
    30% {
        opacity: 1
    }
    to {
        opacity: 0.25
    }
}


/*********************************************************
    LOGIN
 *********************************************************/
.login-box {
    width: 400px;
    margin: 0 auto;
}

#recoverform {
    display: none; }



/*********************************************************
    BUTTONS
 *********************************************************/
@media (min-width: 992px) and (max-width: 1226px) {
    .btn-custom {
        display: block;
        font-size: 0.875rem;
    }
}

@media (min-width: 1226px) {
    .btn-custom {
        font-size: 0.875rem;
    }
}

.topView {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


.btn-block {
    display: block;
    width: 100%
}

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

.btn-primary:hover {
    color: var(--fs-primary-text);
    background-color: var(--fs-primary-hover);
    border-color: var(--fs-primary-hover)
}

.btn-primary.focus,
.btn-primary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem var(--fs-primary-focus);
    box-shadow: 0 0 0 0.2rem var(--fs-primary-focus);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--fs-primary-text);
    background-color: var(--fs-primary-disabled);
    border-color: var(--fs-primary-disabled)
}

.btn-secondary {
    color: var(--fs-secondary-text);
    background-color: var(--fs-secondary-background);
    border-color: var(--fs-secondary-background);
}

.btn-secondary:hover {
    color: var(--fs-secondary-text);
    background-color: var(--fs-secondary-hover);
    border-color: var(--fs-secondary-hover);
}

.btn-secondary.focus,
.btn-secondary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem var(--fs-secondary-focus);
    box-shadow: 0 0 0 0.2rem var(--fs-secondary-focus);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--fs-secondary-text);
    background-color: var(--fs-secondary-disabled);
    border-color: var(--fs-secondary-disabled);
}

.btn-info {
    color: var(--fs-info-text);
    background-color: var(--fs-info-background);
    border-color: var(--fs-info-background)
}

.btn-info:hover {
    color: var(--fs-info-text);
    background-color: var(--fs-info-hover);
    border-color: var(--fs-info-hover);
}

.btn-info.focus,
.btn-info:focus {
    -webkit-box-shadow: 0 0 0 0.2rem var(--fs-info-focus);
    box-shadow: 0 0 0 0.2rem var(--fs-info-focus);
}

/* Bootstrap's own default active/open-dropdown color (a bright cyan, not
   our custom var) otherwise leaks through only on this state - e.g. the
   curated gallery "Bucket Options" button reverting to stock Bootstrap
   cyan the moment its dropdown opens, while every other state on that
   same button correctly follows the site's (possibly user-customized)
   info color. */
.btn-info:active,
.btn-info.active,
.btn-info.show,
.show > .btn-info.dropdown-toggle {
    color: var(--fs-info-text) !important;
    background-color: var(--fs-info-hover) !important;
    border-color: var(--fs-info-hover) !important;
}

.btn-info.disabled,
.btn-info:disabled {
    color: var(--fs-info-text);
    background-color: var(--fs-info-disabled);
    border-color: var(--fs-info-disabled)
}

.btn-danger {
    color: var(--fs-danger-text);
    background-color: var(--fs-danger-background);
    border-color: var(--fs-danger-background);
}

.btn-danger:hover {
    color: var(--fs-danger-text);
    background-color: var(--fs-danger-hover);
    border-color: var(--fs-danger-hover);
}

.btn-danger.focus,
.btn-danger:focus {
    -webkit-box-shadow: 0 0 0 0.2rem var(--fs-danger-focus);
    box-shadow: 0 0 0 0.2rem var(--fs-danger-focus);
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: var(--fs-danger-text);
    background-color: var(--fs-danger-disabled);
    border-color: var(--fs-danger-disabled);
}

.btn-facebook, .btn-facebook:hover {
    color: #fff;
    background-color: #3b5998
}


.btn-twitter, .btn-twitter:hover {
    color: #fff;
    background-color: #55acee
}

.btn-linkedin, .btn-linkedin:hover {
    color: #fff;
    background-color: #007bb6
}

.btn-googleplus, .btn-googleplus:hover {
    color: #fff;
    background-color: #dd4b39
}


/*********************************************************
    VANILLA VIEW (result-list-view)
 *********************************************************/
.result-list-view .linkName {
    font-size: 14.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phones only - title was truncating sooner than it needed to since
   the icon/ellipsis columns eat proportionally more of a narrow
   screen's width than they do on desktop/tablet. Give the title more
   of that room back, same technique used for Boxes. */
@media (max-width: 767px) {
    .result-list-view .col-7 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .result-list-view .col-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }
}

.result-list-view .results-show-description .card-text {
    font-size: 13.2px;
}

/* Cards varied in height depending on whether a link had a description
   (and how many lines it clamped to) or a long title that wrapped -
   force a consistent minimum height and single-line title so every
   card in the list reads the same size regardless of content length. */
.result-list-view .card {
    min-height: 110px;
}

/* Cards were flush against each other (m-0, only a border line as a
   divider) and Bootstrap's py-3 padding made each row taller than
   needed - Bootstrap utility classes carry !important, so this needs
   it too to actually win. Shrinks padding and adds a small 3px gap
   between consecutive cards. */
.result-list-view .card {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-bottom: 3px !important;
}

/* For links near the end of any view, the "..." menu (Favorite,
   Share, Color, Edit, Top, Bottom, Delete, Tags) can run past the
   bottom of the screen with no way to reach the last items - it uses
   fixed/static positioning (not Bootstrap's normal auto-flip-upward
   behavior) for a good reason (see git history: auto-flip used to
   randomly push the menu off the right edge on mobile instead).
   Simplest fix: reserve enough blank space below the last link for
   the tallest possible menu to always fit on open. */
#sortable_links,
#curated_links {
    padding-bottom: 120px;
}

/*********************************************************
    MASONRY VIEW (result-masonry-view)
 *********************************************************/
/* #sortable_links/#curated_links is one shared .row container reused by
   every view (individual .link-display items just toggle show/hide per
   active view) - CSS multi-column layout needs the container itself to
   not be a flex container, so this only applies when the JS view
   switcher has set data-view="masonry" on it, leaving every other view's
   shared-container layout untouched. */
#sortable_links[data-view="masonry"],
#curated_links[data-view="masonry"] {
    display: block !important;
    column-count: 1;
    column-gap: 1rem;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 576px) {
    #sortable_links[data-view="masonry"],
    #curated_links[data-view="masonry"] {
        column-count: 2;
    }
}

/* At desktop width, column count follows the same 3-vs-4 preference
   as Mini/Boxes view (ellipsis menu) instead of being hardcoded -
   result_change_view() sets --masonry-columns from the user's actual
   saved setting. Falls back to the original 3/4 defaults if that
   variable is never set for some reason. */
@media (min-width: 992px) {
    #sortable_links[data-view="masonry"],
    #curated_links[data-view="masonry"] {
        column-count: var(--masonry-columns, 3);
    }
}

@media (min-width: 1400px) {
    #sortable_links[data-view="masonry"],
    #curated_links[data-view="masonry"] {
        column-count: var(--masonry-columns, 4);
    }
}

.result-masonry-view {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 1rem;
}

/* At certain widths (tablet held landscape, where this view's col-md-6
   drops it into a narrower 2-column layout) the ellipsis/checkbox/drag-
   handle icons - each their own d-inline-block sibling inside a narrow
   col-3 - wrap onto separate lines instead of staying in a row. Desktop
   and phone already have enough room and never wrap here anyway, so this
   is a no-op for them. Same fix applied to Mini/Balance, which share the
   identical col-3 controls markup and hit the same issue on tablet
   landscape (col-lg-N / col-md-6). */
.result-masonry-view .col-3,
.result-mini-card-view .col-3,
.result-balanced-view .col-3,
.result-balance-view .col-3 {
    white-space: nowrap;
}

/* Bricks/Mini/Balance: with wrapping now prevented, the nowrap
   controls group is wide enough to spill past the card's right edge at
   the narrower tablet-landscape column width. padding-right doesn't help
   here since overflowing nowrap content spills past padding regardless -
   use a transform instead, which actually shifts the rendered box (and
   its overflow) rather than reserving unused space.
   Scoped to landscape orientation in the tablet width range only - this
   was previously unconditional and wrongly shifted the controls in
   portrait/vertical view too, where there's no overflow to begin with. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
    .result-mini-card-view .col-3,
    .result-balanced-view .col-3,
    .result-balance-view .col-3 {
        transform: translateX(-1.5rem);
    }

    /* Bricks/Masonry's card is narrower than Mini/Balance at this
       breakpoint, so the same -1.5rem shift left too big a gap before
       the right edge - a smaller shift here. Also pulled up so the
       controls sit flush against the top-right corner instead of
       floating mid-card. */
    .result-masonry-view .col-3 {
        transform: translate(-0.75rem, -1.3rem);
    }
}

/* Bricks/Masonry in portrait/vertical tablet view - no horizontal
   overflow issue here (unlike landscape), but pull the controls up
   and right so they hug the top-right corner the same way as
   landscape, for a consistent look between orientations. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
    .result-masonry-view .col-3 {
        transform: translate(1.1rem, -1.3rem);
    }
}

.result-masonry-view .linkName {
    font-size: 14px;
}

.result-masonry-view .results-show-description .card-text {
    font-size: 13px;
}

/* News Feed modal (Start Page widget) */
.news-feed-list {
    display: flex;
    flex-direction: column;
}

.news-feed-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 4px;
    border-bottom: 1px solid #eaecef;
    text-decoration: none;
    color: inherit;
    /* iOS Safari's default tap-highlight flash renders as a tight grey
       box around just the text content on this flex layout instead of
       the whole row - the site-wide reset on <body> isn't reaching
       content injected into the modal at runtime. Override directly. */
    -webkit-tap-highlight-color: transparent;
}

.news-feed-item-title,
.news-feed-item-source {
    -webkit-tap-highlight-color: transparent;
}

.news-feed-item:last-child {
    border-bottom: none;
}

.news-feed-item:hover {
    background-color: #f7f7f7;
    text-decoration: none;
}

.news-feed-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1d23;
    line-height: 1.4;
}

.news-feed-item-source {
    font-size: 11px;
    font-weight: 500;
    color: #8a8f9a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* #modal-news-feed prefix (an ID) guarantees these beat the blanket
   dark-mode modal rule, which forces #111 backgrounds on nearly
   everything inside any modal and isn't aware of this new content. */
#modal-news-feed.dark-mode .news-feed-item,
.dark-mode #modal-news-feed .news-feed-item {
    border-bottom-color: rgba(255,255,255,0.12);
}

.dark-mode #modal-news-feed .news-feed-item:hover {
    background-color: #2a2a2a !important;
}

/* Same root cause fixed before elsewhere: the blanket dark-mode modal
   rule gives the title/source spans their own #111 background,
   painting over the row's hover color in patches instead of one
   solid fill. Force them transparent while their row is hovered. */
.dark-mode #modal-news-feed .news-feed-item:hover * {
    background-color: transparent !important;
}

.dark-mode #modal-news-feed .news-feed-item-title {
    color: #e8eaf0 !important;
}

.dark-mode #modal-news-feed .news-feed-item-source {
    color: #8a8f9a !important;
}

/*********************************************************
    CARDS-VIEW
 *********************************************************/
.card-img-container {
    height: 110px;
    padding-top: 1rem;
}

.fs-card-img {
    max-height: 90px;
    max-width: 100%;
    width: auto;
}

/*********************************************************
    ICONS-VIEW
 *********************************************************/
.icons-img {
    width: 20px;
    height: 20px;
}

.icons-bg {
    background-color: transparent;
}

/* Many favicons carry their own white square background baked into the
   image. That's invisible against the white page in light mode, but in
   dark mode it reads as a broken/cut-off white box around the icon.
   Rounding the image's own corners makes it read as a deliberate icon
   chip instead, in both modes. */
.result-icons-view .results-show-cover {
    overflow: hidden;
}

.result-icons-view .results-show-cover img {
    display: block;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icons-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7em;
    font-size: 1rem;
    font-weight: 400;
}

@media (min-width:1400px) {
    .icons-title {
        max-width: 6em;
        font-size: .85rem;
        font-weight: 400;
    }
}

.result-icons-view {
    width: 16%;
}

@media (max-width: 768px) {
    .result-icons-view {
        width: 33%;
    }
}

/*********************************************************
    BACKGROUNDS
 *********************************************************/
.bg-primary {
    background-color: var(--fs-primary-background)!important;
}

.bg-secondary {
    background-color: var(--fs-secondary-background)!important;
}

.bg-info {
    background-color: var(--fs-info-background)!important;
}

.bg-warning {
    background-color: transparent!important;
}

.bg-danger {
    background-color: var(--fs-danger-background)!important;
}



/*********************************************************
    FORMS
 *********************************************************/
.form-group {
    margin-bottom: 2.5rem;
}

@media (max-width:991px) {
    .form-group {
        margin-bottom: 2.0rem
    }
}

.form-control {
    min-height: 38px;
}

.form-control-sm {
    min-height: 20px!important;
}

.form-material .form-group {
    overflow: hidden
}

.form-material .form-control {
    background-color: rgba(0, 0, 0, 0);
    background-position: center bottom, center calc(100% - 1px);
    background-repeat: no-repeat;
    background-size: 0 2px, 100% 1px;
    padding: 5;
    -webkit-transition: background 0s ease-out 0s;
    -o-transition: background 0s ease-out 0s;
    transition: background 0s ease-out 0s
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--fs-theme-text-color)), to(var(--fs-theme-text-color))), -webkit-gradient(linear, left top, left bottom, from(#e9ecef), to(#e9ecef));
    background-image: -webkit-linear-gradient(var(--fs-theme-text-color), var(--fs-theme-text-color)), -webkit-linear-gradient(#e9ecef, #e9ecef);
    background-image: -o-linear-gradient(var(--fs-theme-text-color), var(--fs-theme-text-color)), -o-linear-gradient(#e9ecef, #e9ecef);
    background-image: linear-gradient(var(--fs-theme-text-color), var(--fs-theme-text-color)), linear-gradient(#e9ecef, #e9ecef);
    border: 0 none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none
}

.form-material .form-control.focus,
.form-material .form-control:focus {
    background-size: 100% 2px, 100% 1px;
    outline: 0 none;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s
}

.form-check-input:checked {
    background-color: #148c9f;
    border-color: #148c9f;
}



/*********************************************************
    Nested Bucket Display
 *********************************************************/
.option-me-1 { margin-left: 1.25rem; }
.option-me-2 { margin-left: 2.5rem; }
.option-me-3 { margin-left: 3.75rem; }
.option-me-4 { margin-left: 5rem; }
.option-me-5 { margin-left: 6.25rem; }
.option-me-6 { margin-left: 7.5rem; }
.option-me-7 { margin-left: 8.75rem; }



/*********************************************************
    TABS
 *********************************************************/


/*********************************************************
    Vintage View
 *********************************************************/
.result-vintage-view {
    border: none !important;
}

#vintage-bucket-list {
    padding: 4px 8px;
    overflow-x: hidden;
}

.vintage-bucket-section {
    margin-bottom: 12px;
}

.vintage-bucket-name {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 0.5em;
    margin-top: 4px;
    padding-left: 20px;
}

/* Same irradiation-effect compensation as .vintage-link — white bold
   text on dark backgrounds reads heavier than the same weight on light. */
.dark-mode .vintage-bucket-name {
    font-weight: 600;
}
.vintage-row {
    padding: 1px 8px 1px 20px;
    line-height: 1.4;
    position: relative;
}

/* Bucket-list Retro view only: hover should hug the text, not span the
   full row width. Scoped here so it doesn't affect the other Retro view
   (.vintage-row with d-flex/space-between for title+controls layout),
   which needs the full row width. */
#vintage-bucket-list .vintage-row {
    display: block;
    width: fit-content;
    max-width: 100%;
}

.vintage-row:hover .vintage-menu-btn {
    opacity: 1 !important;
}

/* Retro bucket-list hover — matches the same hover colors used elsewhere
   (day: light grey, dark: #262626). This view isn't wrapped in
   .link-display, so it needs its own rule separate from the locked
   .link-display .vintage-row hover block. */
#vintage-bucket-list .vintage-row:hover {
    background-color: #f2f2f2;
}
body.dark-mode #vintage-bucket-list .vintage-row:hover {
    background-color: #262626;
}

.vintage-link {
    color: #0000EE;
    text-decoration: underline;
    font-size: 1.125rem;
    font-weight: 500;
    word-break: break-word;
}

.vintage-link:visited {
    color: #551A8B;
}

.vintage-link:hover {
    color: #0000EE;
}

/* White text on a dark background reads as bolder than the same weight
   does on light (irradiation effect) — lighten it to compensate. */
.dark-mode .vintage-link {
    font-weight: 400;
}

/* List2 view */
.list2-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 20px 13px 0px;
    border-bottom: 1px solid #eaecef;
    background: #fff;
    position: relative;
}
.list2-thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1; pointer-events: none; }
.list2-thumb a { pointer-events: auto; }
.list2-favicon { width: 24px; height: 24px; object-fit: contain; }
.list2-body { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; pointer-events: none; }
.list2-title a { pointer-events: auto; }
.list2-actions { flex-shrink: 0; display: flex; align-items: center; position: relative; z-index: 1; }
.list2-title { font-size: 14px; font-weight: 700; color: #1a1d23; line-height: 1.4; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list2-title a { color: inherit; text-decoration: none; font-weight: 700; }
.list2-title a:hover { text-decoration: underline; }
.list2-desc { font-size: 12px; color: #1a1d23; line-height: 1.5; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list2-meta { display: flex; align-items: center; gap: 6px; }

/* List's Bucket/Domain/Date + Tags line - same pipe-joined format and
   right-aligned/truncating Tags as Mini/Masonry (see the shared
   .mini-meta rules and JS separator logic). Replaces the old
   dot-marker bucket + always-visible domain/date styling now that all
   three are opt-in fields joined the same way everywhere. */
.result-list2-view .mini-meta {
    font-size: 11px;
    color: #8a8f9a;
}

.result-list2-view .mini-meta * {
    font-size: inherit !important;
}

.result-list2-view .tagRow {
    font-size: 11px;
}

.result-list2-view .tagRow * {
    font-size: inherit !important;
}

/* On phone, clamp the description to 3 lines with an ellipsis; tap
   it to expand the full text in place (card grows to fit). */
@media (max-width: 767px) {
    .list2-desc {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        pointer-events: auto;
        cursor: pointer;
    }
    .list2-desc.expanded {
        overflow: visible;
        display: block;
        -webkit-line-clamp: unset;
    }
}

.list2-item.hilite { background: var(--hilite-color, #fafaaf); }

.dark-mode .list2-item { background: #20242e; border-bottom: 1px solid rgba(255,255,255,0.12); }
.dark-mode .list2-item.hilite { background: var(--hilite-color, #fafaaf); }
.dark-mode .list2-title { color: #e8eaf0; }
.dark-mode .list2-desc { color: #9aa0b0; }
.dark-mode .list2-sep { color: #3a4050; }
.dark-mode .list2-domain { color: #5b9bd5; }
.dark-mode .list2-date { color: #5c6272; }

/* Table view (test) - dense spreadsheet-style rows */
.table-row-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    border-bottom: 1px solid #eaecef;
    background: #fff;
    position: relative;
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
}

/* Each row has an invisible full-row <a class="stretched-link"> on top of
   it (so clicking anywhere on the row opens the link) - browsers treat any
   <a href> as natively draggable, so a drag gesture starting on the row was
   being picked up as the browser's own "drag this link" action instead of
   being handed to jQuery UI's sortable. user-select:none alone doesn't stop
   this since it's a separate browser behavior from text selection - that's
   why the gap/selection-highlight kept coming back even after that fix. */
.link-display .stretched-link {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Every row is position:relative with no explicit z-index, so with
   auto stacking a LATER row in the list paints over an EARLIER row's
   open "..." menu (same stacking level - DOM order wins). Lift the
   whole row above its neighbors while its own menu is open, on both
   click (mobile) and hover (desktop). */
.table-row-item:has(.dropdown-menu.show) {
    z-index: 1000;
}
.table-row-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; z-index: 1; pointer-events: none; }
.table-row-favicon { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.table-row-title {
    flex: 1 1 260px;
    min-width: 0;
    font-weight: 500;
    color: #1a1d23;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.table-row-bucket {
    flex: 0 1 130px;
    min-width: 0;
    color: #8a8f9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-row-domain {
    flex: 0 1 160px;
    min-width: 0;
    color: #5b9bd5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-row-date { flex: 0 0 92px; color: #a0aec0; text-align: right; white-space: nowrap; }
.table-row-tags {
    flex: 0 1 160px;
    min-width: 0;
    color: #8a8f9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bucket/Domain/Date/Tags at 90% of the title's size (they inherit
   the same 12px base as .table-row-title, so 0.9em lands there
   directly). Tags' own <span> tags need the inherit !important - the
   site's global "* { font-size: ... }" rule (near the top of this
   file) sets font-size directly on every element, so without this
   they'd ignore their parent's smaller size the same way Mini's
   Bucket/Domain/Date spans originally did. */
.table-row-bucket,
.table-row-domain,
.table-row-date,
.table-row-tags {
    font-size: 0.9em;
}

.table-row-tags * {
    font-size: inherit !important;
}

.table-row-tags span {
    text-decoration: underline;
}
.table-row-tags span:not(:last-child)::after {
    content: ", ";
    text-decoration: none;
}
.table-row-actions { flex-shrink: 0; position: relative; z-index: 1; pointer-events: none; }
.table-row-actions > * { pointer-events: auto; }
.table-row-actions .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Hover: same light grey tint as everywhere else, reveal the select
   checkbox (not the "..." menu - stays hidden), and let the whole row
   navigate (not just the domain text). */
.table-row-item:hover {
    background-color: #f2f2f2 !important;
}
body.dark-mode .table-row-item:hover {
    background: #262626 !important;
    background-color: #262626 !important;
}
body.dark-mode .table-row-item:hover * {
    background-color: transparent !important;
}
.table-row-item:hover .linkCheckbox,
.table-row-item:hover .dropdown-toggle {
    opacity: 1 !important;
}

@media (max-width: 991px) {
    /* Phone and tablet: drop bucket/domain/date/tags entirely rather
       than squeezing them in - gives the title room to breathe instead
       of fighting over limited width. */
    .table-row-bucket, .table-row-domain, .table-row-date, .table-row-tags { display: none; }
    .table-row-title { flex: 1 1 auto; }
    /* Pull the "..." button/checkbox out of the flex flow (overlaying the
       row instead) so they don't reserve layout width for a control
       that's invisible until tapped anyway. */
    .table-row-actions {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
    }
    .table-row-actions .btn.dropdown-toggle { padding: 4px; min-width: 0; }
    .table-row-actions .linkCheckbox { width: 16px; height: 16px; margin: 0; }
}
.table-row-item.hilite { background: var(--hilite-color, #fafaaf); }

/* Reorder Buckets modal - Save button always cherry red regardless of
   the site's theme color, 10% darker in dark mode. */
.manage-buckets-save {
    background-color: #C41E3A !important;
    border-color: #C41E3A !important;
    color: #fff !important;
}

/* Duplicate Detector's delete button - cherry red, 10% darker on
   hover (same treatment as Reorder Buckets' Save button). */
.duplicate-delete-btn {
    background-color: #C41E3A !important;
    border-color: #C41E3A !important;
}

.duplicate-delete-btn.btn-danger:hover {
    background-color: #B01B34 !important;
    border-color: #B01B34 !important;
    color: #fff !important;
}

.duplicate-delete-btn.btn-danger:hover * {
    background-color: transparent !important;
    color: #fff !important;
}

/* Add/Edit Link modal's delete button - same solid cherry-red button
   treatment as Duplicate Detector's. Shares the ".link-delete" class
   with the small icon-only "Delete" dropdown items below, so it's
   handled here separately by ID, and excluded from that icon-color
   rule (a red icon on this button's own red background would vanish). */
#link-delete.btn-danger {
    background-color: #C41E3A !important;
    border-color: #C41E3A !important;
}

#link-delete.btn-danger:hover {
    background-color: #B01B34 !important;
    border-color: #B01B34 !important;
    color: #fff !important;
}

#link-delete.btn-danger:hover * {
    background-color: transparent !important;
    color: #fff !important;
}

/* Small icon-only trash-can "Delete" options - cherry red icon in dark
   mode, 10% darker on hover. Link cards' own ellipsis "Delete"
   (.link-delete, used in every card view and Start Grid) and Delete
   Bucket are deliberately excluded. */
.dark-mode .delete-public-link i.fa-trash,
.dark-mode .delete-note i.fa-trash {
    color: #C41E3A !important;
}

.dark-mode .dropdown-item.delete-public-link:hover i.fa-trash,
.dark-mode .dropdown-item.delete-note:hover i.fa-trash {
    color: #B01B34 !important;
}

/* Tag modal delete button in dark mode - match Duplicate Detector's
   full button treatment (bright cherry red, white icon) instead of the
   lighter always-on red button it otherwise uses. */
.dark-mode .tag-delete {
    background-color: #B01B34 !important;
    border-color: #B01B34 !important;
    color: #fff !important;
}

.dark-mode .tag-delete:hover {
    background-color: #9E182F !important;
    border-color: #9E182F !important;
    color: #fff !important;
}

.dark-mode .tag-delete:hover * {
    background-color: transparent !important;
    color: #fff !important;
}

.dark-mode .manage-buckets-save {
    background-color: #B01B34 !important;
    border-color: #B01B34 !important;
}

/* Override the generic ".dark-mode .btn:hover" rule (turns everything
   near-black on hover) - this button hovers by darkening its OWN
   cherry red another 10%, in both themes, instead. */
.manage-buckets-save.btn-info:hover {
    background-color: #B01B34 !important;
    border-color: #B01B34 !important;
}

.dark-mode .manage-buckets-save.btn-info:hover {
    background-color: #9E182F !important;
    border-color: #9E182F !important;
}

.dark-mode .table-row-item { background: #20242e; border-bottom: 1px solid rgba(255,255,255,0.12); }
.dark-mode .table-row-item.hilite { background: var(--hilite-color, #fafaaf); }
.dark-mode .table-row-title { color: #e8eaf0; }
.dark-mode .table-row-bucket { color: #8a8f9a !important; }
.dark-mode .table-row-domain { color: #5b9bd5 !important; }
.dark-mode .table-row-date { color: #5c6272 !important; }
.dark-mode .table-row-tags { color: #8a8f9a !important; }

/* Start Grid view */
.start-grid-container {
    display: flex;
    align-items: flex-start;
    touch-action: pan-y;
    gap: 20px;
    padding: 10px 15px;
}

/* Desktop only: nudge the grid right, away from the sidebar edge */
@media (min-width: 992px) {
    .start-grid-container { padding-left: 35px; }
}

.start-grid-col {
    flex: 1;
    min-width: 0;
    /* jQuery UI Sortable can't accept a drop into a column with zero
       height - once the last category is dragged out, the empty column
       collapses and becomes permanently undroppable without this. */
    min-height: 40px;
}

@media (max-width: 800px)  { .start-grid-container { flex-wrap: wrap; } .start-grid-col { flex: 1 1 45%; } }
@media (max-width: 500px)  {
    .start-grid-col { flex: 1 1 100%; }
    /* Links were shrink-wrapping to their own text width (align-items:
       flex-start), leaving a big empty gap on the right on phone - the
       single column should use the full width it's given. */
    .start-grid-links { align-items: stretch !important; }
}

.start-grid-bucket {
    margin-bottom: 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.start-grid-bucket-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 6px 4px; /* left padding matches .start-grid-link's 4px so the category icon lines up with link favicons below it */
    background: transparent;
    border-bottom: none;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111;
}

.start-grid-bucket-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.start-grid-bucket-icon-default {
    font-size: 14px;
    color: #666;
}

.start-grid-bucket-actions {
    flex-shrink: 0;
}

/* Drag handle for reordering whole Start Page categories - subtle
   until the header is hovered, same reveal pattern as the ellipsis
   menu below, so it doesn't clutter the header at rest. Given the
   same fixed-size flex box as the ellipsis button below so the two
   icons line up regardless of glyph metrics or what else is in the
   header (a bare <span><i>, with no box of its own, only lined up
   with the ellipsis <button> by coincidence). */
.start-grid-category-drag-handle {
    flex-shrink: 0;
    opacity: 0;
    color: #999;
    cursor: grab;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -6px; /* pulled closer to the ellipsis button, tighter than the header's default 8px gap */
}
.start-grid-bucket-header:hover .start-grid-category-drag-handle {
    opacity: 1;
}
.start-grid-category-drag-handle:active {
    cursor: grabbing;
}

/* Category drag-and-drop is desktop-only (see initStartGridCategorySortable()
   in dashboard.blade.php) - a tap can trigger :hover briefly on mobile
   browsers, surfacing a drag icon that doesn't actually do anything there
   and would just confuse users. Hide it outright below the breakpoint. */
@media (max-width: 767px) {
    .start-grid-category-drag-handle {
        display: none;
    }

    /* The ellipsis menu itself IS usable on mobile (Add Link, Edit Title,
       Change Icon, etc still work by tap) - it just relies on the same
       hover-only opacity, which mobile browsers don't reliably trigger.
       Show it outright here instead. */
    .start-grid-bucket-actions .dropdown-toggle {
        opacity: 1;
    }
}

.start-grid-bucket-actions .dropdown-toggle {
    opacity: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.start-grid-bucket-actions .dropdown-menu .dropdown-item {
    font-size: 0.9rem;
}

.start-grid-bucket-header:hover .start-grid-bucket-actions .dropdown-toggle {
    opacity: 1;
}

.start-grid-bucket-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The global .twemoji-img size (20x20, see emoji-picker.css) overflows
   this 16x16 box and gets centered, shifting the visible glyph's left
   edge outward compared to a link's plain 16x16 favicon - constrain it
   to the box here so both line up on the same left edge. */
.start-grid-bucket-icon .twemoji-img {
    width: 16px;
    height: 16px;
}

/* Raw <select> elements are excluded from the broad ".dark-mode *"
   text-color rule (it skips select/select * so bootstrap-select's own
   dark-mode styling isn't fought with) - but this Start Category
   dropdown is a plain, non-bootstrap-select <select>, so without this
   it inherits a dark background from its parent while keeping
   Bootstrap's default dark-gray text color, making it unreadable. */
.dark-mode #frm_link_start_grid_bucket {
    color: #fff !important;
    background-color: #343434 !important;
}


.start-grid-menu-toggle {
    color: #888 !important;
}

.start-grid-bucket-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
    color: #111;
}

.start-grid-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0;
}

.start-grid-link {
    display: flex;
    align-items: center;
    position: relative;
    cursor: grab;
    gap: 6px;
    padding: 3px 4px;
    color: #333;
    touch-action: pan-y;
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Same fix as Table view: every card is position:relative with no
   explicit z-index, so a LATER card in the list paints over an EARLIER
   card's open "..." menu (and moving the mouse onto that later card
   makes ITS ellipsis hover-reveal and intercept clicks meant for the
   open menu). Lift the whole card above its neighbors while its own
   menu is open. */
.start-grid-link:has(.dropdown-menu.show) {
    z-index: 1000;
}

.start-grid-link-actions {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.start-grid-link-actions > * {
    pointer-events: auto;
}

.start-grid-link-actions .dropdown-toggle {
    opacity: 0;
    padding: 2px 4px;
    pointer-events: auto;
}

.start-grid-link:hover .start-grid-link-actions .dropdown-toggle {
    opacity: 1;
}

/* Phones only - the link name has flex:1 (see .start-grid-link-name)
   so it stretches to fill the whole column width, pushing the ellipsis
   to the far right edge regardless of how short the actual link text
   is. Shrink the row to its own content instead, so the ellipsis sits
   right after the last word instead of stranded at the column edge. */
@media (max-width: 767px) {
    .start-grid-link {
        width: fit-content;
        max-width: 100%;
    }
    .start-grid-link-name {
        flex: 0 1 auto;
    }
    .start-grid-link-actions {
        margin-left: 5ch;
    }
}

.start-grid-link-actions .dropdown-item:hover,
.start-grid-link-actions .dropdown-item:active {
    background-color: var(--fs-info-background);
    color: #fff;
}

.start-grid-link-placeholder {
    border: 1px dashed #17a2b8;
    border-radius: 4px;
    margin: 2px 4px;
}

.start-grid-bucket-placeholder {
    border: 1px dashed #17a2b8;
    border-radius: 4px;
    margin-bottom: 1rem;
    margin-left: 12px;
    margin-right: 12px;
    box-sizing: border-box;
}

.dark-mode .start-grid-link-placeholder {
    border-color: #17a2b8;
}

.start-grid-link:hover {
    background: #f0f0f0;
    color: #000;
    text-decoration: none;
}

/* Bucket | Domain | Date line (Mini, Masonry, ...) - about 70% of the
   description text's size. Uses em (not a flat px/rem) so it scales
   along with the site's font-size setting instead of a fixed value
   that would look right at one text-size setting and wrong at
   others. The site's own "* { font-size: ... }" rule (near the top
   of this file) sets font-size directly on every element, including
   the spans inside .mini-meta - so setting this on the wrapping div
   alone doesn't reach them via inheritance. The child spans are
   explicitly set to "inherit" here so they pick up the div's already
   -scaled-down size instead of the global rule's own value. */
.result-mini-card-view .mini-meta {
    font-size: 0.8em !important;
}

.result-mini-card-view .mini-meta * {
    font-size: inherit !important;
}

/* Tags sit on the same line as Bucket/Domain/Date - matching that
   line's size (same reasoning/fix as .mini-meta above). */
.result-mini-card-view .tagRow {
    font-size: 0.8em !important;
}

.result-mini-card-view .tagRow * {
    font-size: inherit !important;
}

/* Bricks: bumped up one step from Mini's 0.8em, per explicit request,
   alongside the title/description size bump above - kept as its own
   rule since only Bricks' sizing changed here. */
.result-masonry-view .mini-meta {
    font-size: 0.88em !important;
}

.result-masonry-view .mini-meta * {
    font-size: inherit !important;
}

.result-masonry-view .tagRow {
    font-size: 0.88em !important;
}

.result-masonry-view .tagRow * {
    font-size: inherit !important;
}

/* Vanilla: same treatment, but 10% larger across the board (title,
   description, and this Bucket/Domain/Date/Tags line) per explicit
   request - kept as its own rule instead of joining Mini/Masonry's
   0.8em above since only Vanilla's sizing changed here. */
.result-list-view .mini-meta {
    font-size: 0.88em !important;
}

.result-list-view .mini-meta * {
    font-size: inherit !important;
}

.result-list-view .tagRow {
    font-size: 0.88em !important;
}

.result-list-view .tagRow * {
    font-size: inherit !important;
}

/* The Bucket/Domain/Date + Tags row otherwise sits right under the
   title/description, wherever that content happens to end - leaving a
   big empty gap below it on short cards, since .card-body itself
   isn't a flex container and nothing pushes this row down. Making it
   one and pinning this specific row to the bottom (margin-top: auto)
   keeps it flush with the card's bottom edge no matter how short the
   title/description above it is, or how tall the row's card-height
   neighbors force the card to be. */
.result-mini-card-view .card-body,
.result-list-view .card-body,
.result-masonry-view .card-body,
.result-balanced-view .card-body,
.result-balance-view .card-body {
    display: flex;
    flex-direction: column;
}

/* Mini only - card-body needs to actually fill the JS-set row height
   (not just size to its own content) so .mini-content-clip has real
   spare space to grow into and the meta line never gets clipped away
   (see the syncRowHeights re-run in results-view.blade.php). Scoped to
   just this view - adding it to the shared rule above also stretched
   Bricks/Masonry's card-body, which doesn't need it and only pushed
   its bottom meta line down with extra empty space above it. */
.result-balanced-view .card-body {
    height: 100%;
}

.result-mini-card-view .card-body > .row:last-child,
.result-list-view .card-body > .row:last-child,
.result-balance-view .card-body > .row:last-child {
    margin-top: auto;
}

/* Mini (.result-balanced-view) wraps its description + meta rows in
   .mini-content-clip (see link-display.blade.php) so long content can
   be clipped without also clipping the ellipsis dropdown menu in the
   row above it (overflow:hidden on the whole .card was clipping that
   dropdown too - see the note on .result-balanced-view .card below).
   Fills the remaining flex-column space after the icon/title row,
   clips anything past its own bounds, and keeps the meta row pinned to
   its own bottom edge exactly like the other views' pattern above. */
.result-balanced-view .mini-content-clip {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.result-balanced-view .mini-content-clip > .row:last-child {
    margin-top: auto;
}

/*********************************************************
    MINI VIEW (result-balanced-view, renamed "Mini" in the View menu)
 *********************************************************/
/* Was forced to one fixed height for every card - switched to the same
   per-row height sync as Boxes (see syncRowHeights() in this file's
   script section) so each card auto-sizes to its own content, but every
   card in a given row still stretches to match that row's tallest one -
   matching production's original Mini look, with all rows staying
   uniform without a single global fixed height cutting off longer
   content. */

.result-balanced-view .mini-meta {
    font-size: 0.8em !important;
}

.result-balanced-view .mini-meta * {
    font-size: inherit !important;
}

.result-balanced-view .tagRow {
    font-size: 0.8em !important;
}

.result-balanced-view .tagRow * {
    font-size: inherit !important;
}

/*********************************************************
    BALANCE VIEW (result-balance-view)
 *********************************************************/
/* Restored as its own view, separate from Mini/Balanced above - same
   fixed-height-card technique, just its own independently-tunable
   height. */
.result-balance-view .card {
    /* Bootstrap's h-100 class (already on this card) carries !important,
       so a plain height here would silently lose to it - match that. */
    height: 132px !important;
    /* overflow:hidden was tried here but it also clips the ellipsis
       dropdown menu (a child of this same .card) - see the matching
       note on .result-balanced-view .card above. */
}

/* Phones only - Even's cards run 30% shorter than desktop/tablet. */
@media (max-width: 767px) {
    .result-balance-view .card {
        height: 92px !important;
    }
}

.result-balance-view .mini-meta {
    font-size: 0.8em !important;
}

.result-balance-view .mini-meta * {
    font-size: inherit !important;
}

.result-balance-view .tagRow {
    font-size: 0.8em !important;
}

.result-balance-view .tagRow * {
    font-size: inherit !important;
}

/* Bricks: Tags got split into its own row above Bucket/Domain/Date (was
   sharing a line with them), so the two are wrapped in one plain div to
   keep them moving down together as a unit - :last-child here targets
   that wrapper instead of a .row directly. */
.result-masonry-view .card-body > div:last-child {
    margin-top: auto;
}

/* DataTables pagination (admin tables) - the active page number
   defaults to Bootstrap's blue, which doesn't match the site's own
   teal "info" buttons (e.g. the "Bucket"/"Link" add buttons right
   above it). Match that color instead. */
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--fs-info-background) !important;
    border-color: var(--fs-info-background) !important;
}

/*********************************************************
    TOAST NOTIFICATIONS
 *********************************************************/
/* jquery.toast.css hardcodes a flat 250px width with no responsive
   handling at all - same width on a phone as a desktop monitor.
   Widened here instead of editing the vendor plugin file directly, so
   longer messages wrap less. On phones, scale to the viewport instead
   of a flat number so it can't get too close to (or past) the screen
   edges on a narrow/older phone. */
.jq-toast-wrap {
    width: 320px;
}

@media (max-width: 767px) {
    .jq-toast-wrap {
        width: calc(100vw - 40px);
        max-width: 320px;
    }
    .jq-toast-wrap.bottom-right,
    .jq-toast-wrap.top-right {
        right: 20px;
    }
    .jq-toast-wrap.bottom-left,
    .jq-toast-wrap.top-left {
        left: 20px;
    }
}

/* jquery.toast.css hardcodes success toasts to Bootstrap's bright blue
   (#0d6efd). Overridden here to a muted, darker teal instead of the
   site's full-saturation accent teal (#0dcaf0), which read as too
   bright/eye-catching for a routine "saved" notification. */
.jq-icon-success {
    background-color: #2b6e72;
    border-color: #2b6e72;
}

.start-grid-link.hilite {
    background: var(--hilite-color, #fafaaf);
    border-radius: 4px;
}

/* Same treatment as the Icons view's colored cards - a solid fill of the
   (usually pastel) hilite color reads too washed-out/bright against a
   dark card, so use a thin colored outline instead, same color used in
   light mode. */
.dark-mode .start-grid-link.hilite {
    background: transparent;
    border: 1.5px solid var(--hilite-color, #fafaaf);
}

.start-grid-favicon {
    width: 16px; /* matches .start-grid-bucket-icon so link and category icons line up on the same left edge */
    height: 16px;
    touch-action: pan-y;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: -4px; /* nudged left - favicon artwork tends to have more built-in padding than the category icon, making it look indented at an identical box position */
}

.start-grid-favicon-default {
    font-size: 12px;
    color: #767676;
    flex-shrink: 0;
}

.start-grid-link-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: pan-y;
}

/* Dark mode */
.dark-mode .start-grid-bucket {
    background: transparent;
    border: none;
}

.dark-mode .start-grid-bucket-header {
    background: transparent;
    border: none;
    color: #fff;
}

.dark-mode .start-grid-link {
    color: #ddd;
}

/* Dark mode: top nav buttons hover — matches bucket menu/links/start grid hover */
.dark-mode .topLink:hover,
.dark-mode .topGear:hover,
.dark-mode .topView:hover,
.dark-mode .topEllip:hover,
.dark-mode .bucketButton:hover,
.dark-mode .topLink.btn-primary,
.dark-mode .topGear.btn-primary,
.dark-mode .topView.btn-primary,
.dark-mode .topEllip.btn-primary {
    background-color: #262626 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Sidebar toggle button */
#sidebar-toggle {
    display: none;
    position: fixed;
    top: 82px;
    left: var(--fs-left-navigation-width);
    transform: translateX(-50%);
    z-index: 100;
    background-color: #e8e8e8;
    background-image: radial-gradient(circle, #aaa 1px, transparent 1px);
    background-size: 4px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    cursor: pointer;
    padding: 0;
    color: #767676;
    transition: left 0.2s;
}
#sidebar-toggle:hover { background-color: #d0d0d0; background-image: radial-gradient(circle, #767676 1px, transparent 1px); background-size: 4px 4px; color: #555; }
.dark-mode #sidebar-toggle { background-color: #3a3a3a; background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 4px 4px; border-color: #555; color: #bdbdbd; width: 18px; height: 18px; }
.dark-mode #sidebar-toggle:hover { background-color: #444; background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 4px 4px; color: #fff; }

@media (min-width: 992px) {
    #sidebar-toggle { display: block; }
}

/* Collapsed sidebar state */
#main-wrapper.sidebar-hidden .left-sidebar { display: none !important; }
#main-wrapper.sidebar-hidden .page-wrapper { margin-left: 0 !important; }
#main-wrapper.sidebar-hidden #sidebar-toggle { left: 10px; }

/*********************************************************
    CURATED GALLERY — hover matches other cards on the site
 *********************************************************/
.bucket-display .card:hover {
    background-color: #f2f2f2 !important;
    border-color: rgba(0,0,0,0.5) !important;
}
body.dark-mode .bucket-display .card:hover {
    background-color: #262626 !important;
    border-color: #777 !important;
}
/* Fill the whole box uniformly in dark mode — same wildcard-transparency
   approach used for link cards, so no child element shows its own patch
   of the old background color. */
body.dark-mode .bucket-display .card:hover * {
    background-color: transparent !important;
}
/* Exceptions: the open dropdown menu (Follow/Share/Copy) and its item
   hover must stay opaque, same as elsewhere on the site. */
body.dark-mode .bucket-display .card:hover .dropdown-menu {
    background-color: #111 !important;
}
body.dark-mode .bucket-display .card:hover .dropdown-item:hover,
body.dark-mode .bucket-display .card:hover .dropdown-item:hover * {
    background-color: #3a3a3a !important;
}
/* The "Bucket Options" dropdown-toggle button must also stay its normal
   teal, not go transparent (which let the darkened card background show
   through and looked black). */
body.dark-mode .bucket-display .card:hover .btn-info {
    background-color: var(--fs-info-background) !important;
    border-color: var(--fs-info-background) !important;
    color: var(--fs-info-text) !important;
}
body.dark-mode .bucket-display .card:hover .btn-info:hover {
    background-color: var(--fs-info-hover) !important;
    border-color: var(--fs-info-hover) !important;
    color: var(--fs-info-text) !important;
}

/* Curated gallery: hide the row-divider line (from .border-bottom on the
   grid wrapper) in dark mode — keep it in day mode. */
body.dark-mode .bucket-display.border-bottom {
    border-bottom-color: transparent !important;
}

/*********************************************************
    EMOJI BUCKET ICONS
 *********************************************************/
.emoji-icon {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
}

/* View menu: fixed-width icon slot so labels all line up regardless of
   whether the icon is an emoji, a font icon, or the custom box shape. */
.view-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 6px;
}

/* Bucket page title bar: select-all checkbox border 5% darker than
   Bootstrap's default */
.bucket-title-checkbox {
    border-color: rgba(0, 0, 0, 0.30) !important;
}

/* Favorites toolbar: 3/4-column layout switch icons turn white on hover */
.switch-columns:hover i {
    color: #fff;
}

/* View menu "Boxes" icon: colored hollow rectangle (no matching emoji exists) */
.view-menu-box-icon {
    display: inline-block;
    width: 14px;
    height: 11px;
    border: 2px solid #17a2b8;
    border-radius: 2px;
    vertical-align: middle;
}

/* Bookmark import modal: square radio buttons with a barely-visible black outline
   instead of Bootstrap's default filled circle */
#bookmark_import_form .form-check-input[type="radio"] {
    border-radius: 2px;
    border-color: rgba(0, 0, 0, 0.25);
}

/* Import modal's "how would you like your bookmarks organized" radios -
   follow the theme color when selected, same as the View menu Details
   checkboxes above and the Import/Export buttons (already themed via
   .btn-info). This was the one spot still using the old hardcoded teal
   from the sitewide .form-check-input:checked rule. */
#bookmark_import_form .form-check-input:checked {
    background-color: var(--fs-info-background) !important;
    border-color: var(--fs-info-background) !important;
}

/* Ellipsis menu's "Start Grid (On)/(Off)" status text - Bootstrap's
   .text-muted grey didn't match the "Start Grid" label next to it (white),
   making the on/off state look faded/disconnected from the rest of the
   item. */
#startGridStatus {
    color: #fff !important;
}

/* Icon picker (bucket icon selector): the library's hover highlight sets
   background:#fff with no !important, so the site's blanket dark-mode rule
   (background:#343434 !important on every element) swallows it - the
   hovered icon just blends into the dark modal background. Give it a
   visible highlight in dark mode. */
body.dark-mode #IconPickerModal .ip-icons-content .ip-icons-area > i:hover {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

/* Admin > Manage Default Bucket/Links: "view links" modal rows */
#view-default-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.default-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #eaecef;
}

.default-link-row:last-child {
    border-bottom: none;
}

.default-link-favicon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.default-link-info {
    flex: 1 1 auto;
    min-width: 0;
}

.default-link-name {
    font-weight: 500;
    color: #1a1d23;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.default-link-favorite-star {
    color: #f5b301;
}

.default-link-url {
    font-size: 12px;
    color: #8a8f9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.default-link-description {
    font-size: 12px;
    color: #a0aec0;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.default-link-actions {
    flex-shrink: 0;
    display: flex;
}

.dark-mode .default-link-row {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .default-link-name {
    color: #e8eaf0;
}

.dark-mode .default-link-url {
    color: #9aa0ab;
}

.dark-mode .default-link-description {
    color: #7a8290;
}

/* Start Grid dark mode hover - placed at the end of the file with extra
   specificity (matching the real .start-grid-link ancestor explicitly,
   not just relying on a shorter chain) to definitively beat any other
   dark-mode dropdown-item/card hover rule elsewhere in this file,
   regardless of source order. */
body.dark-mode .start-grid-link.start-grid-link:hover,
body.dark-mode .start-grid-link.start-grid-link:hover * {
    background-color: #454545 !important;
    color: #fff !important;
}

body.dark-mode .start-grid-link .start-grid-link-actions .dropdown-item:hover,
body.dark-mode .start-grid-link .start-grid-link-actions .dropdown-item:hover * {
    background-color: var(--fs-info-background) !important;
    color: #fff !important;
}

/* Search results: reveal an edit pencil on hover instead of the old
   "Edit Links" checkbox mode, so editing a link found via search doesn't
   require a separate toggle to remember is on/off. */
/* Always visible - hover-to-reveal meant tablet (no hover state)
   needed an extra tap on the row just to find the icon before tapping
   it for real. */
.tt-suggestion .search-edit-link {
    display: inline-block;
    float: right;
    margin-left: 1ch;
    margin-right: 1ch;
    shape-margin: 1ch;
    opacity: 1;
    cursor: pointer;
    color: #6c757d;
}
.tt-suggestion .search-edit-link:hover {
    color: #fff;
}

/* Mobile search: takes over the full screen while active instead of
   showing a cramped inline dropdown - close button on the right, results
   list fills the rest of the screen with larger touch-friendly rows. */
#mobile-search-close {
    display: none;
}
@media (max-width: 767px) {
    body.mobile-search-active {
        overflow: hidden;
    }
    body.mobile-search-active #fullsort_search_block {
        position: fixed;
        top: 0;
        left: 5%;
        width: 90% !important;
        box-sizing: border-box;
        bottom: 0;
        z-index: 2000;
        background-color: #fff;
        padding: 0.75rem;
        padding-right: 2.75rem;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    body.dark-mode.mobile-search-active #fullsort_search_block {
        background-color: #0d0d0d;
        border-color: rgba(255, 255, 255, 0.2);
    }
    body.mobile-search-active #mobile-search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        font-size: 1.1rem;
        position: absolute;
        top: 0.15rem;
        left: auto;
        right: 0.25rem;
        z-index: 2001;
    }
    body.mobile-search-active .tt-menu {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        height: calc(100vh - 6rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-top: 3rem !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        box-shadow: none !important;
        padding-top: 0.25rem !important;
        padding-bottom: 3rem !important;
        box-sizing: border-box;
    }
    body.dark-mode.mobile-search-active .tt-menu {
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    body.mobile-search-active .tt-suggestion {
        padding: 0.85rem 0.5rem !important;
        font-size: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
    }
    body.dark-mode.mobile-search-active .tt-suggestion {
        border-bottom-color: rgba(255, 255, 255, 0.15);
    }
    body.mobile-search-active .tt-suggestion:last-child {
        border-bottom: none;
    }
    /* Flex here would split the icon, the highlighted match text, and
       the rest of a wrapping title into separate sibling flex items
       instead of one flowing block of inline text, causing overlapping
       lines on long titles - keep this as normal inline flow (icon is
       already an inline img) and just size it up a bit for touch. */
    body.mobile-search-active .link-select img,
    body.mobile-search-active .bucket-select img {
        vertical-align: middle;
    }
    /* The edit icon now comes BEFORE the title text in the HTML (see
       buildLinkSuggestionHtml) and floats right - a float only affects
       lines that come after it in the flow, so placing it first means
       every line of a wrapping title (not just the last) wraps around
       it natively, with a real gutter instead of touching it. */
    body.mobile-search-active .link-select,
    body.mobile-search-active .bucket-select {
        display: block;
    }
}

/* Gear/Settings dropdown: fixed-width icon slot so item labels all line up,
   since the mixed icon fonts/emoji used in that menu have different glyph
   widths and a plain margin-right doesn't equalize them. */
#fs-site-options-dropdown ~ .dropdown-menu .dropdown-item > i.me-1,
#fs-site-options-dropdown ~ .dropdown-menu .dropdown-item > span.me-1 {
    display: inline-block;
    width: 20px;
    margin-right: 0 !important;
    text-align: center;
}

/* Child bucket badges (buckets nested inside a bucket): darken slightly on
   hover so it reads as clickable, matching the hover language used
   elsewhere instead of a plain opacity fade (which reads as "disabled"). */
#child_buckets .badge.bg-info {
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#child_buckets .badge.bg-info:hover {
    background-color: var(--fs-info-hover) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Feedback widget (bottom-left corner) Send button, dark mode: force
   white text and brighten the teal on hover, same treatment as the
   child bucket badges above. */
.dark-mode .feedback_submit {
    color: #fff !important;
}
.dark-mode .feedback_submit:hover {
    background-color: #1cb2c9 !important;
}

/* Guest sidebar (Home/Login/About Us) - darken from the default light
   link color for better contrast against the light sidebar background.
   Guests never get dark mode (that's a per-account setting), so this is
   plain day-mode-only text color. */
#sidebarnav-visitor li a {
    color: #222;
}
#sidebarnav-visitor li a:hover {
    color: #000;
    background-color: #f2f2f2 !important;
}
#sidebarnav-visitor li a.current {
    background-color: #ececec !important;
}

#demo_account_button,
.sidebar-nav ul li a#demo_account_button.current {
    color: #fff !important;
    background-color: var(--fs-info-background) !important;
    font-size: 1.15rem;
    font-weight: 600;
}
#demo_account_button:hover {
    background-color: var(--fs-info-hover) !important;
    border-color: var(--fs-info-hover) !important;
    color: #fff !important;
}

/* Dark mode: .btn-info buttons (curated gallery, Account Sign in, etc.)
   were getting caught by the generic ".dark-mode .btn:hover" rule
   turning them nearly black on hover - darken slightly from base
   instead, same value already used for .btn-info:hover in day mode. */
.dark-mode .btn-info:hover {
    background-color: var(--fs-info-hover) !important;
    border-color: var(--fs-info-hover) !important;
    color: var(--fs-info-text) !important;
}


/* View menu Details checkboxes (Icon/Title/Description/Bucket/Domain/Date/
   Tags) - follow the theme color when checked, same as buttons/scrollbar.
   Scoped to just this checkbox group, nothing else. */
#form-view-fields .form-check-input:checked {
    background-color: var(--fs-info-background) !important;
    border-color: var(--fs-info-background) !important;
}


/* jquery.toast's progress-bar loader sits at bottom:-3px by default -
   just past the toast box's own bottom edge, so it visually pokes out
   past the toast's background color (e.g. the navy "Link deleted, Undo"
   toast) instead of sitting inside it. Round the box's corners, clip
   anything that would spill past them, and pull the loader back inside
   the box so the background fully covers the whole toast including the
   loader strip. */
.jq-toast-single {
    border-radius: 6px;
    overflow: hidden;
}

.jq-toast-loader {
    bottom: 0 !important;
}

/* The sitewide dark-mode rule gives almost every element its own dark
   background (".dark-mode *") - that catches the toast's own links (like
   the "Undo" in the delete-link toast) too, painting a small dark patch
   behind just that text instead of letting the toast's own bgColor (e.g.
   navy) show through underneath it. */
body.dark-mode .jq-toast-single a,
body.dark-mode .jq-toast-single .close-jq-toast-single {
    background-color: transparent !important;
}

/* Boxed form fields (admin defaults modals) - each field is its own
   bordered block with the label stacked above the input, instead of
   the label-left/input-right row layout used elsewhere in the app. */
.form-field-box {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.form-field-box label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    margin-bottom: 0.4rem;
}
.dark-mode .form-field-box {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Edit Link modal info icons (Start Category, Start Page Title) - 30%
   bigger on phone only, easier to tap than the desktop size. */
@media (max-width: 767px) {
    .info-toggle i {
        font-size: 130%;
    }
/* "Sort Links" label above the ellipsis menu's 4 sort options - the
   default .dropdown-header is small/muted, easy to miss as a section
   label rather than just another line of text. */
.sort-menu-header {
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
}

/* Link Columns / Start Columns row: label and "3 | 4" stay on one line,
   but "3 | 4" is grouped into its own inline-flex unit so the two
   numbers always share one baseline - without this, "4" (bold, tighter
   line-height than the label span) sat visibly lower than "3". */
.layout-columns-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

/* "Easy Scroll" bucket browser (test, Add Link only) - built from real
   .dropdown-item rows so it matches the app's existing menu styling
   (incl. dark mode) automatically, just with a small expand/collapse
   chevron and per-depth indent added. */
.bucket-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: #888;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Bumps the actual tappable area to ~44px (the standard minimum touch
   target) without changing the visible 16px icon or shifting
   surrounding layout - padding grows the hit box, the matching
   negative margin pulls the box back to its original footprint. Only
   applied on touch devices (pointer: coarse) - on desktop the enlarged
   hitbox overlapped into neighboring rows above/below, making the
   chevron unreliable to click with a mouse. */
@media (pointer: coarse) {
    .bucket-tree-toggle {
        padding: 14px;
        margin: -14px 8px -14px -14px;
    }
}

.dark-mode .bucket-tree-toggle {
    color: #aaa;
}

.bucket-tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sort Links / Start Page items in the top-right ellipsis menu - nudge
   left evenly (icon + label together) by about half a character space. */
#alphaSort, #newSort, #oldSort, #customSort, #toggleStartGrid {
    margin-left: -8px;
}