/*
 * ═══════════════════════════════════════════════════════════════
 * Bootstrap 3/4 Compatibility Layer for Bootstrap 5 Migration
 * ═══════════════════════════════════════════════════════════════
 * 
 * This file contains Bootstrap 3/4 class definitions for backward compatibility
 * during the migration to Bootstrap 5. These classes provide fallback styling
 * for any remaining Bootstrap 3/4 classes in the HTML that haven't been migrated yet.
 * 
 * IMPORTANT: This file is a TEMPORARY compatibility layer during migration.
 * As HTML files are verified to be fully migrated to Bootstrap 5, classes in this
 * file should be reviewed and potentially removed.
 * 
 * Migration Status: Active during Bootstrap 5 migration (Nov 2025)
 * 
 * Classes included:
 * - .sr-only (screen reader only)
 * - .text-right, .text-left (text alignment)
 * - .form-group, .control-label (form styling)
 * - .btn-default (button styling)
 * - .navbar.navbar-inverse (navbar styling)
 * - .navbar-toggle, .icon-bar (mobile toggle)
 * - .hidden-xs/sm/md/lg (responsive visibility)
 * - .col-xs-* (extra small grid columns)
 * - .col-*-offset-* (column offsets)
 * - Navbar transparency fixes for 768px+ screens
 * 
 * TODO: Review and remove these classes as HTML migration is verified complete.
 * ═══════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────────────────────────
   ACCESSIBILITY HELPERS
   ─────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ───────────────────────────────────────────────────────────────
   TEXT ALIGNMENT
   ─────────────────────────────────────────────────────────────── */
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* ───────────────────────────────────────────────────────────────
   FORM STYLING
   ─────────────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 15px;
}

.control-label {
    font-weight: 700;
    margin-bottom: 5px;
}

.form-horizontal .control-label {
    padding-top: 7px;
    text-align: right;
}

/* ───────────────────────────────────────────────────────────────
   BUTTON STYLING
   ─────────────────────────────────────────────────────────────── */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    background-color: #fff;
    border-color: #ccc;
}

/* ───────────────────────────────────────────────────────────────
   NAVBAR STYLING
   ─────────────────────────────────────────────────────────────── */

/* Only apply dark navbar-inverse styles on mobile/tablet - FIXED: Changed from 767.98px to 991.98px to match hamburger menu breakpoint */
@media (max-width: 991.98px) {
    .navbar.navbar-inverse {
        background-color: #222;
        border-color: #080808;
        --bs-navbar-color: rgba(255, 255, 255, 0.7);
        --bs-navbar-hover-color: #fff;
        --bs-navbar-brand-color: rgba(255, 255, 255, 0.85);
        --bs-navbar-brand-hover-color: #fff;
    }
}

/* Admin navbar - always dark */
.navbar.navbar-inverse.admin-navbar {
    background-color: #222;
    border-color: #080808;
    --bs-navbar-color: rgba(255, 255, 255, 0.7);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-brand-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-brand-hover-color: #fff;
}

.navbar-toggle {
    border-color: #ddd;
}

