/*
 * responsive.css — mobile support for the Xalandri Issues front end.
 *
 * Loaded LAST, after esCss.css and project.css, so it can override the fixed
 * pixel widths and fixed heights those two files set unconditionally. The
 * project targets Bootstrap 3, so the breakpoints below match Bootstrap 3's:
 *
 *   xs  <768px   phones          (Bootstrap's implicit default)
 *   sm  >=768px  tablets
 *   md  >=992px  desktops
 *
 * Nothing here changes the desktop rendering: every rule is either inside an
 * `xs`/`sm` media query or is a safe fluid replacement for a fixed width.
 */

/* ==========================================================================
   0. Global safety net
   ========================================================================== */

/*
 * Belt and braces against a single wide child forcing the whole page to
 * scroll sideways. Individual overflows are fixed at the source below; this
 * only stops one missed element from breaking every screen.
 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Long unbroken strings (emails, URLs, Greek titles) must not push layout. */
.table-xalandri td,
.issue-profile-table td,
.panel-body,
.alert {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*
 * background-attachment: fixed is expensive and visibly janky on iOS Safari
 * and most Android browsers; fall back to a normal scrolling background.
 */
@media (max-width: 767px) {
    html {
        background-attachment: scroll;
    }
}

/* ==========================================================================
   1. Navbar
   ========================================================================== */

/*
 * project.css pins .navbar-xalandri to 70px. Once the menu collapses into the
 * hamburger, the expanded list is taller than that and gets clipped, so the
 * navigation is unreachable on a phone. Height becomes a minimum instead.
 */
.navbar-xalandri {
    height: auto;
    min-height: 70px;
}

@media (max-width: 767px) {
    .navbar-xalandri {
        min-height: 0;
        padding-top: 0;
    }

    .navbar-brand {
        margin-left: 10px !important;
    }

    .navbar-brand img {
        height: 36px;
    }

    /* Keep a long menu usable rather than letting it run off-screen. */
    .navbar-xalandri .navbar-collapse {
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * The hover rule in project.css adds a 7.5px bottom border, which reads as
     * a divider once the items are stacked. Use a left marker instead.
     */
    .nav.navbar-nav > li > a:focus,
    .nav.navbar-nav > li > a:hover,
    .nav.navbar-nav > li > a:active {
        border-bottom: 0;
        border-left: 4px solid #ddd;
    }

    /* Collapsed dropdowns are plain nested lists; give them room to breathe. */
    .navbar-xalandri .navbar-nav .open .dropdown-menu > li > a {
        padding: 12px 15px 12px 30px;
        white-space: normal;
    }

    .navbar-xalandri .navbar-nav > li > a {
        padding: 12px 15px;
    }
}

/* The toggle itself must be a comfortable tap target. */
.navbar-header .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
    margin-right: 10px;
    /* stay above the third-party accessibility launcher */
    position: relative;
    z-index: 1032;
}

/*
 * The UserWay launcher is injected with an inline `position: fixed` aimed at
 * the desktop top-right corner. On a phone that lands it directly on top of
 * the navbar's hamburger — the toggle became genuinely unclickable, so the
 * menu could not be opened at all — and its own box hung off the right edge
 * (right: -23px). Park it in the bottom-left on small screens, clear of both
 * the navbar and the back-to-top control.
 */
@media (min-width: 768px) {
    /*
     * Leave room for the fixed accessibility launcher so it stops covering
     * the tail of the signed-in user's name in the top-right of the navbar.
     */
    .navbar-xalandri .navbar-right {
        margin-right: 50px;
    }
}

@media (max-width: 767px) {
    .userway_buttons_wrapper {
        top: auto !important;
        right: auto !important;
        bottom: 14px !important;
        left: 14px !important;
    }
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

/*
 * project.css sets `.btn { min-width: 150px }` globally. Two buttons side by
 * side then need 300px plus gutters, which overflows a 360px phone.
 */
@media (max-width: 767px) {
    .btn {
        min-width: 0;
        white-space: normal;      /* allow the Greek labels to wrap */
    }

    /*
     * Action buttons stack and go full width — easier to hit, and it removes
     * the ragged right edge the float-based panels produce.
     */
    .button-panel-right,
    .button-panel-left {
        text-align: left;
    }

    .button-panel-right .btn,
    .button-panel-left .btn,
    .form-group.text-center > .btn {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Icon-only buttons keep their square shape. */
    .btn-icon {
        display: inline-block;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        min-height: 44px;
    }

    /* Anything tappable gets a usable target. */
    .btn,
    .pagination > li > a,
    .pagination > li > span {
        min-height: 44px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* ==========================================================================
   3. Login panel
   ========================================================================== */

/*
 * esCss.css gives .xy-centerized a hard 400x375px absolutely positioned box.
 * That overflows every phone and clips the form whenever the viewport is
 * short. Below `sm` it becomes a normal fluid block.
 */
@media (max-width: 767px) {
    .xy-centerized {
        position: static;
        width: auto;
        height: auto;
        margin: 30px 0;
    }
}

/*
 * esCss.css centres the box with `margin: auto` against top/right/bottom/left:
 * 0. That only centres vertically while the height is a definite length: per
 * CSS 2.1 10.6.4, once `height` is `auto` the auto margins resolve to 0 and the
 * box is stretched to fill instead, which left the panel pinned to the top of
 * the viewport, behind the navbar. Centre on the midpoint and pull the box back
 * by half its own size, which holds with an auto height so the panel can still
 * grow for validation errors.
 */
@media (min-width: 768px) {
    .xy-centerized {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 400px;
        max-width: calc(100% - 30px);
        height: auto;
    }

    /*
     * Bootstrap's .panel carries margin-bottom: 20px, which counts towards the
     * wrapper's height and so pushed the panel 10px above the true centre.
     */
    .xy-centerized > .panel {
        margin-bottom: 0;
    }
}

#login-form input[type='email'],
#login-form input[type='password'] {
    max-width: 100%;
}

@media (max-width: 767px) {
    /*
     * The icon sits in .col-xs-1 and the field in .col-xs-11; with the grid's
     * gutters that totals more than 100%, so the field wrapped onto its own
     * line under the icon. Lay the pair out as a flex row instead.
     */
    #login-form .form-group {
        display: flex;
        align-items: center;
    }

    #login-form .form-group > .col-xs-1 {
        width: auto;
        flex: 0 0 auto;
        padding-left: 0;
        padding-right: 10px;
    }

    #login-form .form-group > .col-xs-11 {
        width: auto;
        flex: 1 1 auto;
        padding-left: 0;
        padding-right: 0;
    }

    #login-form .fa-login-input-icon {
        margin-top: 0;
    }

    /* the submit row has no icon column, so let the button fill the width */
    #login-form .form-group > [class*='col-md-'] {
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    #login-form .btn {
        display: block;
        width: 100%;
    }
}

