/* ==========================================================================
   FILENAME: bootstrap-override.css
   DESCRIPTION: Re-themes Bootstrap 3.3.6 components using design-system
   tokens from design-system-theme.css. Loaded AFTER Bootstrap and the
   token file so that cascade order wins without !important.
   ========================================================================== */

/* ==========================================================================
   A. GLOBAL — body, links, selection
   ========================================================================== */

body {
  background-color: var(--sys-background);
  color: var(--sys-on-background);
}

a {
  color: var(--sys-secondary);
}

a:hover,
a:focus {
  color: var(--sys-secondary);
  opacity: 0.85;
}

::selection {
  background-color: var(--sys-secondary);
  color: var(--sys-on-secondary);
}

/* ==========================================================================
   B. NAVBAR
   ========================================================================== */

.navbar-default {
  background-color: var(--sys-surface);
  background-image: none;
  border-color: var(--sys-outline-variant);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: var(--sys-on-surface);
  text-shadow: none;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: var(--sys-on-surface);
  opacity: 0.85;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--sys-secondary);
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: var(--sys-surface-container);
  background-image: none;
  color: var(--sys-on-surface);
  box-shadow: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: var(--sys-surface-container);
  background-image: none;
  color: var(--sys-on-surface);
}

.navbar-default .navbar-toggle {
  border-color: var(--sys-outline-variant);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--sys-on-surface);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--sys-surface-container);
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--sys-surface);
  border: 1px solid var(--sys-outline-variant);
  box-shadow: 0 2px 8px var(--sys-scrim);
  border-radius: var(--radius-default);
}

.dropdown-menu > li > a {
  color: var(--sys-on-surface);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--sys-secondary);
  background-image: none;
  color: var(--sys-on-secondary);
}

.dropdown-menu > .active > a {
  background-color: transparent;
  background-image: none;
  color: var(--sys-secondary);
  font-weight: 600;
}

.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--sys-secondary);
  background-image: none;
  color: var(--sys-on-secondary);
  font-weight: 600;
}

.dropdown-menu .divider {
  background-color: var(--sys-outline-variant);
}

.navbar-default .navbar-nav > .open > .dropdown-menu > li > a {
  color: var(--sys-on-surface);
}

.navbar-default .navbar-nav > .open > .dropdown-menu > .active > a {
  color: var(--sys-secondary);
  background-color: transparent;
  font-weight: 600;
}

.navbar-default .navbar-nav > .open > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > .open > .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav > .open > .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav > .open > .dropdown-menu > .active > a:focus {
  background-color: var(--sys-secondary);
  background-image: none;
  color: var(--sys-on-secondary);
}

.navbar-default .navbar-nav .caret {
  border-top-color: var(--sys-on-surface);
  border-bottom-color: var(--sys-on-surface);
}

/* Mobile collapsed navbar: dropdowns render inline, not floating,
   so they sit on the navbar --sys-surface background. */
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: transparent;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--sys-on-surface);
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--sys-secondary);
    background-color: transparent;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: var(--sys-secondary);
    background-color: var(--sys-surface-container);
  }
}

/* ==========================================================================
   C. BUTTONS
   ========================================================================== */

/* Unstyled buttons (no .btn class) */
button:not(.btn):not(.close):not(.navbar-toggle) {
  background-color: var(--sys-surface);
  border: 1px solid var(--sys-outline);
  color: var(--sys-on-surface);
  padding: 6px 12px;
  border-radius: var(--radius-default);
  cursor: pointer;
}

button:not(.btn):not(.close):not(.navbar-toggle):hover {
  background-color: var(--sys-surface-container);
}

/* Global button reset */
.btn {
  text-shadow: none;
  box-shadow: none;
  border-radius: var(--radius-default);
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.btn:active,
.btn.active {
  box-shadow: none;
  background-image: none;
}

/* Primary */
.btn-primary {
  background-color: var(--sys-primary);
  border-color: var(--sys-primary);
  color: var(--sys-on-primary);
  background-image: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sys-primary);
  border-color: var(--sys-primary);
  color: var(--sys-on-primary);
  opacity: 0.85;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--sys-primary);
  border-color: var(--sys-primary);
  color: var(--sys-on-primary);
  background-image: none;
  box-shadow: none;
}

/* Success */
.btn-success {
  background-color: var(--sys-success);
  border-color: var(--sys-success);
  color: var(--sys-on-success);
  background-image: none;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--sys-success);
  border-color: var(--sys-success);
  color: var(--sys-on-success);
  opacity: 0.85;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--sys-success);
  border-color: var(--sys-success);
  color: var(--sys-on-success);
  background-image: none;
  box-shadow: none;
}

/* Danger */
.btn-danger {
  background-color: var(--sys-error);
  border-color: var(--sys-error);
  color: var(--sys-on-error);
  background-image: none;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--sys-error);
  border-color: var(--sys-error);
  color: var(--sys-on-error);
  opacity: 0.85;
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-color: var(--sys-error);
  border-color: var(--sys-error);
  color: var(--sys-on-error);
  background-image: none;
  box-shadow: none;
}