.navbar-toggle .icon-bar {
    background-color: #888;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE VISIBILITY CLASSES
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* ───────────────────────────────────────────────────────────────
   EXTRA SMALL (XS) GRID COLUMNS
   ─────────────────────────────────────────────────────────────── */
[class^="col-xs-"],
[class*=" col-xs-"] {
    position: relative;
    min-height: 1px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    flex: 0 0 auto;
}

.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

/* ───────────────────────────────────────────────────────────────
   COLUMN OFFSETS
   ─────────────────────────────────────────────────────────────── */
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

@media (min-width: 576px) {
    .col-sm-offset-1 { margin-left: 8.33333333%; }
    .col-sm-offset-2 { margin-left: 16.66666667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.33333333%; }
    .col-sm-offset-5 { margin-left: 41.66666667%; }
    .col-sm-offset-6 { margin-left: 50%; }
    .col-sm-offset-7 { margin-left: 58.33333333%; }
    .col-sm-offset-8 { margin-left: 66.66666667%; }
    .col-sm-offset-9 { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 768px) {
    .col-md-offset-1 { margin-left: 8.33333333%; }
    .col-md-offset-2 { margin-left: 16.66666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333333%; }
    .col-md-offset-5 { margin-left: 41.66666667%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-7 { margin-left: 58.33333333%; }
    .col-md-offset-8 { margin-left: 66.66666667%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 992px) {
    .col-lg-offset-1 { margin-left: 8.33333333%; }
    .col-lg-offset-2 { margin-left: 16.66666667%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-4 { margin-left: 33.33333333%; }
    .col-lg-offset-5 { margin-left: 41.66666667%; }
    .col-lg-offset-6 { margin-left: 50%; }
    .col-lg-offset-7 { margin-left: 58.33333333%; }
    .col-lg-offset-8 { margin-left: 66.66666667%; }
    .col-lg-offset-9 { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL FIX: Navbar Transparency at 992px+ (Desktop)
   ═══════════════════════════════════════════════════════════════
   These rules ensure navbar elements have transparent background
   at ALL screen sizes ABOVE 992px. This is critical for the 
   Nielsen BookData store's design where the navbar should be
   transparent/white on desktop but dark on mobile/tablet.
   FIXED: Changed from 768px to 992px to match hamburger menu breakpoint.
   ═══════════════════════════════════════════════════════════════ */

/* Force transparent background and black text for desktop navbar */
@media (min-width: 992px) {
    .navbar-nav,
    .navbar-nav > li,
    .navbar-nav > li > a,
    .navbar-right,
    .navbar-collapse,
    .nav.navbar-nav {
        background-color: transparent !important;
        color: #707276 !important;
    }
    
    /* Ensure links maintain proper styling */
    .navbar-nav > li > a {
        color: #707276 !important;
        text-decoration: none; /* Remove default underline */
    }
    
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: #009dd9 !important;
        background-color: transparent !important;
        text-decoration: underline; /* Add underline on hover */
    }
    
    /* Ensure buttons in navbar maintain white background */
    .navbar-inverse .btn-link {
        color: #707276 !important;
        background-color: transparent !important;
    }
    
    .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link:focus {
        color: #009DD9 !important;
        background-color: transparent !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR FIX: Force transparent navbar background at 768px+
   This overrides ALL other rules with maximum specificity
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    /* Target the navbar container itself */
    nav.navbar,
    .navbar,
    .navbar.navbar-light,
    .navbar.navbar-inverse,
    .navbar.navbar-expand-md,
    .navbar-fixed-top,
    nav.navbar.navbar-light,
    nav.navbar.navbar-inverse,
    nav.navbar.navbar-expand-md {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
    
    /* Target navbar collapse container */
    .navbar-collapse,
    .navbar.navbar-collapse,
    nav .navbar-collapse {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
    
    /* Target navbar nav lists */
    .navbar-nav,
    .nav.navbar-nav,
    ul.navbar-nav,
    .navbar .navbar-nav,
    nav .navbar-nav {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
    
    /* Target navbar list items */
    .navbar-nav > li,
    .navbar-nav li,
    ul.navbar-nav > li,
    .navbar .navbar-nav > li,
    nav .navbar-nav > li {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
    
    /* Target navbar links - MOST IMPORTANT */
    .navbar-nav > li > a,
    .navbar-nav li a,
    ul.navbar-nav > li > a,
    .navbar .navbar-nav > li > a,
    nav .navbar-nav > li > a,
    .navbar-light .navbar-nav > li > a,
    .navbar-inverse .navbar-nav > li > a {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
        color: #707276 !important;
        text-decoration: none; /* Remove default underline */
    }
    
    /* Target navbar links on hover/focus */
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus,
    .navbar-nav li a:hover,
    .navbar-nav li a:focus,
    ul.navbar-nav > li > a:hover,
    ul.navbar-nav > li > a:focus,
    .navbar .navbar-nav > li > a:hover,
    .navbar .navbar-nav > li > a:focus,
    nav .navbar-nav > li > a:hover,
    nav .navbar-nav > li > a:focus,
    .navbar-light .navbar-nav > li > a:hover,
    .navbar-light .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
        color: #009dd9 !important;
        text-decoration: underline; /* Add underline on hover */
    }
    
    /* Target navbar right section */
    .navbar-right,
    .navbar-nav.navbar-right,
    ul.navbar-right,
    .navbar .navbar-right,
    nav .navbar-right {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
    
    /* Target navbar buttons */
    .navbar .btn-link,
    .navbar-inverse .btn-link,
    .navbar-light .btn-link,
    nav .btn-link,
    .navbar .btn,
    nav .btn {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
        color: #707276 !important;
    }
    
    .navbar .btn-link:hover,
    .navbar .btn-link:focus,
    .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link:focus,
    .navbar-light .btn-link:hover,
    .navbar-light .btn-link:focus,
    nav .btn-link:hover,
    nav .btn-link:focus {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
        color: #009DD9 !important;
    }
    
    /* Target any header elements that might contain navbar */
    header nav,
    header .navbar,
    header .navbar-nav,
    header .navbar-nav > li,
    header .navbar-nav > li > a {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
}

/* Additional specificity for the 768px-980px range specifically */
@media (min-width: 768px) and (max-width: 980px) {
    nav.navbar,
    .navbar,
    .navbar-nav,
    .navbar-nav > li,
    .navbar-nav > li > a,
    .navbar-collapse {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL FIX: Bootstrap 3 Container Width Compatibility
   ═══════════════════════════════════════════════════════════════
   
   Bootstrap 5 changed the .container max-widths from Bootstrap 3:
   
   Bootstrap 3:                    Bootstrap 5:
   - 750px at ≥768px              - 720px at ≥576px
   - 970px at ≥992px              - 960px at ≥992px
   - 1170px at ≥1200px            - 1140px at ≥1200px (30px narrower!)
                                  - 1320px at ≥1400px (new breakpoint)
   
   This 30px difference at 1200px+ causes asymmetric margins when
   using float:right for navigation menus. The fix restores Bootstrap 3's
   exact container widths to ensure equal left/right margins at all widths.
   
   Issue manifests around 1210px screen width where left margin becomes
   larger than right margin.
   ═══════════════════════════════════════════════════════════════ */

/* Override Bootstrap 5 container widths to match Bootstrap 3 exactly */
@media (min-width: 768px) {
    .container,
    .container-md,
    .container-sm {
        max-width: 750px;
    }
}

@media (min-width: 992px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 970px;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1170px;
    }
}

/* Remove Bootstrap 5's 1400px breakpoint to match Bootstrap 3 behavior */
@media (min-width: 1400px) {
    .container,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1170px; /* Keep at 1170px like Bootstrap 3, not 1320px */
    }
}

/* ═══════════════════════════════════════════════════════════════
   END OF BOOTSTRAP 3/4 COMPATIBILITY LAYER
   ═══════════════════════════════════════════════════════════════ */