/*
 * Montara Boats — Hyper Admin Theme local overrides.
 *
 * Layered on top of the CDN Hyper CSS chain (daterangepicker, jsvectormap,
 * vendor.min.css, app-saas.min.css, icons.min.css). Loaded last so these
 * rules win. Kept intentionally small — most pages need nothing here.
 *
 * Not processed by Gulp (see gulpfile.js — only public/javascripts,
 * public/stylesheets and views/themes are Gulp-managed).
 */

/* Badges used on list pages (users, leads, etc.) — mirrors the Hyper
   badge-*-lighten convention referenced from converted views. */
.badge {
    display: inline-block !important;
    padding: 0.25em 0.4em !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    border-radius: 0.25rem !important;
}

.badge-success-lighten {
    color: var(--ct-success) !important;
    background-color: var(--ct-success-bg-subtle) !important;
}

.badge-danger-lighten {
    color: var(--ct-danger) !important;
    background-color: var(--ct-danger-bg-subtle) !important;
}

.badge-warning-lighten {
    color: var(--ct-warning) !important;
    background-color: var(--ct-warning-bg-subtle) !important;
}

/* Row action icons (edit/delete) sized to match Hyper's table density. */
.custom-icon {
    font-size: 20px;
}

/*
 * sailfish_style.css (Montara's pre-existing project CSS) is loaded alongside Hyper so
 * converted pages keep the custom classes they were never rewritten out of (.tab_header,
 * .boatstble, .btn_event, .comapny_name, .custom_border, .control-label font, etc.).
 * It also carries a bare `table, th, tr, td { border-bottom: ...; padding: 10px }` rule
 * that would otherwise print through Hyper's own `.table`/`.table-centered` listing tables
 * (Models, Inventory, Company, Events, News, Users). This file loads after sailfish_style.css
 * (see admin-layout.hbs) — restoring Hyper's own border/padding there only.
 *
 * Its `.form-control`/`input` rule (fixed 45px height, custom border/shadow) was
 * deliberately NOT overridden here: it's used throughout the still-untouched shell-swapped
 * configurator bodies (boat/inventory/event forms, news design pages, SEO settings), and
 * resetting it globally risks visual side effects across pages that were never re-verified
 * against a shorter input height. Left as sailfish_style.css already had it.
 */
table,
th,
tr,
td {
    border-bottom: var(--ct-border-width) solid var(--ct-border-color);
    padding: revert;
}

table {
    border-collapse: revert;
}

/*
 * sailfish_style.css also has a `.content p, .content ul li { font-size: 22px; }` rule
 * written for the public frontend's own `.content` sections. Hyper's admin layout
 * independently uses `.content` as its own generic layout wrapper class (see
 * admin-layout.hbs's `.content-page > .content > .container-fluid`), so every <p>/<li>
 * inside the Hyper admin body was being pushed to 22px by coincidence of a shared class
 * name — e.g. Froala's editable text, `.form-text` helper text. Reset back to the
 * inherited size here rather than hardcoding a replacement value.
 */
.content-page .content p,
.content-page .content ul li {
    font-size: inherit;
}

/*
 * sailfish_style.css also styles every "Select file" upload button via
 * `.upload_btn label { background: #006e87; ... }` (plus several more-specific
 * selectors at the same color, and one at #1a1a1a inside `.color_box`) — these are
 * used throughout the still-untouched shell-swapped configurator bodies (boat/
 * inventory forms, image-upload sections). Restyled to Hyper's own primary color so
 * upload buttons match Madis/Hyper instead of the old teal/black. Markup, name/id
 * attributes and the underlying <input type="file"> are untouched — this only
 * repaints the visible label.
 */
.upload_btn label,
.color_box .upload_box .upload_btn label {
    background-color: var(--ct-primary) !important;
}

