/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */

// Prevent Bootstrap Upgrading errors
@import "../bootstrap/less/variables.less";

// Bootstrap mixins
@import "../bootstrap/less/mixins.less";

// T3 Base variables
@import "variables.less";

// T3 Base mixins
@import "mixins.less";



// TEMPLATES OPTIONS FORM
// ------------------------------
.com_config,
.com_content.layout-edit .edit.item-page,
.layout-modal .contentpane {
  // Form elements
  // -------------
  .btn {
    border-radius: 5px;
    padding: 8px 16px;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"] {
    box-shadow: none;
    border-radius: 5px;
    padding: 0 12px;
    height: 40px;
    line-height: 40px;

    &:focus {
      border-color: #ccc;
    }
  }

  textarea {
    border: 1px solid #ddd;    
    border-radius: 5px;
    box-shadow: none;

    &:focus {
      box-shadow: none;
      border: 1px solid #ccc;
    }
  }

  select {
    border-radius: 5px;
    height: auto;
    padding: 8px;
  }

  .field-calendar {
  }

  .input-group {
    .btn {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}



// TEMPLATES OPTIONS FORM
// ------------------------------
.com_config #templates-form {
  .tip {
    background: @well-bg;
    padding: (@padding-base-vertical * 2) @padding-base-horizontal;
  }

  textarea {
    height: auto;
    width: auto;
    min-height: 100px;
    min-width: 50%;
  }

  .input-append,
  .input-prepend {
    .add-on {
      width: 35px;
    }

    input {
      display: inline-block;
    }

    .btn {
      border: 1px solid @btn-default-border;
    }
  }

  // Hiding useless elements
  .t3-admin-form-legend {
    display: none;
  }

  // Expand the grid
  .row-fluid .span6 {
    width: 100%;
  }

  @media (min-width: 768px) {
    .control-group .control-label {
      width: 250px;
    }
    .control-group .controls {
      margin-left: 280px;
    }
  }

}


//
// MODULES OPTIONS FORM
// ---------------------------------------------------------
.com_config.view-modules {
  #options {
    .accordion-item {
      background-color: rgba(255,255,255,1);
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 8px;
    }

    .accordion-header {
      font-size: 18px;
      margin: 0;
      padding: 16px;
      line-height: 1;

      .accordion-button {
        background: transparent;
        border: 0;
        padding: 0;
        text-align: left;
        width: 100%;
      }
    }

    .accordion-body {
      border-top: 1px solid #ddd;
      padding: 24px;

      .nav-tabs {
        background: transparent;
      }
    }
    
  }
}

.com_config #modules-form {
  .input-append,
  .input-prepend {
    .add-on {
      width: 35px;
    }

    input {
      display: inline-block;
    }

    .btn {
      border: 1px solid @btn-default-border;
    }
  }

  // Accordion group
  // ---------------
  .accordion-group {
    margin-bottom: 20px;

    .accordion-heading {
      .accordion-toggle {
        border: 1px solid #ddd;
        border-radius: 5px 5px 0 0;
        color: #428bca;
        display: block;
        padding: 10px;
        outline: none;

        &.collapsed {
          border-radius: 5px;
          color: #666;
        }
      }
    }

    .accordion-body {
      border: 1px solid #ddd;
      border-top: 0;
      border-radius: 0 0 5px 5px;
      padding-top: 20px;

      .nav-tabs {
        border-bottom: 0;
      }
    }

  }

  // Fix for K2 module
  // -----------------
  .radio input[type="radio"] {
    margin-left: 0;
    position: relative;
  }

  .radio label {
    padding-left: 5px;
    padding-right: 20px;
  }
}

.controls select {
  vertical-align: middle;
  width: 220px;
}

//
// EDIT & SUBMIT ARTICLE FORM
// ---------------------------------------------------------
.edit {

  fieldset {
  }
  
  fieldset legend {
  }
  
  label {
  }

  .inputbox, input[type="text"],
  select.inputbox, select {
    @media (min-width: @screen-sm) {
      width: 250px;
    }
  }

  textarea {
    width: 100%;
  }

  .input-append,
  .input-prepend {
    display: block;
    width: auto;
    @media (min-width: @screen-sm) {
      input[type="text"],
      input.inputbox {
        display: inline-block;
        width: 210px;
      }
    }

    .btn {
      border: 1px solid @btn-default-border;
      background-color: @btn-default-bg;
    }
  }

}