/* Warning */
.btn-warning {
  background-color: var(--sys-warning);
  border-color: var(--sys-warning);
  color: var(--sys-on-warning);
  background-image: none;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--sys-warning);
  border-color: var(--sys-warning);
  color: var(--sys-on-warning);
  opacity: 0.85;
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-color: var(--sys-warning);
  border-color: var(--sys-warning);
  color: var(--sys-on-warning);
  background-image: none;
  box-shadow: none;
}

/* Info */
.btn-info {
  background-color: var(--sys-information);
  border-color: var(--sys-information);
  color: var(--sys-on-information);
  background-image: none;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--sys-information);
  border-color: var(--sys-information);
  color: var(--sys-on-information);
  opacity: 0.85;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: var(--sys-information);
  border-color: var(--sys-information);
  color: var(--sys-on-information);
  background-image: none;
  box-shadow: none;
}

/* Default */
.btn-default {
  background-color: var(--sys-surface);
  border-color: var(--sys-outline);
  color: var(--sys-on-surface);
  background-image: none;
}

.btn-default:hover,
.btn-default:focus {
  background-color: var(--sys-surface-container);
  border-color: var(--sys-outline);
  color: var(--sys-on-surface);
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: var(--sys-surface-container);
  border-color: var(--sys-outline);
  color: var(--sys-on-surface);
  background-image: none;
  box-shadow: none;
}

/* Link */
.btn-link {
  color: var(--sys-secondary);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--sys-secondary);
  opacity: 0.85;
}

/* Disabled states */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: 0.5;
  box-shadow: none;
  background-image: none;
}

/* ==========================================================================
   D. TABLES
   ========================================================================== */

.table {
  color: var(--sys-on-surface);
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--sys-outline);
  color: var(--sys-on-surface);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  border-top-color: var(--sys-outline-variant);
}

.table > thead > tr > th,
.table > thead > tr > td {
  border-bottom-color: var(--sys-outline);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--sys-surface-container-low);
}

.table-hover > tbody > tr:hover {
  background-color: var(--sys-surface-container);
}

/* ==========================================================================
   E. FORMS
   ========================================================================== */

.form-control {
  background-color: var(--sys-surface);
  border: 1px solid var(--sys-outline);
  color: var(--sys-on-surface);
  border-radius: var(--radius-default);
  box-shadow: none;
}

/* Ensure all native form elements get proper colors in dark mode */
select.form-control,
select,
input,
textarea {
  background-color: var(--sys-surface);
  color: var(--sys-on-surface);
}

select.form-control option,
select option {
  background-color: var(--sys-surface);
  color: var(--sys-on-surface);
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"] {
  background-color: var(--sys-surface);
  color: var(--sys-on-surface);
}

input::placeholder {
  color: var(--sys-on-surface-variant);
}

.form-control:focus {
  border-color: var(--sys-secondary);
  box-shadow: 0 0 0 2px rgba(255, 85, 0, 0.2);
  outline: 0;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--sys-surface-container-low);
  color: var(--sys-on-surface-variant);
}

.form-control-label,
label {
  color: var(--sys-on-surface);
}

.input-group-addon {
  background-color: var(--sys-surface-container);
  border-color: var(--sys-outline);
  color: var(--sys-on-surface);
}

.has-error .form-control {
  border-color: var(--sys-error);
  box-shadow: none;
}

.has-error .form-control:focus {
  border-color: var(--sys-error);
  box-shadow: 0 0 0 2px rgba(211, 24, 28, 0.2);
}

.has-error .help-block,
.has-error .control-label {
  color: var(--sys-error);
}

.help-block {
  color: var(--sys-on-surface-variant);
}

/* ==========================================================================
   F. MODALS
   ========================================================================== */

.modal-content {
  background-color: var(--sys-surface);
  border: 1px solid var(--sys-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--sys-scrim);
}

.modal-header {
  border-bottom-color: var(--sys-outline-variant);
}

.modal-header .modal-title {
  color: var(--sys-on-surface);
}

.modal-body {
  color: var(--sys-on-surface);
}