/* ==========================================================================
   4b. Filter panel actions
   ========================================================================== */

/*
 * The search/extra-filters row is built from right-aligned, floated columns.
 * Stacked on a phone that leaves small buttons hugging the right edge.
 */
@media (max-width: 767px) {
    #collapse-filters .text-right {
        text-align: left;
    }

    #collapse-filters .btn {
        display: block;
        width: 100%;
        float: none !important;
        margin: 0 0 10px 0;
    }

    #collapse-filters .label {
        display: block;
        margin-bottom: 10px;
        padding: 8px;
        text-align: center;
    }

    #collapse-filters .form-group > [class*='col-'] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   4. Forms
   ========================================================================== */

/*
 * .label-25-input-75 floats the control to the right at a fixed 65% width.
 * Stacked on a phone that leaves a cramped, misaligned column, so labels and
 * controls go full width and the float is dropped.
 */
@media (max-width: 767px) {
    .label-25-input-75 .form-control,
    .label-25-input-75 .select2-container {
        width: 100%;
        float: none;
        display: block;
    }

    .label-25-input-75 .form-group > label {
        display: block;
        width: 100%;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .label-25-input-75 .datepicker-condensed,
    .datepicker-condensed {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        margin-left: 0 !important;
    }

    /* Two-column label/field pairs collapse to one column. */
    .form-2-col label,
    .form-2-col .form-control {
        display: block;
        width: 100%;
    }

    .form-control-50,
    .w-72 {
        display: block;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    /* The blocksize picker and its icon sit on one line. */
    #fa-for-blocksize {
        display: none;
    }

    /* iOS zooms the page in when a focused control is under 16px. */
    .form-control,
    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='number'],
    select,
    textarea {
        font-size: 16px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    /* Roomier tap targets for the grid's select-all checkboxes. */
    input[type='checkbox'],
    input[type='radio'] {
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }

    /* Widen the hit area around a checkbox that sits alone in a card cell. */
    .table-cards > tbody > tr > td[data-label='Επιλογή'] {
        padding: 12px !important;
    }

    /* Alert dismiss buttons are a 12px glyph by default. */
    .alert .close,
    .modal-header .close {
        min-width: 44px;
        min-height: 44px;
        margin-top: -8px;
        font-size: 26px;
        line-height: 1;
    }

    /* The filter panel's collapse chevron is a 15px icon; make the whole
       heading row a comfortable target instead. */
    .filters-panel-heading .panel-title > a {
        display: inline-block;
        padding: 6px 0;
        min-height: 32px;
    }
}

/* Select2 must never exceed its container. */
.select2-container {
    max-width: 100%;
}

/* The citizen form's generous desktop padding is wasted space on a phone. */
@media (max-width: 767px) {
    .new-issue-form-wrapper {
        padding: 15px;
        margin-bottom: 30px;
    }

    .issue-profile-table-wrapper {
        padding: 15px;
    }

    .issue-profile-headline,
    .issue-logs-headline {
        padding: 15px;
        font-size: 18px;
    }
}

/* ==========================================================================
   5. Tables
   ========================================================================== */

/*
 * Wide grids scroll horizontally inside their own wrapper instead of
 * stretching the page. .wide-table-wrapper is the project's existing idiom.
 */
.wide-table-wrapper,
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .table-padding-10-15 th,
    .table-padding-10-15 td {
        padding: 8px 10px !important;
    }

    /*
     * The issue profile is a two-column label/value table. Right-aligned bold
     * labels in a narrow column wrap badly, so the pairs stack.
     */
    .issue-profile-table,
    .issue-profile-table tbody,
    .issue-profile-table tr,
    .issue-profile-table td {
        display: block;
        width: 100%;
    }

    .issue-profile-table td {
        padding: 4px 0;
    }

    .issue-profile-table td:first-child {
        text-align: left;
        padding-top: 12px;
        border-top: 1px solid #eee;
    }

    .issue-profile-table tr:first-child td:first-child {
        border-top: 0;
    }
}