// Extrafield
// -----------------------
.edit.item-page,
.profile-edit {
  #jform_com_fields_checkboxs {
    label.checkbox {
      display: inline-block;
      margin-right: 10px;
    }

    input[type="checkbox"] {
      margin-left: 0;
      margin-top: -2px;
      position: relative;
      vertical-align: middle;
      width: auto;
    }
  }

  .minicolors-input {
    height: 28px;
    width: auto;
  }

  .chzn-container {
    .chzn-search {
      .clearfix();
    }
  }
}

// Edit profile
// -----------------------
.profile-edit {
  #jform_com_fields_user_checkbox {
    label.checkbox {
      display: inline-block;
      margin-right: 10px;
    }

    input {
      position: relative;
      margin-left: 0;
      margin-right: 5px;
      width: auto;
    }
  }

  .minicolors-input {
    height: 28px;
    width: auto;
  }

  #jform_com_fields_user_image_chzn {
    .chzn-search {
      box-sizing: border-box;
    }

    ul.chzn-results {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      width: 100%;
    }
  }

  #jform_com_fields_user_calendar {
    float: left;
  }

  .chzn-container-single,
  .chzn-container {
    float: left;
    margin-right: 10px;

    @media screen and (max-width: 360px) {
      width: 100% !important;
    }

    .chzn-drop {
      box-sizing: border-box !important;
    }
  }
}


// User profile
// ----------------------
.profile {
  #users-profile-core {
    width: 100%;
  }

  .dl-horizontal {
    dd {
      margin-bottom: 10px;
      border-bottom: 1px dashed #ddd;
      padding-bottom: 10px;

      img {
        max-width: 100%;
      }
    }
  }
}


// Tabs
// -----------------------
.edit {
  .nav-tabs {
    margin-bottom: @t3-global-margin;
  }
  .tab-pane {
    .clearfix();
  }
}


// Editor Buttons
// ----------------------
#editor-xtd-buttons,
.toggle-editor {
  margin-top: @line-height-computed;
  margin-bottom: @line-height-computed;
  .btn {
    background-color: @btn-default-bg;
    text-shadow: 0 1px 0 #fff; 
    border-color: @btn-default-border;
  }
}

#editor-xtd-buttons {
  margin-right: @grid-gutter-width;
}



// 
// FRONTEDIT ELEMENTS 
// ---------------------------------------------------------

// Window Wrapper
// ---------------------------------------
#sbox-window {
  padding: 0;
  .box-sizing(content-box); // Reset Box-Sizing model

  // With shadow
  &.shadow {
  }

  // Content
  #sbox-content {
  }

  .sbox-content-iframe {
  }

}

// Close Button
#sbox-btn-close {
}

// Overlay Layer
#sbox-overlay {
}


// Frontend Edit Button
// ---------------------------------------
.btn.jmodedit {
  padding: 0;
  &:focus, &:active {
    box-shadow: none;
  }
}

.jfedit-menu + .tooltip {
  min-width: 100px;
}


// Frontend Edit Elements
// ---------------------------------------
.window {

  // Form Table
  // ----------
  form table {
    border: 1px solid @table-border-color;
    background: @table-bg-accent;
    margin-bottom: @line-height-computed;
    td {
      padding: @table-cell-padding;
    }
  }

  // Form Help Block
  // ---------------
  form .help-block {
    font-size: @font-size-small;
    clear: both;
    padding-top: 5px;
  }

  &.view-modules {

    .well {
      .control-label {
        display: inline-block;
      }

      .controls {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
      }
    }

    .control-group:after {
      content: "";
      clear: both;
      display: table;
    }

    #filter-bar {
      margin-bottom: 10px;

      .btn-group button {
        margin-top: 0;
      }
    }
  }

}

