//
// Forms
// --------------------------------------------------
// Changelog: (by nienn)
//
// Form grid
// Added a form specific grid with narrower gutters than the default grid.
//
// .form-group -> .form-row
//	Replaced classes .form-group for .form-row and .form-cols-row
// .form-row now behaves like a row all the time. Not only in horizintal form.
// 
// .form-group-sm/lg - removed
// Too hard to remember (problably would never use). Too hard to maintain. Useless.
// 
// .form-inline -> .form-row-inline-*
// .form-row-inline-* replaced the .form-inline.
// .form-row-inline-* behaves like a row dependant on media queries.
// .form-row-inline-* can be combined with any form and it's up to the developer to pick the time for the reversion (ie: xs/sm/md/lg).
// .form-row-inline-* Rocks!
// --------------------------------------------------

@form-gutter-width: 10px; // Replaces the @grid-gutter-width in this file - by nienn
@form-margin-vertical-base: 10px;
@form-margin-vertical-large: 15px;


// Normalize non-controls
//
// Restyle and baseline non-control form elements.
// -------------------------

fieldset {
	padding: 0;
	margin: 0;
	border: 0;
	// Chrome and Firefox set a min-width: min-content; on fieldsets,
	// so we reset that to ensure it behaves more like a standard block element.
	// See https://github.com/twbs/bootstrap/issues/12359.
	min-width: 0;
}

legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: @line-height-computed;
	font-size: (@font-size-base * 1.5);
	line-height: inherit;
	color: @legend-color;
	border: 0;
	border-bottom: 1px solid @legend-border-color;
}

label {
	display: inline-block;
	max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
	margin-bottom: 5px;
	font-weight: bold;
}


// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// -------------------------

// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
	.box-sizing(border-box);
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
	margin: 4px 0 0;
	margin-top: 1px \9; // IE8-9
	line-height: normal;
}

// Set the height of file controls to match text inputs
input[type="file"] {
	display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
	display: block;
	width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
	height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	.tab-focus();
}

// Adjust output element
output {
	display: block;
	padding-top: (@padding-base-vertical + 1);
	font-size: @font-size-base;
	line-height: @line-height-base;
	color: @input-color;
}


// Common form controls
//
// Shared size and type resets for form controls. Apply .form-control to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
// -------------------------

.form-control {
	display: block;
	width: 100%;
	height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
	padding: @padding-base-vertical @padding-base-horizontal;
	font-size: @font-size-base;
	line-height: @line-height-base;
	color: @input-color;
	background-color: @input-bg;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	border: 1px solid @input-border;
	border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
	.transition(~"border-color ease-in-out .15s, background-color ease-in-out .15s");
	
	// Customize the :focus state to imitate native WebKit styles.
	.form-control-focus();
	
	// Placeholder
	.placeholder();
	
	// Disabled and read-only inputs
	//
	// HTML5 says that controls under a fieldset > legend:first-child won't be
	// disabled if the fieldset is disabled. Due to implementation difficulty, we
	// don't honor that edge case; we style them as disabled anyway.
	&[disabled],
	&[readonly],
	fieldset[disabled] & {
		cursor: @cursor-disabled;
		background-color: @input-bg-disabled;
		opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
	}
	
	// Reset height for textareas
	textarea& {
		height: auto;
	}
}


// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// .form-control class can properly style them. Note that this cannot simply
// be added to .form-control as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
// -------------------------

input[type="search"] {
	-webkit-appearance: none;
}


// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting display: block on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
// -------------------------

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: @input-height-base;

    &.input-sm,
    .input-group-sm & {
      line-height: @input-height-small;
    }

    &.input-lg,
    .input-group-lg & {
      line-height: @input-height-large;
    }
  }
}


// Checkboxes and radios
// Indent the labels to position radios/checkboxes as hanging controls.
// -------------------------
.radio,
.checkbox {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
	padding-left: 20px;
	font-weight: normal;
	cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
	position: absolute;
	margin-left: -20px;
	margin-top: 4px \9;
}