/*
 * .btn-red_cust2 (e.g. "Save" buttons in Additional Documents rows) is defined in
 * public/assets/css/style_dev.css, which is a frontend-only stylesheet
 * (getMainPageStyles_dev()) never loaded on admin pages, old or new — so this class
 * rendered as plain unstyled text before this conversion too, not a Hyper regression.
 * Restyled to Hyper's primary color for consistency with every other action button on
 * these pages, without pulling in the unrelated style_dev.css file. Confirmed via
 * custom.js that `.btn-red_cust2` is never used as a JS selector — purely cosmetic.
 */
.btn-red_cust2.btn-sm,
.btn-red_cust2.btn-sm:hover {
    background-color: var(--ct-primary) !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
}

/*
 * .btn-black (teal #006e87, from sailfish_style.css) is used as a live primary-action
 * button class across several converted modules (Company Information, Events, News and
 * Blogs, Settings, Users — e.g. "Save Company", "Filter", "Add/Update News", "Update"
 * settings, "Create" user) with no Hyper override, unlike .btn-red_cust2/.upload_btn
 * label which were already handled. Restyled to Hyper's primary color for consistency.
 * Confirmed via custom.js that `.btn-black` is never used as a JS selector — purely
 * cosmetic; its `.btn-black i` icon-spacing rule in sailfish_style.css is unaffected.
 */
.btn-black {
    background-color: var(--ct-primary) !important;
    color: #fff !important;
}

/*
 * Select2 (used on Events' "Event Location" multi-select and News/Blog's category/tag
 * filters) renders its own generated markup — .select2-selection__choice "chips" for
 * each selected value. Hyper's global body/link color rules (from app-saas.min.css,
 * driven by --bs-body-color / --ct-*) cascade into select2's chip text, and depending on
 * the active theme this can render the chip text unreadably light against select2's own
 * light chip background — plus select2's default chip width doesn't reserve space for
 * long labels next to its "x" remove button, causing overlap/truncation. Pin explicit
 * colors and sizing here rather than relying on inherited theme variables.
 */
.select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    color: #333 !important;
    background-color: #e4e4e4 !important;
    border: 1px solid #aaa !important;
    padding: 2px 8px !important;
    max-width: 100%;
}