.com_config.view-modules .btn-group {
  label {
    float: left;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


// Media Manager
// -------------
.window {

  // Main Form
  #imageForm {
    margin: 0;
    width: auto;

    .chzn-container {
      float: left;
    }

    #upbutton {
      border: 1px solid @btn-default-border;
      float: left;
      padding: 3px 12px;
      margin-left: 5px;
    }

    .pull-right {
      margin-right: @grid-gutter-width;
    }

    .well {
      &:after {
        display: table;
        content: "";
        clear: both;
      }
    }

  }

  // Upload Form
  #uploadForm {
    width: auto;

    #upload-file {
      margin: 10px 0;
    }
  }

 
  // Images Choser Iframe
  #imageframe {
  }

  .manager {
    margin: 0;
    padding: 0;
    .clearfix();
    .thumbnail {
      float: left;
      margin-right: 10px;
      margin-left: 10px;
    }
  }

// End
}


// Insert Article
// --------------
.window.view-articles {
  .filter {
    overflow: visible;

    .btn-toolbar {
      .icon-remove,
      .icon-search {
        margin-right: 5px;
      }
    }
  }

  .filters {
    float: none !important;

    .chzn-container {
      display: inline-block;
    }

    .chzn-drop input {
      float: none;
    }
  }
}


//
// Special Radio Styles for T3
// ------------------------------
.t3onoff {
  border: 1px solid #aaa;
  border-radius: 0;
  display: block;
  height: 30px;
  overflow: hidden;
  padding: 0;
  position: relative;
  white-space: nowrap;
  width: 90px;

  input[type=radio] {
    display: none;
  }

  label {
    width: 90px;
    height: 30px;
    overflow: hidden;
    display: block;
    border-radius: 0;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
    text-transform: uppercase;
    background: url(../imgs/blank.gif) no-repeat transparent;
    text-indent: -999em;
  }

  /* use before as background */
  label:before,
  label:after {
    display: block;
    position: absolute;
    top: 0;
    border-radius: 0;

    .transition(all 250ms);
  }

  label:before {
    content: "ON";
    width: 100%;
    height: 100%;

    text-indent: 0;
    color: white;
    padding: 4px 18px;
    font-weight: normal;
  }

  /* use after as switch */
  label:after {
    content: "";
    width: 40%;
    height: 100%;
    background: #fff;
  }

  label.off:before {
    content: "OFF";
    text-align: right;
    color: #555;
  }

  /* active label should be under => so inactive can be clickable */
  label.active {
    z-index: 0;
  }

  /* off background */
  label.off:before {
    background: #eee;
    left: 100%;
  }

  label.off.active:before {
    left: 0%;
  }

  label.on:before {
    background: #690;
    left: -100%;
  }

  label.on.active:before {
    left: -0%;
  }

  /* off switch */
  label.off:after {
    left: 60%;
  }

  label.off.active:after {
    left: 0%;
  }

  label.on:after {
    left: 0%;
  }

  label.on.active:after {
    left: 60%;
  }
}

/* radio btn group */
fieldset.radio.btn-group {
  padding: 0;

  input {
    display: none;
  }

  label {
    display: inline-block;
    min-width: 54px;
    padding: 0 12px;
    border: 1px solid #aaa;
    line-height: 28px;
    background: #eee;
    color: #555;
    border-radius: 0;
    text-align: center;
    border-right-width: 0px;
    text-transform: uppercase;

    &:last-child {
      border-right-width: 1px;
    }

    &.active {
      background: #690;
      border-color: #5c8b00;
      color: #fff;
    }
  }
}

