/******************************************************************************
  Bootstrap 3 / SmartAdmin custom breakpoint override
  Goal:
    - >= 1200px : "normal / desktop" view (NOT xs)
    - < 1200px  : behave like XS for *visibility helpers* (visible-xs / hidden-xs)
    - ALSO: you requested "visible-sm should be triggered if > 1200"

  IMPORTANT:
    - This is CSS. Do NOT put this in the SmartAdmin JS file.
    - Put this in a CSS file that loads AFTER bootstrap.css / smartadmin.css
      e.g. custom.css at the very end.

  Notes:
    - Bootstrap's visibility utilities are hard-coded to 4 breakpoints (xs/sm/md/lg).
      This overrides their behavior so "xs" means <1200, and "sm" means >=1200.
    - If you also want the GRID to stack like xs under 1200, see the optional section.
******************************************************************************/

/* ============================================================================
   1) UNDER 1200px: treat it like XS
   - visible-xs shows
   - hidden-xs hides
   - visible-sm/md/lg do NOT show
   ========================================================================== */
@media (max-width: 1199px) {

    /* --- Show visible-xs (all variants) --- */
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs, td.visible-xs {
        display: table-cell !important;
    }

    .visible-xs-inline {
        display: inline !important;
    }

    .visible-xs-inline-block {
        display: inline-block !important;
    }

    /* --- Hide hidden-xs (baseline) --- */
    .hidden-xs {
        display: none !important;
    }

    .hidden-xs-inline {
        display: none !important;
    }

    .hidden-xs-inline-block {
        display: none !important;
    }

    /* --- Make sure visible-sm/md/lg are OFF under 1200 --- */
    .visible-sm,
    .visible-md,
    .visible-lg,
    table.visible-sm,
    table.visible-md,
    table.visible-lg,
    tr.visible-sm,
    tr.visible-md,
    tr.visible-lg,
    th.visible-sm, td.visible-sm,
    th.visible-md, td.visible-md,
    th.visible-lg, td.visible-lg,
    .visible-sm-inline,
    .visible-md-inline,
    .visible-lg-inline,
    .visible-sm-inline-block,
    .visible-md-inline-block,
    .visible-lg-inline-block {
        display: none !important;
    }

    /* =========================================================================
     OPTIONAL GRID BEHAVIOR (<1200):
     If you want any md/lg columns to collapse to full-width under 1200,
     uncomment this block.
     (Leave it commented if you ONLY want visibility behavior, not layout.)
     ======================================================================= */
    /*
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: none;
    width: 100%;
  }

  * Optional: kill offsets/push/pull so nothing stays shifted *
  [class*="col-md-offset-"],
  [class*="col-lg-offset-"],
  [class*="col-md-push-"],
  [class*="col-md-pull-"],
  [class*="col-lg-push-"],
  [class*="col-lg-pull-"] {
    margin-left: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  */
}


/* ============================================================================
   2) AT / ABOVE 1200px: treat it like "NOT XS"
   - visible-xs hides
   - hidden-xs shows
   - AND: visible-sm should be ON (your request)
   ========================================================================== */
@media (min-width: 1200px) {

    /* --- Hide visible-xs (all variants) --- */
    .visible-xs,
    .visible-xs-inline,
    .visible-xs-inline-block,
    table.visible-xs,
    tr.visible-xs,
    th.visible-xs,
    td.visible-xs {
        display: none !important;
    }

    /* --- Show hidden-xs (all variants) --- */
    .hidden-xs {
        display: block !important;
    }

    .hidden-xs-inline {
        display: inline !important;
    }

    .hidden-xs-inline-block {
        display: inline-block !important;
    }

    table.hidden-xs {
        display: table !important;
    }

    tr.hidden-xs {
        display: table-row !important;
    }

    th.hidden-xs, td.hidden-xs {
        display: table-cell !important;
    }

    /* --- Your rule: visible-sm should trigger when > 1200 (>=1200 here) --- */
    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm, td.visible-sm {
        display: table-cell !important;
    }

    .visible-sm-inline {
        display: inline !important;
    }

    .visible-sm-inline-block {
        display: inline-block !important;
    }

    /* --- Optional: keep md/lg visible too at >=1200 (usually desired) --- */
    .visible-md {
        display: block !important;
    }

    .visible-lg {
        display: block !important;
    }
}

/******************************************************************************
Manual Overrides
******************************************************************************/

/* Make the same "mobile nav-container layout" apply under 1200 instead of 1096 */