@import "../../config.less";

/* Responsive styles */
@media (max-width: @TabletBreakpoint) {
    .cm-clone.hidden {
        display: none !important;
    }
    .hidden-phone {
        display: none !important;
    }
}

// wide-width + mainSidebarThinWidth + 50px
@media (max-width: 1240px + 50px + 50px) {
    .dashboard-card-content h3 {
        font-size: 18px;
        line-height: 2.2em;
    }
    .dashboard-recent-orders {
        min-width: auto;
    }
    .payments .controls select,
    .shippings .controls select {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .dashboard {
        display: block;
    }
    .dashboard-card-table {
        text-align: center;
        tr {
            display: block;
            td {
                display: inline-block;
                float: left;
                margin: 0 2% 0 0;
                padding: 0;
                width: 32%;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
    }
    .dashboard-row {
        float: none;
        .dashboard-recent-orders.tabs,
        .dashboard-statistics {
            display: block;
            float: none;
            margin-bottom: 20px;
            max-width: auto;
            min-width: auto;
            width: 100%;
        }
        .dashboard-statistics-chart {
            >div {
                display: inline-block;
                width: auto;
            }
        }
    }
    .dashboard-table-order-by-statuses,
    .dashboard-activity {
        display: block;
        float: none;
        width: 100%;
        min-width: auto;
        margin-bottom: 20px;
    }
    .dashboard-row-bottom {
        float: none;
    }
    .pagination-wrap .pagination {
        text-align: center;
        margin: 10px 0 0 0;
        &-dropdown {
            text-align: center;
            margin: 10px 0 0 0;
        }
    }
    .pagination-desc {
        width: 100%;
        text-align: center;
        margin: 0 0 15px 0;
    }
    .control-group {
        .control-label {
            display: inline-block;
            float: none;
            width: auto;
            padding: 0;
            text-align: left;
            &.cm-required {
                display: inline-block;
                padding-right: 10px;
                background-position: right 4px;
            }
        }
        .controls {
            float: none;
            width: auto;
            margin: 0;
        }
    }
    .form-edit {
        .control-group {
            border-bottom: 1px solid #ededed;
            margin-bottom: 0;
            padding: 18px 10px;
            label:not(.switch-mini) {
                margin-right: 5px;
            }
            &.shift-top {
                border-bottom: none;
            }
            &:last-child {
                border-bottom: none;
            }
        }
        &.order-info-form .control-group {
            border-bottom: none;
            margin-bottom: 5px;
            padding: 3px 0;
            label {
                margin-right: 0;
            }
        }
    }
    .alert {
        max-width: none;
    }
    .product-code {
        margin-top: 0;
    }
    .table {
        .hidden-tools {
            visibility: visible;
        }
        .input-hidden {
            border-color: #eee;
        }
    }
    .dropdown-menu {
        >li>a {
            padding: 6px 20px;

            label {
                overflow-x: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    #order_update {
        display: block;
        .right {
            text-align: left !important;
        }
    }
    .statistic .totals {
        margin-bottom: 0;
    }
    fieldset {
        min-width: 0;
    }
    .shipping-flag {
        display: block;
        float: none;
        margin: 0;
        .shipping-flag-title {
            display: block;
            padding: 0;
        }
    }
    input,
    textarea,
    .uneditable-input {
        width: 100%;
    }
    a.row-status:not([class*="--text-wrap"]) {
        min-width: 150px;
        display: block;
    }
    :not(table) a.row-status:not([class*="--text-wrap"]) {
        min-width: 0;
        display: inline-block;
    }
}

@media (max-width: 800px) {
    .ufa .object-container .redactor-box {
        width: auto;
    }
}

@media (max-width: @TabletBreakpoint + 1px) {
    .mobile-hide {
        display: none !important;
        visibility: hidden;
    }
    .dashboard-cards {
        .dashboard-card {
            float: left;
            width: 48.5%;
            margin: 0 3% 3% 0;
            &:nth-child(3n) {
                margin-right: 3%;
            }
            &:nth-child(2n) {
                margin-right: 0;
            }
            .dashboard-card-content {
                min-height: 54px;
            }
        }
    }
    .pagination {
        flex-grow: 1;
        ul {
            .box-shadow(none);
            width: 100%;
        }
        ul>li {
            >a,
            >span {
                width: 100%;
            }
            &:last-child {
                >a,
                >span {
                    margin-right: 0;
                }
            }
        }
        &.pagination-start ul>li:last-child>a {
            .border-left-radius(@baseBorderRadius);
            border-left-width: 1px;
        }
        &.pagination-end ul>li:first-child>a {
            .border-right-radius(@baseBorderRadius);
        }
    }
    .pagination-wrap .pagination-dropdown {
        min-width: 33%;
        max-width: 67%;
        .btn-group {
            .box-shadow(none);
            width: 100%;
        }
        &-total {
            display: block;
            &+.divider {
                display: block;
            }
        }
    }
    select {
        width: 100%;
        max-width: 220px;
    }
    .object-product-add select {
        max-width: none;
    }
    .adv-search {
        table {
            tr {
                display: block;
                td {
                    display: block;
                }
            }
        }
        .group {
            .controls {
                input[type="text"] {
                    width: 100% !important;
                }
                select {
                    width: 100%;
                }
            }
        }
    }
    /* Spans */
    .row {
        margin-left: 0 !important;
    }
    .span1,
    .span2,
    .span3,
    .span4,
    .span5,
    .span6,
    .span7,
    .span8,
    .span9,
    .span10,
    .span11,
    .span12 {
        && {
            width: 100%;
            margin-left: 0;
        }
    }
    .export-save-layout .span6 {
        width: 48.936170212766% !important;
        margin-left: 2.1276595744681% !important;
        &:first-child {
            margin-left: 0 !important;
        }
    }
    /* /Spans */
    .post-item {
        .tools {
            >.pull-left,
            .post__statuses,
            >.pull-right {
                float: none;
            }
            .post-object {
                display: -webkit-box;
                margin: 5px 0;
                width: auto;
                height: auto;
                max-height: 60px;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            .muted {
                float: none !important;
                margin: 5px 0;
            }
            .calendar {
                margin: 10px 0;
            }
        }
    }
    .ui-dialog {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        top: 0px !important;
        .form-inline {
            label {
                display: block;
                margin-top: 15px;
                &:first-child {
                    margin-top: 5px;
                }
            }
        }
    }
    .alert-wrap {
        left: 6px;
        max-width: none;
    }
    .modal-footer {
        .pull-left {
            margin-top: 7px;
            margin-bottom: 7px;
            text-align: left;
        }
        .pull-right {
            margin-top: 7px;
            margin-bottom: 7px;
        }
    }
    .signin-modal .modal-footer .pull-right {
        margin-top: 0;
        margin-bottom: 0;
    }
    .object-container .form-edit .input-large {
        width: auto !important;
    }
    .controls {
        .nowrap {
            white-space: normal;
        }
        .form-inline label {
            display: block;
        }
    }
    .store-mode>li {
        width: 100%;
        min-height: 180px;
        margin-bottom: 20px;
    }
    .order-notes.statistic {
        .totals-label {
            display: none;
        }
        table {
            float: none;
            width: 100%;
            tr,
            td {
                text-align: left;
            }
            tr {
                margin-bottom: 10px;
                padding-bottom: 10px;
                &:last-child {
                    border-bottom: 0;
                }
            }
        }
    }
    .themes {
        #theme_image {
            text-align: center;
        }
        .screenshot {
            max-width: 330px;
        }
        .theme-subtitle {
            .label {
                float: none;
            }
        }
        .themes-list {
            text-align: center;
        }
        .themes-available {
            .theme {
                display: inline-block;
                float: none;
            }
        }
    }
}

/* Responsive tables */
// (Main menu + Gap + Min content + Gap) - 1px
// (240px + 16px + (16px + 729px + 16px) + 16px) - 1px = 1032px
// where: 729px = 768px - (5px + 15px + 15px + 5px) + 1px. Table width before admin panel redesign
@media (max-width: 1032px) {
    .table-responsive.order-management-products {
        padding-top: 0;
        padding-bottom: 0;
        .order-management {
            &-product-check {
                display: none;
            }
            &-options-desktop {
                display: none;
            }
            &-options-mobile {
                display: inherit;
            }
            &-options-content {
                border-top: none;
                padding: 0;
                td {
                    margin-top: 0;
                    margin-bottom: 0;
                    &:before {
                        display: none;
                    }
                }
                .product-options {
                    padding: 0.5em;
                }
                .control-group {
                    margin-bottom: 1em;
                    .control-label {
                        float: left;
                        width: 38%;
                        padding-top: 10px;
                    }
                    .controls {
                        width: 62%;
                        display: inline-block;
                    }
                }
            }
            &-price-check {
                width: 38% !important;
                float: left;
                &-checkbox {
                    margin-top: 4px;
                    margin-right: 10px;
                }
                &:before {
                    width: 100%;
                }
            }
            &-price {
                width: 38% !important;
                float: left;
                &:before {
                    width: 0;
                    padding-right: 0;
                }
            }
            &-delete {
                margin-left: 15px;
            }
        }
        .mixed-controls {
            margin-bottom: 0;
            &:before {
                display: none;
            }
        }
    }

    .table-responsive {

        display: block;
        padding: 1em 0;
        min-width: 100%;

        &--nopadding {
            padding: 0;
        }

        &--nopadding td {
            margin: 0;
        }

        &.table-tree {
            tr,
            tr:first-child {
                border-top: 1px solid #ededed;
                padding: 0;
            }
            &:first-child {
                tr {
                    border-top: 0;
                }
            }
        }
        tbody {
            display: block;
            tr {
                display: block;
                border-top: 1px solid #ededed;
                padding: 0.5em;
                &:first-child {
                    border-top: 0;
                }
                &:hover {
                    background-color: @tableBackgroundHover;
                    td {
                        background-color: transparent;
                    }
                }
                &.hidden {
                    display: none;
                }
            }
            &.hidden {
                display: none;
            }
        }
        thead,
        th {
            display: none;
        }
        td {
            display: table;
            width: 100% !important;
            border: 0;
            text-align: left !important;
            margin: 1em 0;
            /*&.center {
                text-align: center !important;
            }*/
            &:before {
                display: table-cell;
                content: attr(data-th);
                font-weight: bold;
                width: 38%;
                padding-right: 2%;
                text-align: left;
                vertical-align: top;
            }
            &[data-th=''] {
                &:before {
                    display: none;
                }
            }
            span:not(.label):not(.label-info):not(.switch-mini) {
                padding: 0 !important;
            }
            &:empty {
                display: none;
            }
            .pull-right {
                float: none;
            }
            .right {
                text-align: left !important;
            }
            &.nowrap:before {
                white-space: normal;
            }
        }
        .btn-info {
            margin-left: 0;
        }
        .text-over {
            padding: 0 !important;
            white-space: normal;
        }
        &.table-responsive-w-titles {
            td {
                &:before {
                    display: none;
                }
                .dropleft .dropdown-menu {
                    left: 0;
                    right: auto;
                }
            }
        }
        &.table-group {
            .table-group-header {
                font-size: 115%;
                font-weight: bold;
            }
        }
        .handler {
            width: 100%;
            margin-left: 0;
        }
        &.table-striped tbody>tr:nth-child(odd)>td,
        &.table-striped tbody>tr:nth-child(odd)>th {
            background-color: transparent;
        }
    }
    th,
    td {
        text-align: left;
    }
    .items-container.multi-level,
    .table-tree.table-responsive {
        >div {
            padding-left: 15px;
            margin-bottom: 15px;
            border-left: 1px solid #ededed;
        }
    }
}
/* /Responsive tables */

@media (max-width: @PhoneBreakpoint) {
    .attach-images {
        .image-wrap {
            float: none;
            margin-bottom: 15px;
        }
        .image-upload {
            margin-left: 0;
        }
    }
}

@media (max-width: 400px) {
    .dashboard-cards {
        .dashboard-card {
            width: 100%;
            margin: 0 0 15px 0;
        }
    }
}

@media (max-width: @PhoneBreakpoint) {
    .dropdown-menu .divider {
        width: 100% !important;
        padding: 0;
        margin: 0 !important;
    }
}

@media (max-width: @TabletBreakpoint) {
    .tools .hidden-tools a {
        visibility: visible !important;
    }
    .post-item {
        .tools {
            .calendar {
                display: block;
            }
        }
    }
}

/* /Responsive styles */