// Frontend Edit Insert module
// ---------------------------------------
.window.view-modules,
.window.view-articles,
.window.view-contacts,
.window.view-fields,
.window.view-items {
  .js-stools {
    margin-bottom: 20px;

    .btn {
      border: 1px solid #ccc;
      margin-top: 0;
    }

    .input-append .btn {
      border-left: 0;
    }

    input {
      display: inline-block;
    }
  }

  .js-stools-container-filters {
    .chzn-container-single {
      width: 220px !important;
    }

    .chzn-drop {
      box-sizing: border-box !important;
    }
  }

  table#moduleList {
    td .label {
      background-color: #999;
      box-sizing: border-box;
      border-radius: 3px;
      display: inline-block;
      font-weight: normal;
      font-size: 100%;
      padding: 10px;
      width: 100%;
    }
  }

  table#moduleList td:nth-child(1) {
    vertical-align: middle;
  }

  .icon-publish {
    &:before {
      content: "\f00c";
      font-size: 16px;
    }
  }
}


//
// LEGACY
// -----------------------------------------------------------

// Fix for missing icons
// because of the change from Font Awesome 3 to Font Awesome 4
// -----------------------------------------------------------
.icon-eye-open:before,
.icon-eye:before {
  content:"\f06e";
  font-family: "FontAwesome";
}

.icon-file-add:before {
  content:"\f0f6";
  font-family: "FontAwesome";
}

.icon-cancel:before {
  content:"\f00d";
  font-family: "FontAwesome";
}

.icon-publish {
  &:before {
    content: "\f00c";
  }
}

.icon-unpublish {
  &:before {
    content: "\f00d";
  }
}

.icon-featured {
  &:before {
    content: "\f005";
  }
}

.icon-unfeatured {
  &:before {
    content: "\f005";
  }
}


// Legacy class for Joomla 2.5
// ---------------------------
.button2-left,
.button2-left div {
  float: left;
}

.button2-right,
.button2-right div {
  float: right;
}

.button2-left {
  margin: 5px 5px 0 0;
}

.button2-right {
  margin: 5px 0 0 5px;
}

.button2-left a,
.button2-right a,
.button2-left span,
.button2-right span {
  background: @gray-lighter;
  border: 1px solid darken(@gray-lighter, 5%);
  color: @gray-light;
  cursor: pointer;
  display: block;
  float: left;
  padding: 2px 10px;
  border-radius: @border-radius-base;
}

.button2-left span,
.button2-right span {
  color: @gray-light;
  cursor: default;
}

.button2-left .page a,
.button2-right .page a,
.button2-left .page span,
.button2-right .page span {
  padding: 0 6px;
}

.button2-left a:hover,
.button2-right a:hover {
  background: darken(@gray-lighter, 5%);
  color: @gray-dark;
  text-decoration: none;
}

.edit.item-page a.modal,
.com_config form a.modal {
  display: inline-block;
  position: inherit;
  width: auto !important;
  top: auto !important;
  overflow: hidden;

  &.btn {
    background: @btn-default-bg;
    text-shadow: 0 1px 0 #fff; 
    border-color: @btn-default-border;
    overflow: hidden;
  }
}


// Calendar Button
.controls img.calendar {
  cursor: pointer;
  margin-left: 5px;
}

// Break page layout
// -----------------
.layout-pagebreak {
  .form-horizontal .control-group .controls {
    margin-left: 0;
  }
}

// View history
// ------------
[class^="icon-"], [class*=" icon-"] {
  font-family: FontAwesome3 !important;
}

.view-history .btn-group {
  margin-bottom: 10px;
}

.btn [class^="icon-"],
.btn [class*=" icon-"] {
  margin-right: 5px;
}

.btn span.icon-delete {
  &:before {
    content: "\f057";
    display: inline-block;
    height: 16px;
    width: 16px;
    color: #333;
  }
}

// Fix modal in joomla 3.9
body.modal-open {
  .modal.hide {
    background-color: #fff;
    display: block !important;
    left: auto;
    right: auto;
    top: 0;
    bottom: auto;
    transform: translateY(50%);
    z-index: 1050;

    .iframe {
      border: 1px solid #ddd;
    }
  }
}

// Media Folder List
.thumbnails-media .imgFolder span {
  line-height: 70px;
}


// JOOMLA 4 COMPATIBLE
// --------------------------------
.j4 joomla-tab {
  margin-bottom: @t3-global-margin;
}

 .j40 joomla-tab-element {
  margin-bottom: @t3-global-margin;
}

 ul.chosen-results {
  clear: both;
}