.modal-footer {
  border-top-color: var(--sys-outline-variant);
  background-color: var(--sys-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-backdrop.in {
  opacity: 0.5;
}

button.close {
  color: var(--sys-on-surface);
  opacity: 0.6;
  text-shadow: none;
}

button.close:hover,
button.close:focus {
  color: var(--sys-on-surface);
  opacity: 1;
}

/* ==========================================================================
   G. ALERTS
   ========================================================================== */

.alert {
  border-radius: var(--radius-default);
  text-shadow: none;
  box-shadow: none;
  background-image: none;
}

.alert-info {
  background-color: var(--sys-information-container);
  border-color: var(--sys-information);
  color: var(--sys-on-information-container-text);
}

.alert-danger {
  background-color: var(--sys-error-container);
  border-color: var(--sys-error);
  color: var(--sys-on-error-container-text);
}

.alert-warning {
  background-color: var(--sys-warning-container);
  border-color: var(--sys-warning);
  color: var(--sys-on-warning-container-text);
}

.alert-success {
  background-color: var(--sys-success-container);
  border-color: var(--sys-success);
  color: var(--sys-on-success-container-text);
}

/* ==========================================================================
   H. JUMBOTRON & PAGE HEADERS
   ========================================================================== */

.jumbotron {
  background-color: var(--sys-surface);
  color: var(--sys-on-surface);
  border-radius: var(--radius-lg);
}

.jumbotron h1,
.jumbotron h2,
.jumbotron p {
  color: var(--sys-on-surface);
}

.page-header {
  border-bottom-color: var(--sys-outline-variant);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sys-on-background);
}

.lead {
  color: var(--sys-on-background-variant);
}

/* ==========================================================================
   I. PANELS & WELLS
   ========================================================================== */

.panel {
  background-color: var(--sys-surface);
  border-color: var(--sys-outline-variant);
  box-shadow: none;
}

.panel-default > .panel-heading {
  background-color: var(--sys-surface-container);
  background-image: none;
  border-color: var(--sys-outline-variant);
  color: var(--sys-on-surface);
}

.panel-default > .panel-footer {
  background-color: var(--sys-surface-container-low);
  border-color: var(--sys-outline-variant);
}

.well {
  background-color: var(--sys-surface-container-low);
  background-image: none;
  border-color: var(--sys-outline-variant);
  box-shadow: none;
}

/* ==========================================================================
   J. LABELS & BADGES
   ========================================================================== */

.label-default {
  background-color: var(--sys-surface-container);
  color: var(--sys-on-surface);
}

.label-primary {
  background-color: var(--sys-primary);
  color: var(--sys-on-primary);
}

.label-success {
  background-color: var(--sys-success);
  color: var(--sys-on-success);
}

.label-info {
  background-color: var(--sys-information);
  color: var(--sys-on-information);
}

.label-warning {
  background-color: var(--sys-warning);
  color: var(--sys-on-warning);
}

.label-danger {
  background-color: var(--sys-error);
  color: var(--sys-on-error);
}

.badge {
  background-color: var(--sys-secondary);
  color: var(--sys-on-secondary);
}

/* ==========================================================================
   K. UTILITY TEXT CLASSES
   ========================================================================== */

.text-primary {
  color: var(--sys-primary);
}

.text-success {
  color: var(--sys-success);
}

.text-danger {
  color: var(--sys-error);
}

.text-warning {
  color: var(--sys-warning);
}

.text-info {
  color: var(--sys-information);
}

.text-muted {
  color: var(--sys-on-surface-variant);
}

/* Background utility classes */
.bg-danger {
  background-color: var(--sys-error-container);
  color: var(--sys-on-error-container-text);
}

.bg-success {
  background-color: var(--sys-success-container);
  color: var(--sys-on-success-container-text);
}

.bg-warning {
  background-color: var(--sys-warning-container);
  color: var(--sys-on-warning-container-text);
}

.bg-info {
  background-color: var(--sys-information-container);
  color: var(--sys-on-information-container-text);
}

.bg-primary {
  background-color: var(--sys-primary);
  color: var(--sys-on-primary);
}

/* ==========================================================================
   L. THIRD-PARTY PLUGIN OVERRIDES
   ========================================================================== */

/* Datepicker */
.datepicker {
  background-color: var(--sys-surface);
  color: var(--sys-on-surface);
  border-radius: var(--radius-default);
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background-color: var(--sys-primary);
  background-image: none;
  color: var(--sys-on-primary);
  text-shadow: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background-color: var(--sys-surface-container);
  background-image: none;
  color: var(--sys-on-surface);
}

.datepicker table tr td:hover,
.datepicker table tr td span:hover {
  background-color: var(--sys-surface-container-low);
}

/* Autocomplete (overrides customers.css / sbg_admin_users.css / subscriptions.css) */
.autocomplete-suggestions {
  border: 1px solid var(--sys-outline);
  background: var(--sys-surface);
}

.autocomplete-selected {
  background: var(--sys-surface-container);
}

.autocomplete-suggestions strong {
  color: var(--sys-information);
}

.autocomplete-group strong {
  border-bottom: 1px solid var(--sys-outline);
}

/* Bootstrap Multiselect */
.multiselect-container > li > a {
  color: var(--sys-on-surface);
}

.multiselect-container > li > a:hover,
.multiselect-container > li > a:focus {
  background-color: var(--sys-surface-container);
  color: var(--sys-on-surface);
}

.multiselect-container > li > a > label {
  color: var(--sys-on-surface);
}

/* ==========================================================================
   M. GLYPHICONS
   ========================================================================== */

.glyphicon {
  color: inherit;
}

/* ==========================================================================
   N. MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  /* Force containers to full width on mobile */
  .container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Prevent anything from overflowing the viewport */
  body {
    overflow-x: hidden;
  }

  /* Make all tables horizontally scrollable */
  .jumbotron,
  .panel-body,
  .alert {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce table font size on mobile */
  .table {
    font-size: 13px;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 6px;
  }

  /* Reduce jumbotron padding on mobile */
  .jumbotron {
    padding: 12px;
  }

  .jumbotron h2 {
    font-size: 20px;
  }
}