/* ==========================================================================
   smeta.helloparty.ch — mobile / tablet layer
   Loaded after style.css. Everything below 901px only, the desktop view
   is left exactly as it was.
   ========================================================================== */

/* wrapper around the orders table, see views/main_content.php */
.w_orders_scroll{width:100%;}

/* Up/down buttons for order positions. Hidden by default: with a mouse the drag
   handle is used instead. Shown on narrow screens and on any touch device. */
.move_row{display:none;width:34px;height:34px;margin:0 8px 0 0;background:#53a1d7;
    border-radius:2px;position:relative;cursor:pointer;}
.move_row:before{font-family:"Awesome";color:#fff;display:block;position:absolute;
    top:7px;left:0;width:100%;text-align:center;font-size:17px;}
.move_up:before{content:'\F106';}
.move_down:before{content:'\F107';}

/* On a touch device dragging by the handle fights with page scrolling: touch-punch
   cancels the gesture as soon as the finger lands on the handle, so a flick over the
   handle either scrolls nothing or silently reorders the rows. Hide the handle there
   and reorder with the buttons instead. */
@media (pointer: coarse){
    .form_order .product-rows .w_group .drag-handle{display:none;}
    .form_order .product-rows .move_row{display:block;}
}

/* the drag handle must not start a text selection */
.drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}


