/*
 * Forms.css
 * Global Bootstrap 3 form sizing for WebProtocol.
 *
 * Load order:
 * bootstrap.css -> site.css -> Forms.css -> MainMenu.css -> module CSS (e.g. Complaints.css)
 *
 * Goals:
 * - prevent ordinary form controls from stretching across huge Bootstrap columns;
 * - keep dates/numbers/selects compact;
 * - give text fields and textareas useful working widths;
 * - remain fully responsive on phones/tablets;
 * - allow individual views to opt into wider/full-width controls.
 */

/* ---------------------------------------------------------
   Standard horizontal forms
   --------------------------------------------------------- */

.body-content .form-horizontal .form-group {
    margin-bottom: 12px;
}

.body-content .form-horizontal .control-label {
    padding-top: 8px;
    color: #303b4c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/*
 * Bootstrap 3 sets .form-control { width:100% }.
 * Keep width responsive, but cap ordinary controls at a sensible desktop size.
 */
.body-content .form-horizontal input.form-control,
.body-content .form-horizontal select.form-control {
    width: 100%;
    max-width: 420px !important;
    height: 36px;
    padding: 7px 10px;
    border-color: #cbd3dc;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
}

.body-content .form-horizontal input.form-control:focus,
.body-content .form-horizontal select.form-control:focus,
.body-content .form-horizontal textarea.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(102,175,233,.12);
}

/* Dates and time values do not need 400+ pixels. */
.body-content .form-horizontal input[type="date"].form-control,
.body-content .form-horizontal input[type="datetime-local"].form-control,
.body-content .form-horizontal input[type="time"].form-control,
.body-content .form-horizontal input[id*="Date"].form-control,
.body-content .form-horizontal input[name*="Date"].form-control {
    max-width: 190px !important;
}

/* Numeric/code fields are normally short. */
.body-content .form-horizontal input[type="number"].form-control {
    max-width: 220px !important;
}

/* Dropdowns are generally shorter than long text fields. */
.body-content .form-horizontal select.form-control {
    max-width: 340px !important;
}

/* Free text gets more room than a select, but not the whole screen. */
.body-content .form-horizontal input[type="text"].form-control,
.body-content .form-horizontal input[type="tel"].form-control,
.body-content .form-horizontal input[type="email"].form-control,
.body-content .form-horizontal input[type="search"].form-control,
.body-content .form-horizontal input[type="url"].form-control,
.body-content .form-horizontal input[type="password"].form-control {
    max-width: 480px !important;
}

/*
 * TextAreaFor in legacy views is sometimes rendered without form-control
 * because htmlAttributes were nested incorrectly. Cover both cases.
 */
.body-content .form-horizontal textarea,
.body-content .form-horizontal textarea.form-control {
    display: block;
    width: 100%;
    max-width: 680px !important;
    min-height: 96px;
    padding: 8px 10px;
    color: #333;
    background: #fff;
    border: 1px solid #cbd3dc;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}

/* Boolean controls must never inherit text-input dimensions. */
.body-content .form-horizontal input[type="checkbox"],
.body-content .form-horizontal input[type="radio"],
.body-content .form-horizontal input[type="checkbox"].form-control,
.body-content .form-horizontal input[type="radio"].form-control {
    display: inline-block;
    width: 18px !important;
    max-width: 18px !important;
    height: 18px;
    padding: 0;
    margin-top: 7px;
}

/* ---------------------------------------------------------
   Optional width utility classes for exceptional fields
   --------------------------------------------------------- */

.body-content .form-horizontal .form-control-xs {
    max-width: 120px !important;
}

.body-content .form-horizontal .form-control-sm {
    max-width: 190px !important;
}

.body-content .form-horizontal .form-control-md {
    max-width: 340px !important;
}

.body-content .form-horizontal .form-control-lg {
    max-width: 560px !important;
}

.body-content .form-horizontal .form-control-xl {
    max-width: 760px !important;
}

.body-content .form-horizontal .form-control-full {
    max-width: none !important;
}

/* Useful for address/description fields without changing Bootstrap grid. */
.body-content .form-horizontal .field-wide,
.body-content .form-horizontal input.field-wide,
.body-content .form-horizontal select.field-wide {
    max-width: 620px !important;
}

/* ---------------------------------------------------------
   Select2: follow the same sizing rules as ordinary selects
   --------------------------------------------------------- */

.body-content .form-horizontal .select2-container {
    width: 100% !important;
    max-width: 420px !important;
}

.body-content .form-horizontal .select2-container .select2-selection--single {
    min-height: 36px;
    border-color: #cbd3dc;
    border-radius: 5px;
}

.body-content .form-horizontal
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 34px;
    font-size: 14px;
}

.body-content .form-horizontal
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 34px;
}

/* ---------------------------------------------------------
   Protocol forms
   Their legacy markup uses col-md-4 / col-md-8, so without a cap
   every field stretches across most of the screen.
   --------------------------------------------------------- */

.controller-protocols .body-content > h2,
.controller-protocols .body-content > h3,
.controller-protocols .body-content > p,
.controller-protocols .body-content > form,
.controller-protocols .body-content > table {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.controller-protocols .form-horizontal {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.controller-protocols .form-horizontal input.form-control {
    max-width: 470px !important;
}

.controller-protocols .form-horizontal select.form-control {
    max-width: 360px !important;
}

.controller-protocols .form-horizontal textarea,
.controller-protocols .form-horizontal textarea.form-control {
    max-width: 650px !important;
}

/* Protocol address/name fields may use a little more horizontal space. */
.controller-protocols #PIB_Offender,
.controller-protocols #Address,
.controller-protocols #addressStreet,
.controller-protocols #Witness_1,
.controller-protocols #Witness_2,
.controller-protocols #PlaceView,
.controller-protocols #Result {
    max-width: 560px !important;
}

/* Short protocol controls. */
.controller-protocols #ArticleId,
.controller-protocols #ItemOfRuleId,
.controller-protocols #Item,
.controller-protocols #streetType,
.controller-protocols #addressLocatorBuilding,
.controller-protocols #Fine,
.controller-protocols #StatusFine,
.controller-protocols #NumberOutput {
    max-width: 260px !important;
}

/* ---------------------------------------------------------
   Module isolation
   Complaints already has its own dedicated CSS loaded AFTER this file.
   These rules make the intention explicit and avoid changing its custom
   compact layouts when CSS load order changes in the future.
   --------------------------------------------------------- */

.controller-complaints .editdisp-page .form-control,
.controller-complaints .create-complaint-page .form-control {
    /* Sizes are controlled by Complaints/EditDisp/Create scoped CSS. */
}

/* ---------------------------------------------------------
   Responsive behaviour
   --------------------------------------------------------- */

@media (max-width: 991px) {
    .body-content .form-horizontal input.form-control,
    .body-content .form-horizontal select.form-control,
    .body-content .form-horizontal textarea,
    .body-content .form-horizontal textarea.form-control,
    .body-content .form-horizontal .select2-container {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .body-content .form-horizontal .control-label {
        padding-top: 0;
        padding-bottom: 4px;
        text-align: left;
    }

    .body-content .form-horizontal input.form-control,
    .body-content .form-horizontal select.form-control,
    .body-content .form-horizontal textarea,
    .body-content .form-horizontal textarea.form-control,
    .body-content .form-horizontal .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .body-content .form-horizontal input[type="checkbox"],
    .body-content .form-horizontal input[type="radio"],
    .body-content .form-horizontal input[type="checkbox"].form-control,
    .body-content .form-horizontal input[type="radio"].form-control {
        width: 18px !important;
        max-width: 18px !important;
    }
}