/* =========================================================================
   custom-buttons.css
   Variant: stronger accent tint (normal & hover), ACCENT-COLORED (darker) TEXT,
            stacked icons, 14px corners, no outer glow, light-grey border.
   ========================================================================= */

/* 1) Palette (unchanged) */
:root {
    --btn-back: #FFD700;
    --btn-warning: #EB8E27;
    --btn-create: #2D90FA;
    --btn-import: #37ED60;
    --btn-select: #2ec9c9;
    --btn-proceed: #9A5FF5;
    --btn-history: #868B8F;
    --btn-dark: #242424;
    --btn-edit: #218CFF;
    --btn-delete: #FF364A;
    --btn-info: #179eb3;
    --btn-duplicate: #28A745;
    --btn-unlock: #ffa600;
}

/* 2) Shared containers (trimmed) */
/* =========================================================
   Form Container
   Main content container used throughout OSOT.
   ========================================================= */

.form-container {
    margin-top: 6px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 10px;
    padding: 15px;
    padding-bottom: 10px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    /* Very subtle depth - separation without looking raised */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.045);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
}

    .form-container + .form-container {
        margin-top: 0;
    }


    /* Remove unnecessary spacing from the final element */
    .form-container > :last-child {
        margin-bottom: 0 !important;
    }


    /* Prevent wide content escaping the container */
    .form-container img,
    .form-container table,
    .form-container pre,
    .form-container code,
    .form-container .table-responsive {
        max-width: 100%;
    }


    .form-container pre {
        white-space: pre-wrap;
    }


    /* Allow toolbars and button groups to wrap on smaller screens */
    .form-container .d-flex,
    .form-container .btn-toolbar,
    .form-container .button-container {
        flex-wrap: wrap;
        min-width: 0;
    }


    .form-container [class*="col-"] {
        min-width: 0;
    }


#matchSelect {
    width: min(420px, 100%);
}


/* =========================================================
   Form Container Header
   Compact, lightly separated section heading.
   ========================================================= */