@media (max-width: 900px){

/* ---------- general ---------- */
    html{-webkit-text-size-adjust:100%;}
    .outer_wrapper{width:100%;}
    .inner_wrapper,
    .inner_wrapper.big{width:100%;max-width:100%;box-sizing:border-box;}

    /* iOS zooms the page in when a field with font-size < 16px receives focus;
       after that the layout jumps and typing into the field becomes a fight */
    input[type="text"],input[type="password"],textarea,select{font-size:16px;}
    input[type="text"],input[type="password"]{height:38px;}

    /* validation messages: under the field instead of off-screen to the right */
    .w_error{position:static !important;right:auto !important;top:auto !important;
        width:auto !important;max-width:100% !important;margin:6px 0 0 0;}
    .form_error:before{display:none;}

    /* dropdowns of autocomplete / selectmenu / datepicker must stay on screen */
    .ui-autocomplete{max-width:94%;box-sizing:border-box;}
    .ui-autocomplete li,.ui-autocomplete .ui-menu-item a{white-space:normal;word-wrap:break-word;}
    .ui-selectmenu-menu .ui-menu{max-height:60vh;}
    #ui-datepicker-div{max-width:96vw;box-sizing:border-box;}

/* ---------- login ---------- */
    .main_content.login{min-height:0;padding:0 12px 40px;}
    .form_login{width:100%;height:auto;margin:30px 0 0 0;padding:0 0 10px 0;box-sizing:border-box;}
    /* the padding must sit on .w_row, not on .w_icon_input: the latter is the
       positioning context for the absolutely placed mail/lock glyphs */
    .form_login .w_row{padding:0 15px;box-sizing:border-box;}
    .form_login .w_icon_input{width:100%;padding:0;box-sizing:border-box;}
    .form_login input[type="text"],.form_login input[type="password"]{width:100%;}

/* ---------- orders list: search panel ---------- */
    .main_content.main{margin:0 0 30px 0;}
    .main_content.main .head{padding:15px 12px;}
    .main_content .logout{position:static;display:inline-block;margin:0 0 12px 0;}

    .form_main .w_button.add_order{display:block;margin:0 0 12px 0;height:auto;}
    .form_main .add_order .like_button{display:block;text-align:center;}

    .form_main input[name="search"]{width:100%;box-sizing:border-box;
        border-top-right-radius:2px;border-bottom-right-radius:2px;}
    /* the magnifier duplicates the "Show" button and does not fit next to the field */
    .form_main .icon_search{display:none;}

    .form_main .ui-selectmenu-button{display:block;width:100% !important;max-width:100% !important;
        height:auto;line-height:26px;box-sizing:border-box;margin:10px 0 0 0 !important;border-radius:2px !important;}

    .form_main .select_date{position:static;width:100%;height:auto;min-height:38px;line-height:36px;
        margin:10px 0 0 0;box-sizing:border-box;}
    .form_main .select_date.active{padding:0 10px 12px 10px;}
    .form_main .select_date.active .wide_select_date{display:block;width:100%;}
    .form_main .wide_select_date .w_row{margin:8px 0 0 0;line-height:normal;}
    .form_main input[name="date_from"],.form_main input[name="date_to"]{height:34px;line-height:normal;
        width:130px;padding:6px 5px;}

    .form_main .w_button.search_show{float:none;display:block;margin:12px 0 0 0;height:auto;}
    .form_main .search_show input[type="submit"]{width:100%;}

/* ---------- orders list: the table itself ---------- */
    .w_orders_scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    table.w_orders{min-width:860px;}

    .paginator{height:auto;line-height:normal;padding:12px 5px;}
    .paginator ul li:first-child,
    .paginator ul li:last-child{position:static;top:auto;left:auto;right:auto;margin:0 2px;}

/* ---------- order form ---------- */
    .main_content.order .head{padding:10px 12px;font-size:16px;}
    .form_order{padding:12px;}
    .form_order .go_back{position:static;display:block;margin:0 0 12px 0;}
    .form_order .w_button_top{position:static;text-align:right;padding:10px 12px 0 0;}
    .form_order .order_head{padding:7px 12px;}
    .form_order .w_row{margin:18px 12px;max-width:none;}
    .form_order .big_input,
    .form_order textarea.big_input{width:100%;box-sizing:border-box;}

    .form_order .w_row.multi{white-space:normal;}
    .form_order .w_row.multi .w_subrow{display:block;margin:0 0 14px 0;}
    .form_order .w_row.multi .w_subrow:last-child{margin-bottom:0;}

    .form_order input[name="date_add"],
    .form_order input[name="phone"],
    .form_order input[name="phone_add"],
    .form_order input[name="discount_card"]{width:100%;box-sizing:border-box;}
    /* the date fields keep a fixed width — the calendar icon is their inline sibling
       and would drop onto the next line if the input took the whole row */
    .form_order input[name="date_order"],
    .form_order input[name="date_get"]{width:130px;}
    .form_order .time_order{width:90px;}

    .form_order .w_row.multi.group,
    .form_order .w_row.multi.group.equi{display:block;padding:15px 12px;box-sizing:border-box;}
    .form_order .discount_group{display:block;}
    .form_order .discount_group .ml_25{margin-left:0;}
    .form_order input[name="discount"],
    .form_order input[name="discount_c"]{width:100%;box-sizing:border-box;}

/* ---------- order positions (services / products) ---------- */
    .form_order .goods_head{display:none !important;}
    .form_order .product-rows .w_group{display:flex;flex-wrap:wrap;align-items:center;
        background:#fff;border-radius:3px;padding:10px;margin:0 0 12px 0;}
    /* no drag&drop on a phone — the up/down buttons do the job */
    .form_order .product-rows .w_group .drag-handle{display:none;}
    .form_order .product-rows .move_row{order:2;display:block;}
    .form_order .product-rows .icon_remove{order:3;margin:0 0 0 auto;padding:0 5px;}
    .form_order .product-rows .w_subrow{order:4;flex:1 1 100%;margin:10px 0 0 0 !important;}
    .form_order input[name^="good_name"],
    .form_order input[name^="good_price"]{width:100%;box-sizing:border-box;}

/* ---------- totals ---------- */
    .form_order .w_row.bold_label{margin:18px 12px;}
    .form_order .w_row.bold_label .label{font-size:18px;margin:0 8px 8px 0;}
    .form_order input[name="deposit"],
    .form_order input[name="price_delivery"]{width:130px;}
    .form_order .balance{display:block;width:auto;height:auto;margin:18px 12px;padding:18px 10px;
        line-height:normal;font-size:24px;box-sizing:border-box;}

    .form_order .w_row.card_history .w_table{width:100%;}
    .form_order .w_row.card_history table{min-width:520px;}

    .form_order .w_submit{padding:18px 12px 0 12px;}
    .form_order .w_submit .w_button{display:block;margin:0 0 12px 0 !important;}
    .form_order .w_submit input[type="submit"],
    .form_order .w_submit .button_print{width:100%;box-sizing:border-box;text-align:center;}
    .form_order .w_submit .cancel_save{float:none;display:block;margin:6px 0 0 0;}

/* ---------- delete confirmation ---------- */
    .shadow{position:fixed;}
    .aalert{position:fixed !important;left:10px !important;right:10px;top:40px !important;width:auto;}
    .aalert .w_body{max-width:none;padding:18px 15px;}
    .aalert .msg{margin:15px 0;padding:10px 15px;}
    .aalert .w_button{padding:0;}
    .aalert .button_red,
    .aalert .button_orange{float:none;display:block;width:100%;margin:0 0 10px 0;}
}