.radio + .radio,
.checkbox + .checkbox {
	margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
	display: inline-block;
	padding-left: 20px;
	margin-bottom: 0;
	//vertical-align: middle;// Dunno why this is here. It does not space right. commented out by nienn
	font-weight: normal;
	cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
	margin-top: 0; // undo stuff
	margin-left: @form-gutter-width; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's cursor.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
	&.disabled,
	fieldset[disabled] & {
		cursor: @cursor-disabled;
	}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
	&.disabled {
		cursor: @cursor-disabled;
	}
}


// Static form control text
// Apply class to a <p> element to make any string of text align with labels in
// an horizontal form layout.
// -------------------------
.form-control-static {
	padding-top: (@padding-base-vertical + 1);// Size it appropriately next to real form controls
	padding-bottom: (@padding-base-vertical + 1);// Size it appropriately next to real form controls
	margin-bottom: 0;// Remove default margin from <p>
	
	&.input-lg,
	&.input-sm {
		padding-left: 0;
		padding-right: 0;
	}
}


// Form control sizing
// Build on .form-control with modifier classes to decrease or increase the
// height and font-size of form controls.
// -------------------------
.input-sm {
	.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small);
}
.input-lg {
	.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large);
}
.label-sm {	// by nienn
	font-size: @font-size-small;
}
.label-lg {	// by nienn
	font-size: @font-size-large;
	line-height: 34px;
}


// Form control feedback states
// Apply contextual and semantic states to individual form controls.
// -------------------------

.has-feedback {
	position: relative;// Enable absolute positioning
	
	.form-control {
		padding-right: (@input-height-base * 1.25);// Ensure icons don't overlap text
	}
}
// Feedback icon (requires .icon classes)
.form-control-feedback {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2; // Ensure icon is above input groups
	display: block;
	width: @input-height-base;
	height: @input-height-base;
	line-height: @input-height-base;
	text-align: center;
	pointer-events: none;
}
.input-lg + .form-control-feedback {
	width: @input-height-large;
	height: @input-height-large;
	line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
	width: @input-height-small;
	height: @input-height-small;
	line-height: @input-height-small;
}