.form-container-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.25px;
    /*
     * Almost-white grey.
     * Enough contrast to identify the header without creating
     * heavy grey bands throughout the page.
     */
    background-color: #fafafa;
    /* Slightly softer divider */
    border-bottom: 1px solid #ebebeb;
    padding: 7px 15px;
    margin: -15px -15px 8px -15px;
    border-radius: 10px 10px 0 0;
}


    /* =========================================================
   Headers containing buttons/actions
   ========================================================= */

    /* =========================================================
   Headers containing buttons/actions
   ========================================================= */

    .form-container-header:has(.btnInline, .header-actions) {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    /*
 * Keep all header buttons together.
 * Don't apply auto margins to every button.
 */
    .form-container-header > .btnInline,
    .form-container-header > .header-actions {
        margin-left: 0;
        min-width: 0;
    }

    /*
 * Push only the first action to the right.
 * All additional buttons follow immediately beside it.
 */
    .form-container-header > :is(.btnInline, .header-actions):nth-child(1 of .btnInline, .header-actions) {
        margin-left: auto;
    }


.header-actions {
    display: inline-flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.header-bar h1 {
    margin: 0;
    font-size: 24px;
}

.button-container {
    flex-wrap: wrap;
    display: flex;
    gap: 5px;
}

.content {
    padding-top: 0;
}

/* =========================================================
   3) Button tokens
   Fully opaque backgrounds - no glass/transparency.
   ========================================================= */

:root {
    /*
     * Solid white bases are used when mixing the individual
     * button accent colours. Because these are hex colours,
     * the resulting button backgrounds are fully opaque.
     */
    --button-bg-top: #ffffff;
    --button-bg-bottom: #f4f5f6;
    --border-all: #c9ccd3;
    --inner-highlight: #ffffff;
    /* Amount of the variant colour mixed into the background */
    --button-top-mix: 18%;
    --button-bottom-mix: 12%;
    /* Stronger colour when hovering */
    --button-hover-top-mix: 34%;
    --button-hover-bottom-mix: 22%;
    --button-hover-border-mix: 38%;
}

/* 4) Header bar glass */
.header-bar {
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(230, 251, 255, 1);
    border-bottom: 1px solid rgba(211, 231, 235, 1);
    padding: 2px 4px 2px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

body.has-banner .header-bar {
    top: var(--banner-height);
}

/* =========================================================
   5) Custom Buttons
   Solid / opaque accent-tinted buttons.
   ========================================================= */

.custom-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 75px;
    padding: 8px 10px;
    border: 1px solid var(--border-all);
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.05;
    text-decoration: none;
    cursor: pointer;
    /*
     * Default accent colour.
     * Each button variant below overrides this value.
     */
    --bi-color: #0d6efd;
    /*
     * Darker version of the accent colour for readable text.
     */
    --bi-text: color-mix(in srgb, var(--bi-color) 60%, black);
    --bi-text-hover: color-mix(in srgb, var(--bi-color) 72%, black);
    color: var(--bi-text);
    /*
     * SOLID backgrounds.
     *
     * Unlike the old glass version, these mix against fully
     * opaque colours instead of rgba() transparent colours.
     */
    --bi-bg-top: color-mix( in srgb, var(--bi-color) var(--button-top-mix), var(--button-bg-top) );
    --bi-bg-bottom: color-mix( in srgb, var(--bi-color) var(--button-bottom-mix), var(--button-bg-bottom) );
    /*
     * Hover colours remain stronger than the normal state,
     * but are still completely opaque.
     */
    --bi-hover-top: color-mix( in srgb, var(--bi-color) var(--button-hover-top-mix), white );
    --bi-hover-bottom: color-mix( in srgb, var(--bi-color) var(--button-hover-bottom-mix), #f4f5f6 );
    --bi-hover-border: color-mix( in srgb, var(--bi-color) var(--button-hover-border-mix), var(--border-all) );
    background: linear-gradient( to bottom, var(--bi-bg-top), var(--bi-bg-bottom) );
    /*
     * Small internal highlight gives some depth without
     * making the button transparent or glass-like.
     */
    box-shadow: inset 0 1px 0 var(--inner-highlight);
    /*
     * No backdrop-filter is required because the button
     * is now completely opaque.
     */
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease-in;
}

/* =========================================================
   LAPTOP / SMALL DESKTOP BUTTONS
   =========================================================
   Matches the responsive sidebar breakpoint.

   On smaller desktop/laptop screens we reduce the overall
   button footprint while keeping the same OSOT button style,
   colours and stacked icon/text layout.
   ========================================================= */

@media (min-width: 769px) and (max-width: 1366px) {

    .custom-button {
        /*
         * Normal desktop is 75px.
         * A slightly narrower minimum gives header actions
         * more room without making them feel cramped.
         */
        min-width: 62px;
        /*
         * Reduce vertical and horizontal space slightly.
         */
        padding: 5px 7px;
        /*
         * Bring the icon and text a little closer together.
         */
        gap: 2px;
        /*
         * Slightly smaller text for laptop displays.
         */
        font-size: 0.8rem;
        /*
         * Keep the existing rounded OSOT appearance,
         * just slightly more compact.
         */
        border-radius: 10px;
    }

        .custom-button i {
            font-size: 12px;
        }
}


    /* =========================================================
   Hover / keyboard focus
   ========================================================= */

    .custom-button:hover,
    .custom-button:focus-visible {
        background: linear-gradient( to bottom, var(--bi-hover-top), var(--bi-hover-bottom) );
        border-color: var(--bi-hover-border);
        color: var(--bi-text-hover);
        outline: none;
        text-decoration: none;
    }


    /* =========================================================
   Pressed state
   ========================================================= */

    .custom-button:active {
        transform: translateY(1px);
    }


    /* =========================================================
   Icons
   ========================================================= */

    .custom-button i {
        font-size: 14px;
        opacity: .95;
        line-height: 1;
    }


    /* =========================================================
   Disabled state
   ========================================================= */

    .custom-button:is([disabled], .is-disabled) {
        opacity: .55;
        pointer-events: none;
    }

/* 6) Variants → set the accent color */
.back-button-custom {
    --bi-color: var(--btn-back);
}

.warning-button-custom {
    --bi-color: var(--btn-warning);
}

.create-button-custom {
    --bi-color: var(--btn-create);
}

.import-button-custom {
    --bi-color: var(--btn-import);
}

.select-button-custom {
    --bi-color: var(--btn-select);
}

.proceed-button-custom {
    --bi-color: var(--btn-proceed);
}

.history-button-custom {
    --bi-color: var(--btn-history);
}

.dark-button-custom {
    --bi-color: var(--btn-dark);
}

.edit-button-custom {
    --bi-color: var(--btn-edit);
}

.delete-button-custom {
    --bi-color: var(--btn-delete);
}

.unfollow-button-custom,
.follow-button-custom {
    --bi-color: var(--btn-info);
}

.duplicate-button-custom {
    --bi-color: var(--btn-duplicate);
}

.unlock-button-custom {
    --bi-color: var(--btn-unlock);
}

/* Per-variant tweak: very bright yellows need more black to stay readable */
.back-button-custom,
.unlock-button-custom {
    --bi-text: color-mix(in srgb, var(--bi-color) 55%, black);
    --bi-text-hover: color-mix(in srgb, var(--bi-color) 62%, black);
}

/* 7) Mobile tap comfort */
@media (max-width: 480px) {
    .custom-button {
        padding: 12px 14px;
        gap: 5px;
    }

        .custom-button i {
            font-size: 15px;
        }
}

/* 8) Legacy header-button neutral */
.header-button {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

    .header-button:hover {
        box-shadow: 0 4px 6px rgba(0,0,0,.1);
    }

/* =========================================================
   9) Dark mode
   Solid backgrounds with high-contrast white text.
   ========================================================= */

.dark-mode .custom-button {
    color: #ffffff;
    /*
     * Mix against solid dark colours rather than transparent
     * rgba values so dark-mode buttons remain fully opaque.
     */
    --bi-dark-top: color-mix(in srgb, var(--bi-color) 18%, #1e1e20);
    --bi-dark-bottom: color-mix(in srgb, var(--bi-color) 14%, #161618);
    background: linear-gradient( to bottom, var(--bi-dark-top), var(--bi-dark-bottom) );
    border-color: var(--border-all);
    box-shadow: none;
}

    .dark-mode .custom-button:hover,
    .dark-mode .custom-button:focus-visible {
        background: linear-gradient( to bottom, color-mix(in srgb, var(--bi-color) 32%, #2a2a2e), color-mix(in srgb, var(--bi-color) 22%, #1f1f23) );
        color: #ffffff;
        border-color: var(--bi-hover-border);
    }

/* =========================================================
   ALL ITEMS - CONNECTED SEARCH CONTROL
   ========================================================= */

.osot-search-group {
    display: flex;
    align-items: stretch;
    width: min(520px, 100%);
    margin: 0;
}


/* =========================================================
   Search input
   ========================================================= */

.osot-search-input {
    min-width: 0;
    height: 42px;
    border: 1px solid var(--border-all);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background-color: #ffffff;
    padding: 8px 12px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}


    /*
 * Keep the input and button looking like one single control
 * when the search field receives focus.
 */
    .osot-search-input:focus {
        position: relative;
        z-index: 2;
        border-color: #8fbfe8;
        box-shadow: 0 0 0 2px rgba(45, 144, 250, 0.12);
        outline: none;
    }


/* =========================================================
   Advanced Search button
   ========================================================= */

.osot-search-advanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 7px 13px;
    /*
     * Pull the button border against the input so they
     * visually become one joined component.
     */
    border: 1px solid var(--border-all);
    border-radius: 0 12px 12px 0;
    /*
     * Uses the same accent family as the OSOT custom buttons,
     * but remains compact enough for a search toolbar.
     */
    --advanced-color: var(--btn-create);
    color: color-mix( in srgb, var(--advanced-color) 65%, black );
    background: linear-gradient( to bottom, color-mix( in srgb, var(--advanced-color) 16%, #ffffff ), color-mix( in srgb, var(--advanced-color) 11%, #f4f5f6 ) );
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}


    /* =========================================================
   Advanced Search hover
   ========================================================= */

    .osot-search-advanced:hover,
    .osot-search-advanced:focus-visible {
        color: color-mix( in srgb, var(--advanced-color) 75%, black );
        background: linear-gradient( to bottom, color-mix( in srgb, var(--advanced-color) 30%, #ffffff ), color-mix( in srgb, var(--advanced-color) 20%, #f4f5f6 ) );
        border-color: color-mix( in srgb, var(--advanced-color) 38%, var(--border-all) );
        outline: none;
    }


    /* =========================================================
   Icon
   ========================================================= */

    .osot-search-advanced i {
        font-size: 13px;
        line-height: 1;
    }


    /* =========================================================
   Active/open state
   ========================================================= */

    .osot-search-advanced.is-open {
        color: color-mix( in srgb, var(--advanced-color) 78%, black );
        background: linear-gradient( to bottom, color-mix( in srgb, var(--advanced-color) 34%, #ffffff ), color-mix( in srgb, var(--advanced-color) 24%, #f4f5f6 ) );
    }


/* =========================================================
   Dark mode
   ========================================================= */

.dark-mode .osot-search-input {
    color: #ffffff;
    background-color: #1f1f23;
    border-color: #4a4a4f;
}

    .dark-mode .osot-search-input::placeholder {
        color: #a9a9ae;
    }

.dark-mode .osot-search-advanced {
    color: #ffffff;
    background: linear-gradient( to bottom, color-mix( in srgb, var(--advanced-color) 20%, #2a2a2e ), color-mix( in srgb, var(--advanced-color) 14%, #1f1f23 ) );
    border-color: #4a4a4f;
}


/* =========================================================
   Small screens
   ========================================================= */

@media (max-width: 600px) {

    .osot-search-group {
        width: 100%;
    }

    .osot-search-advanced span {
        display: none;
    }

    .osot-search-advanced {
        width: 42px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================
   HEADER POPOUT CONTAINER
   =========================================================
   Reusable panel that visually connects directly underneath
   the global OSOT header bar.

   Suitable for:
   - Advanced Search
   - Filters
   - Quick settings
   - Bulk options
   - Secondary page controls
   ========================================================= */

.popout-container {
    position: sticky;
    /*
     * Sit directly underneath the sticky header.
     *
     * Make sure this matches the actual height of .header-bar.
     */
    top: var(--topbar-height, 56px);
    /*
     * Keep it underneath the header itself, but above the
     * normal page content while scrolling.
     */
    z-index: 998;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e4e7;
    border-top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   POPOUT HEADER
   ========================================================= */

.popout-container-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    background-color: #fafafa;
    border-bottom: 1px solid #ebebeb;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
}


    /* Small icon beside the popout title */
    .popout-container-header i {
        font-size: 13px;
        color: #48656f;
    }


/* =========================================================
   POPOUT BODY
   ========================================================= */

.popout-container-body {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 15px;
    flex-wrap: wrap;
}


    /*
 * Prevent individual controls becoming unnecessarily wide.
 */
    .popout-container-body .form-check {
        margin: 0;
    }


    /*
 * Dropdowns / text inputs used inside popouts.
 */
    .popout-container-body .form-control,
    .popout-container-body .form-select {
        width: auto;
        min-width: 220px;
        max-width: 100%;
    }


/* =========================================================
   DARK MODE
   ========================================================= */

.dark-mode .popout-container {
    background-color: #1f1f23;
    border-color: #3f3f44;
}

.dark-mode .popout-container-header {
    background-color: #252529;
    border-bottom-color: #3f3f44;
}

    .dark-mode .popout-container-header i {
        color: #9fc8d8;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .popout-container {
        border-radius: 0 0 8px 8px;
    }

    .popout-container-body {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

        .popout-container-body .form-control,
        .popout-container-body .form-select {
            width: 100%;
            min-width: 0;
        }
}

/* =========================================================
   MOBILE HEADER BUTTON OVERRIDE
   =========================================================
   Normal mobile page buttons remain comfortable touch targets.

   Buttons inside the unified application header are deliberately
   more compact because the whole action row is horizontally
   scrollable.
   ========================================================= */

@media (max-width: 480px) {

    .header-bar .custom-button {
        min-width: auto;
        padding: 5px 7px;
        gap: 2px;
        font-size: 0.67rem;
        border-radius: 8px;
    }

        .header-bar .custom-button i {
            font-size: 0.72rem;
        }
}