// ==========================================================================
// Joomla Isis template specific styling / overrides
// ==========================================================================
//
// Since we're using flexbox we need to override a couple of styles so all divs align perfectly
//
// 1. Set everything to box-sizing: border-box
//
// !!!!!!!!!!
// Warning: When making changes to this file make sure you test the following scenarios:
// - Test all views with the different Isis settings:
//   - Collapse Administrator Menu (yes/no) (especially on mobile)
//   - Display header (yes/no)
//   - Status module position (Top/Bottom)
//   - No need to test "pinned toolbar" since we don't use it anyway
// - Test all views with the (just described) different settings with both JS enabled and JS disabled
// - Test all views with the (just described) different settings both on mobile and desktop views
// !!!!!!!!!!

@import "../../../../../../../../../kodekit-ui/src/scss/admin/core/tools";

body {
  box-sizing: border-box; // 1


  /**
   * Flexbox setup
   * -------------
   * Set Joomla containers to flex and adjust margins and paddings
   * As soon as something in this chain of classnames changes we fall back to non-flexbox view
   */

  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-top: 0 !important;


  /**
   * Basic setup
   * -----------
   * 1. Always remove the toolbar, empty div and header since we are showing this ourselves or don't need it
   * 2. Remove ugly border from header
   * 3. Hide empty div after header
   * 4. Don't hide status bar when placed at top
   * 5. Don't display the unstyled title when header is set to hide in Isis settings
   * 6. Don't display the footer. It's unstyled and only holds copyright info
   */

  .btn-subhead,
  .subhead-collapse,
  .navbar + .header {
    display: none !important; // 1
  }

  header.header {
    border-top: none; // 2
  }

  header.header + div {
    display: none; // 3
  }

  header.header + #status {
    display: block; // 4
  }

  .content-title {
    display: none; // 5
  }

  footer.footer {
    display: none; // 6
  }


  /**
   * Component only
   * ==============
   */

  &.component {
    padding: 0;
  }


  /**
   * The main container
   * ==================
   * 1. Set negative margin for smaller screens
   * 2. And remove on larger screens
   * 3. Do not set with shorthand CSS since we set the bottom margin seprately for the status bar
   * 4. always remove bottom margin
   */

  .container-main {
    margin-left: -20px; // 1 + 3
    margin-right: -20px; // 1 + 3
    padding: 0;
    margin-bottom: 0; // 4

    // Remove negative margin when screen is wide enough
    @include breakpoint(768px) {
      margin-left: 0; // 2 + 3
      margin-right: 0; // 2 + 3
    }

    // Remove top margin by default
    #content .row-fluid .span12 {
      .k-overview {
        margin-top: 0;
      }
    }
  }


  /**
   * Set navbar from fixed to static
   */

  nav.navbar {
    position: static;
  }


  /**
   * Do not flex following items
   */

  nav.navbar,
  header.header,
  .subhead-collapse,
  #status,
  #system-message-container,
  #system-debug {
    flex: 0 0 auto;
  }


  /**
   * The main container
   */

  .container-main {
    display: flex;
    flex: 1 1 auto;
    overflow: auto;


    /**
     * Flex all children of main container
     */

    #content,
    #content .row-fluid,
    #content .row-fluid .span12 {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow: auto;
    }


    /**
     * Remove clearfix psuedo elements
     * Otherwise they'll be treated as 1 pixel flex items
     */

    &:before,
    &:after,
    #content:before,
    #content:after,
    #content .row-fluid:before,
    #content .row-fluid:after {
      display: none;
    }


    /**
     * No longer a fixed position for the statusbar
     * since that doesn't play nice with flexbox
     */

    & + #status {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      box-shadow: none;
    }
  }


  /**
   * Remove spacing and border-radius to align alerts to the side
   */

  #system-message-container {
    padding: 0;

    .alert {
      margin: 0;
      border-radius: 0;
      border-bottom: 1px solid $k-toolbar-border;
      padding: 10px 35px 10px 10px;

      @include rtl {
        padding: 10px 10px 10px 35px;
      }

      h4, p, div {
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }


  /**
   * Remove margin from bootstrap grid item
   */

  .span10 {
    margin: 0;
  }


  /**
   * Joomla removes default focus style, we bring it back
   */

  a:focus {
    outline: auto 5px -webkit-focus-ring-color;
  }


  /**
   * Special debug styling
   */

  div#system-debug {
    margin: 0;
    padding: 0;
    border: none;
    max-height: 36px;
    overflow: hidden;
    transition: all .2s ease;

    &:hover,
    &:focus {
      max-height: 999px;
      overflow: auto;
    }
  }
}
