/*
 * Bootstrap 3.4.1 Override & Future-Proofing
 * This file contains overrides to ensure visual consistency
 * and prepares the codebase for eventual Bootstrap migration
 */

/* ========================================
   CRITICAL OVERRIDES - DO NOT REMOVE
   ======================================== */

/* Ensure Bootstrap 3 grid behavior is locked */
.container {
    max-width: 1170px; /* Bootstrap 3 default */
}

/* Lock navbar styling */
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

/* Preserve panel styling */
.panel-default > .panel-heading {
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* Lock form styling */
.form-control {
    height: 34px; /* Bootstrap 3 default */
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
}

/* Preserve button styling */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
}

/* Lock modal styling */
.modal-content {
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

/* ========================================
   SECURITY ENHANCEMENTS
   ======================================== */

/* Ensure modals have proper backdrop */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

/* ========================================
   BROWSER COMPATIBILITY FIXES
   ======================================== */

/* Fix IE11 flexbox issues */
.row {
    display: block; /* Force block for Bootstrap 3 compatibility */
}

/* Ensure glyphicons work */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/* ========================================
   ANGULAR UI BOOTSTRAP SPECIFIC FIXES
   ======================================== */

/* Lock datepicker styling */
.uib-datepicker-popup {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* Lock dropdown styling */
.dropdown-menu {
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* Lock tooltip styling */
.tooltip-inner {
    background-color: #000;
    border-radius: 4px;
}

/* Lock popover styling */
.popover {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Improve focus visibility */
.btn:focus,
.form-control:focus {
    outline: 2px solid #66afe9;
    outline-offset: 2px;
}

/* Remove underlines from navigation and UI elements */
.navbar a,
.navbar-nav a,
.nav a,
.nav-tabs a,
.nav-pills a,
.breadcrumb a,
.pagination a,
.pager a,
.panel a,
.thumbnail a,
.list-group-item,
a.list-group-item,
a.thumbnail,
a.panel,
a[role="button"],
a.btn,
/* Large clickable boxes/cards typically used in dashboards */
.tile a,
.card a,
.box a,
.widget a,
/* Common navigation patterns */
[ng-click] a,
[ui-sref] a {
    text-decoration: none !important;
}

.navbar a:hover,
.navbar-nav a:hover,
.nav a:hover,
.nav-tabs a:hover,
.nav-pills a:hover,
.breadcrumb a:hover,
.pagination a:hover,
.pager a:hover,
.panel a:hover,
.thumbnail a:hover,
.list-group-item:hover,
a.list-group-item:hover,
a.thumbnail:hover,
a.panel:hover,
a[role="button"]:hover,
a.btn:hover,
.tile a:hover,
.card a:hover,
.box a:hover,
.widget a:hover,
[ng-click] a:hover,
[ui-sref] a:hover {
    text-decoration: none !important;
}

/* Keep underlines ONLY for regular content links (improves accessibility) */
.content a:not(.btn):not([role="button"]),
.text a:not(.btn):not([role="button"]),
p a:not(.btn):not([role="button"]),
.description a:not(.btn):not([role="button"]) {
    text-decoration: underline;
}

.content a:not(.btn):not([role="button"]):hover,
.text a:not(.btn):not([role="button"]):hover,
p a:not(.btn):not([role="button"]):hover,
.description a:not(.btn):not([role="button"]):hover {
    text-decoration: none;
}