/*
 * Card layout for the issue grids. Each row becomes a stacked block and every
 * cell is prefixed with its column name from the td's data-label attribute,
 * so no horizontal scrolling is needed on the screens operators use most.
 */
@media (max-width: 767px) {
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards thead {
        display: none;
    }

    .table-cards > tbody > tr {
        margin-bottom: 12px;
        padding: 6px 0;
        border: 1px solid #ddd;
        border-top: 4px solid #ef5d77;
        background-color: #fff;
    }

    .table-cards > tbody > tr > td {
        padding: 8px 12px !important;
        border: 0;
        border-bottom: 1px solid #f2f2f2;
        text-align: left !important;
    }

    .table-cards > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    /* Column name, taken from the markup so it stays in sync with the head. */
    .table-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #888;
    }

    /* Cells that carry no useful value on a card are hidden. */
    .table-cards > tbody > tr > td.hide-xs {
        display: none;
    }

    /* Striping reads as noise once rows are cards. */
    .table-cards.table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #fff;
    }
}

/* ==========================================================================
   6. Modals
   ========================================================================== */

/* esCss.css hard-codes .modal-768 to 768px, wider than any phone. */
.modal-768 {
    width: auto;
    max-width: 768px;
}

@media (min-width: 768px) {
    .modal-768 {
        width: 768px;
    }
}

@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-body {
        padding: 15px 12px;
    }

    .modal-footer .btn {
        display: block;
        width: 100%;
        margin: 0 0 8px 0;
    }

    /* .pull-left on a stacked footer button leaves a stray gap. */
    .modal-footer .btn.pull-left,
    .modal-footer .btn.pull-right {
        float: none !important;
    }
}

/* ==========================================================================
   7. Grid hygiene
   ========================================================================== */

/*
 * Several views nest .col-* straight inside .col-* with no intervening .row,
 * which doubles the gutter and can push a column past its parent. Neutralise
 * the extra padding rather than restructuring every view.
 */
[class*='col-'] > [class*='col-']:only-child {
    padding-left: 0;
    padding-right: 0;
}

/*
 * Long runs of floated .col-sm-6 with uneven heights snag on each other.
 * Clearing every other column restores the expected two-up grid.
 */
@media (min-width: 768px) {
    #extra-filters .col-sm-6:nth-child(odd) {
        clear: left;
    }
}

/* ==========================================================================
   8. Charts, footer, misc
   ========================================================================== */

/*
 * home.blade.php makes .home-chart-row a flex container so the table and its
 * chart match heights on desktop. Flex also overrides the float-based
 * stacking Bootstrap relies on, so below `md` the col-md-4/col-md-8 pair
 * stayed side by side and the chart collapsed to an empty sliver. Hand the
 * row back to the normal block flow at the width where col-md-* goes full.
 */
@media (max-width: 991px) {
    .home-chart-row {
        display: block;
    }

    .home-chart-row > [class*='col-'] {
        display: block;
        width: 100%;
    }

    .home-chart-container {
        min-height: 260px;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .home-chart-container {
        min-height: 220px;
        padding: 10px 5px;
    }

    .home-chart-container canvas {
        left: 5px;
        right: 5px;
    }

    .font-24 {
        font-size: 19px;
    }

    .font-22 {
        font-size: 18px;
    }

    .footer {
        padding: 15px 10px;
    }

    .footer .text-right {
        text-align: center;
    }

    .footer [class*='col-'] {
        margin-bottom: 6px;
    }

    /* The layout reserves room for a 50px navbar + 100px footer. */
    .container-wrapper {
        min-height: 0;
    }

    /* Google Maps needs a sensible height when it is the full width. */
    #map {
        min-height: 260px !important;
    }

    /* reCAPTCHA is 304px wide; scale it down so it fits a 320px viewport. */
    .g-recaptcha {
        transform: scale(0.87);
        transform-origin: 0 0;
    }
}

/* ==========================================================================
   9. Print
   ========================================================================== */

@media print {
    .navbar,
    .footer,
    .button-panel-right,
    .button-panel-left,
    .pagination,
    .filters-panel-heading,
    #extra-filters {
        display: none !important;
    }

    html {
        background: none;
    }

    .wide-table-wrapper {
        overflow: visible;
    }
}