.select2-selection__choice__display {
    color: #333 !important;
    padding-left: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.select2-selection__choice__remove {
    color: #555 !important;
    position: static !important;
    margin-right: 4px;
}

/* Safety net: force readable text on anything select2 renders inside the chip,
   regardless of the exact sub-class this version of the plugin uses internally. */
.select2-selection__choice,
.select2-selection__choice * {
    color: #333 !important;
}

/*
 * sailfish_style.css's `.custom_border .remove_btn` (used on Inventory's dynamically
 * repeated sections, e.g. boat/engine option groups) is `position: absolute; top:0;
 * right:0;` with no width/height constraint. Under Bootstrap 3 (master) this rendered
 * fine, but Bootstrap 5's `.btn` sizing makes the same markup compute a full-width/
 * full-height box instead of shrinking to its own content — inflating the button's
 * clickable/hoverable area to the size of its entire parent `.custom_border` section
 * (confirmed via DevTools: a ~1070x1070px hit area instead of a small corner button).
 * Same fix already applied locally in boat_new.hbs/boat_edit.hbs's own <style> blocks
 * for the equivalent `.acordian_icon`; this covers every other page (e.g. Inventory,
 * Company Information) that relies on the shared sailfish_style.css rule instead of a
 * local override. width/height are NOT !important: some instances (e.g.
 * company_edit.hbs's "X" remove button) set their own inline width, which must keep
 * winning — fit-content here is only a fallback for instances with no inline width.
 */
.custom_border .remove_btn {
    left: auto !important;
    width: fit-content;
    height: fit-content;
}

/*
 * Dealer backend (Software Updates / Owners Manuals / Marketing Materials / Profile Settings).
 * Every rule below is scoped to `.content-page.dealer-page`. Only the four dealer views carry the
 * `dealer-page` class, so nothing here can reach the main admin (Users, Models, etc.) or any
 * legacy page. Styling only; no link, label or markup behaviour is changed.
 *
 * The download cards (.singlDrkCrd) were plain black boxes whose <a> label turned black-on-black
 * under admin-layout.hbs's global `a { color: black }`. They are restyled as Hyper cards: white
 * surface, blue accent, icon badge and hover lift. Theme variables are used so Hyper's dark mode
 * (the moon toggle) is followed automatically. These selectors outrank the views' own inline
 * `.singlDrkCrd` <style> blocks by specificity, so the views themselves need no change.
 */
.content-page.dealer-page {
    --dealer-card-text: #313a46;
}

[data-bs-theme=dark] .content-page.dealer-page {
    --dealer-card-text: #e3eaef;
}

.content-page.dealer-page .singlDrkCrd {
    position: relative;
    min-height: 110px;
    margin-bottom: 24px;
    padding: 22px 26px;
    text-align: center;
    background: var(--ct-secondary-bg);
    color: var(--dealer-card-text);
    border: 1px solid var(--ct-border-color);
    border-left: 4px solid var(--ct-primary);
    border-radius: 10px;
    box-shadow: var(--ct-box-shadow);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.content-page.dealer-page .singlDrkCrd:hover {
    transform: translateY(-4px);
    border-color: var(--ct-primary);
    box-shadow: 0 12px 28px rgba(var(--ct-primary-rgb), 0.22);
}

.content-page.dealer-page .singlDrkCrd:focus-within {
    outline: 2px solid rgba(var(--ct-primary-rgb), 0.5);
    outline-offset: 2px;
}

/* Icon badge */
.content-page.dealer-page .sdcLogo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ct-primary-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.content-page.dealer-page .sdcLogo svg path,
.content-page.dealer-page .sdcLogo svg line {
    stroke: var(--ct-primary);
    transition: stroke 0.2s ease;
}

.content-page.dealer-page .singlDrkCrd:hover .sdcLogo {
    background: var(--ct-primary);
}

.content-page.dealer-page .singlDrkCrd:hover .sdcLogo svg path,
.content-page.dealer-page .singlDrkCrd:hover .sdcLogo svg line {
    stroke: #fff;
}

/* Label */
.content-page.dealer-page .sdcCntnt {
    flex: 1;
    margin: 5px 20px;
}

.content-page.dealer-page .sdcCntnt p {
    margin-bottom: 0;
}

.content-page.dealer-page .singlDrkCrd a {
    color: inherit;
    transition: color 0.2s ease;
}

.content-page.dealer-page .singlDrkCrd:hover a,
.content-page.dealer-page .singlDrkCrd a:focus {
    color: var(--ct-primary);
}

/* Whole card is the click target for its (single, unchanged) link. */
.content-page.dealer-page .singlDrkCrd a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* "View site" header button: Hyper primary blue instead of montara-style.css's orange pill. */
.content-page.dealer-page .view-site-btn {
    background-color: var(--ct-primary);
    border-color: var(--ct-primary);
    color: #fff;
    border-radius: var(--ct-btn-border-radius, 0.15rem);
    padding: var(--ct-btn-padding-y, 0.45rem) var(--ct-btn-padding-x, 0.9rem);
    font-family: inherit;
    font-size: var(--ct-btn-font-size, 0.9rem);
    font-weight: 400;
    box-shadow: 0 2px 6px 0 rgba(var(--ct-primary-rgb), 0.5);
}

.content-page.dealer-page .view-site-btn:hover,
.content-page.dealer-page .view-site-btn:focus {
    background-color: var(--ct-primary);
    border-color: var(--ct-primary);
    color: #fff;
    filter: brightness(0.92);
}

/* Profile Settings column divider: sit in the column gutter instead of cutting into the inputs
   (the view's own rule places it 20px inside the neighbouring column). */
.content-page.dealer-page .sprtor::after {
    left: 0;
}

@media (max-width: 767.98px) {
    .content-page.dealer-page .singlDrkCrd {
        min-height: 90px;
        padding: 18px 20px;
    }

    /* Profile Settings: hide the vertical column divider once the columns stack. */
    .content-page.dealer-page .sprtor::after {
        display: none;
    }
}