// Feedback states
.has-success {
	.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.has-warning {
	.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.has-error {
	.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}

// Reposition feedback icon if input has visible label above
.has-feedback label {

	& ~ .form-control-feedback {
		top: (@line-height-computed + 5); // Height of the label and its margin
	}
}


// Help text
// Apply to any element you wish. for placement immediately below a form control.
// -------------------------

// Block help
// Apply to any element you wish. for placement immediately below a form control.
// ------------
.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: @text-light;
}
.help-inline {
	display: block;
	margin-top: 7px;
	color: @text-light;
}

// Label help
// ------------
label small {
	font-weight: normal !important;
}

// Form header
// ------------
.form-header {
	margin-bottom: @form-margin-vertical-base * 3;
	padding-bottom: .3em;
	border-bottom: 	1px dashed @well-border;
}
.form-row + .form-header,
.form-cols-row + .form-header {
	margin-top: @form-margin-vertical-base * 3;
}


// FORM ROWS
// previously, .form-groups, buts we've gone a long way since then...
// (for building a world with more rows and less groups!)
// by nienn
// --------------------------------------------------

.form-row,
[class*="form-col-"] {
	margin-bottom: @form-margin-vertical-large;
}
[class*="form-row-inline-"] {
	margin-bottom: ceil(@form-margin-vertical-large * 0.66);// Make it a bit smaller for inlines since they contain inputs groupped under the same label
}
.form-row:last-child,
[class*="form-row-inline-"]:last-child {// When they are inline, side by side, they all have mrgin-bottom: 0 anyway
	margin-bottom: 0;// Undo margin for rows inside columns and only for the last-child
}
.form-cols-row {
	// margin-bottom handled by the columns, for perfect spacing on columns responsive warp
	.make-row(@form-gutter-width);// This was only for form horizontal and applied to .form-row (previous .form-group) - changed by nienn
}


//
// FORM GRID COLUMNS - by nienn
// (for better input sizing)
// by nienn
// -------------------------------------------
.form-col-xs-1 { .make-xs-column(1, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-2 { .make-xs-column(2, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-3 { .make-xs-column(3, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-4 { .make-xs-column(4, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-5 { .make-xs-column(5, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-6 { .make-xs-column(6, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-7 { .make-xs-column(7, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-8 { .make-xs-column(8, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-9 { .make-xs-column(9, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-10 { .make-xs-column(10, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-11 { .make-xs-column(11, @form-gutter-width); .style-form-column-elements(@screen-xs-min); }
.form-col-xs-12 { .make-xs-column(12, @form-gutter-width, none, auto); .style-form-column-elements(@screen-xs-min); }// @float: none; @width: auto so we don't have to re-align the text on labels. Also, block labels are weird to click on.

.form-col-sm-1 { .make-sm-column(1, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-2 { .make-sm-column(2, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-3 { .make-sm-column(3, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-4 { .make-sm-column(4, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-5 { .make-sm-column(5, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-6 { .make-sm-column(6, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-7 { .make-sm-column(7, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-8 { .make-sm-column(8, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-9 { .make-sm-column(9, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-10 { .make-sm-column(10, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-11 { .make-sm-column(11, @form-gutter-width); .style-form-column-elements(@screen-sm-min); }
.form-col-sm-12 { .make-sm-column(12, @form-gutter-width, none, auto); .style-form-column-elements(@screen-sm-min); }// @float: none; @width: auto so we don't have to re-align the text on labels. Also, block labels are weird to click on.

.form-col-md-1 { .make-md-column(1, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-2 { .make-md-column(2, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-3 { .make-md-column(3, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-4 { .make-md-column(4, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-5 { .make-md-column(5, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-6 { .make-md-column(6, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-7 { .make-md-column(7, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-8 { .make-md-column(8, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-9 { .make-md-column(9, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-10 { .make-md-column(10, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-11 { .make-md-column(11, @form-gutter-width); .style-form-column-elements(@screen-md-min); }
.form-col-md-12 { .make-md-column(12, @form-gutter-width, none, auto); .style-form-column-elements(@screen-md-min); }// @float: none; @width: auto so we don't have to re-align the text on labels. Also, block labels are weird to click on.

.form-col-lg-1 { .make-lg-column(1, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-2 { .make-lg-column(2, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-3 { .make-lg-column(3, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-4 { .make-lg-column(4, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-5 { .make-lg-column(5, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-6 { .make-lg-column(6, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-7 { .make-lg-column(7, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-8 { .make-lg-column(8, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-9 { .make-lg-column(9, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-10 { .make-lg-column(10, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-11 { .make-lg-column(11, @form-gutter-width); .style-form-column-elements(@screen-lg-min); }
.form-col-lg-12 { .make-lg-column(12, @form-gutter-width, none, auto); .style-form-column-elements(@screen-lg-min); }// @float: none; @width: auto so we don't have to re-align the text on labels. Also, block labels are weird to click on.


// --------------------------------------------------
// HORIZONTAL VARIANTS
// default / horizontal / horizontal bordered (style)
// --------------------------------------------------


// HORIZONTAL DEFAULT (vertical)
// Specific styles applied only to the default form
// The class .form-default is now required - by nienn
// --------------------------------------------------
.form-default {	
}


// HORIZONTAL FORM
// Horizontal forms are built on form grid classes and allow you to create forms with
// labels on the left and inputs on the right.
// --------------------------------------------------

.form-horizontal {

	// Consistent vertical alignment of radios and checkboxes
	// Labels also get some reset styles, but that is scoped to a media query below.
	// ------------
	.radio,
	.checkbox,
	.radio-inline,
	.checkbox-inline {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: (@padding-base-vertical + 1); // Default padding plus a border
	}
	
	// Account for padding we're adding to ensure the alignment of help text
	// and other content below
	// ------------
	.radio,
	.checkbox {
		min-height: (@line-height-computed + (@padding-base-vertical + 1));
	}

	// Validation states
	// Reposition the icon because it's now within a grid column and columns have
	// position: relative; on them. Also accounts for the grid gutter padding.
	// ------------
	.has-feedback .form-control-feedback {
		right: (@form-gutter-width / 2);
	}

	// Label help
	// ------------
	label small {
		display: block;
	}
}


// HORIZONTAL BORDERED STYLE
// Horizontal bordered style requires the .form-horizontal class plus the aditional .form-horizontal-bordered for stilling
// --------------------------------------------------
.form-horizontal-bordered {
	background-color: lighten(@well-bg, 1%);
	border: 1px solid lighten(@well-border, 1%);
	border-radius: @border-radius-base;
}
.form-horizontal-bordered {
	> .form-row,
	> .form-cols-row {
		border-top: 	1px solid #fff;
		border-bottom: 	1px solid lighten(@well-border, 1%);
		margin: 0;
		padding: @form-margin-vertical-base @boxes-base-padding 0;
		
		&:first-child {
			border-radius: @border-radius-base @border-radius-base 0 0;
			padding-top: @padding-large;
		}
		&:last-child {
			border-bottom: 0;
			padding-bottom: 30px;
		}
	}
	
	// Form header
	// ------------
	.form-header {
		margin: 0;
		padding: @form-margin-vertical-base + 1 @boxes-base-padding @form-margin-vertical-base - 1;
		border-bottom: 	1px solid @well-border;
		.box-head-gradient(@panel-default-heading-bg);
		border-radius: (@border-radius-base - 1) (@border-radius-base - 1) 0 0;
		font-weight: bold;
		font-size: @font-size-base - 1;
		font-family: @font-family-base;
	}
	// Give the header some breading space
	// After space
	.form-header + .form-row,
	.form-header + .form-cols-row {
		margin-top: 0;
		padding-top: @padding-large;
	}
	// Before space (hack)
	.form-row + .form-header,
	.form-cols-row + .form-header {
		margin-top: -1px;// Overlap the previous row border
		&:before {
			display: block;
			content: "";
			margin: -(@form-margin-vertical-base + 1) -@boxes-base-padding @form-margin-vertical-base - 1;
			height: @padding-large;
			border-bottom: 1px solid lighten(@well-border, 1%);// Re-do the border
			background-color: lighten(@well-bg, 1%);
		}
	}
}


// INLINE FORM ROWS
// Combine with any form variant !Must come after the forms stylling as it overights some of the specific rules!
// Make elements inside form-rows appear inline(-block) by adding the .form-row-inline-* classes.
// Inline form rows revert to default rows depending on their sizing suffix (xs/sm/md/lg) .form-row-inline-xs never reverts.
//
// Requires wrapping all inputs and labels with .form-row and, optionally, .form-row-inline-*.
// --------------------------------------------------
@media (min-width: @screen-xs-min) {
	.form-row-inline-xs { .form-row-inline(); }
}
@media (min-width: @screen-sm-min) {
	.form-row-inline-sm { .form-row-inline(); }
}
@media (min-width: @screen-md-min) {
	.form-row-inline-md { .form-row-inline(); }
}
@media (min-width: @screen-lg-min) {
	.form-row-inline-lg { .form-row-inline(); }
}


//
// .input-group-addon .placeholder
// & Select .placeholder (class added via JavaScript)
// by nienn
// -------------------------------------------
select.placeholder:not(:focus),
.input-group-addon.placeholder {
	color: @input-color-placeholder;
}