/*
 * Buttons and form controls, shared by the backend (theme.css) and the public
 * site (public.css). Restyles Bootstrap 2 class names without changing markup.
 */

/* ---------- Buttons ---------- */

.btn,
button.btn-primary, button.btn-success, button.btn-danger {
	padding: 5px 12px;
	background-image: none;
	border: 1px solid var(--c2v-line-strong);
	border-radius: var(--c2v-radius-sm);
	box-shadow: none;
	filter: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	text-shadow: none;
}
.btn { background-color: #fff; color: var(--c2v-ink); }
.btn:hover, .btn:focus {
	background-color: var(--c2v-surface);
	background-position: 0 0;
	color: var(--c2v-ink);
	transition: none;
}
.btn:focus-visible { outline: 2px solid var(--c2v-blue); outline-offset: 1px; }

.btn-primary, .btn.btn-primary {
	background-color: var(--c2v-blue);
	border-color: var(--c2v-blue);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn.btn-primary:hover, .btn.btn-primary:focus {
	background-color: var(--c2v-blue-dark);
	border-color: var(--c2v-blue-dark);
	color: #fff;
}
.btn-success, .btn.btn-success {
	background-color: var(--c2v-green-btn);
	border-color: var(--c2v-green-btn);
	color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn.btn-success:hover, .btn.btn-success:focus {
	background-color: var(--c2v-green-btn-dark);
	border-color: var(--c2v-green-btn-dark);
	color: #fff;
}
.btn-danger, .btn.btn-danger {
	background-color: var(--c2v-red);
	border-color: var(--c2v-red);
	color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn.btn-danger:hover, .btn.btn-danger:focus {
	background-color: var(--c2v-red-dark);
	border-color: var(--c2v-red-dark);
	color: #fff;
}
.btn-primary [class*="icomoon-icon"],
.btn-success [class*="icomoon-icon"],
.btn-danger [class*="icomoon-icon"] { color: #fff; }
.btn-primary [class^="icon-"], .btn-primary [class*=" icon-"],
.btn-success [class^="icon-"], .btn-success [class*=" icon-"],
.btn-danger [class^="icon-"], .btn-danger [class*=" icon-"],
.icon-white {
	background-image: url(../images/glyphicons-halflings-white.png);
}

.btn-large { padding: 8px 16px; border-radius: var(--c2v-radius); font-size: 14px; }
.btn-small { padding: 2px 9px; font-size: 12px; }
.btn-mini { padding: 0 7px; font-size: 11px; }
.btn.disabled, .btn[disabled] { opacity: 0.55; }

/* ---------- Form controls ---------- */

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime"], input[type="datetime-local"],
textarea, select, .uneditable-input {
	border: 1px solid var(--c2v-line-strong);
	border-radius: var(--c2v-radius-sm);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--c2v-ink);
	font-family: inherit;
	font-size: 14px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime"], input[type="datetime-local"],
select:not([multiple]):not([size]), .uneditable-input {
	height: 34px;
	padding: 6px 10px;
	line-height: 20px;
}

textarea { padding: 8px 10px; line-height: 1.5; }
select[multiple], select[size] { padding: 4px; }

input:focus, textarea:focus, select:focus {
	background: #fff;
	border-color: var(--c2v-blue);
	box-shadow: 0 0 0 3px rgba(0, 119, 197, 0.18);
	color: var(--c2v-ink);
	outline: 0;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], textarea[readonly] {
	background: var(--c2v-surface);
	color: var(--c2v-muted);
}

.input-append input, .input-append select, .input-prepend input, .input-prepend select { font-size: 14px; }
.input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn {
	box-sizing: border-box;
	height: 34px;
	padding: 6px 12px;
	background-color: var(--c2v-surface);
	border-color: var(--c2v-line-strong);
	font-size: 13px;
	line-height: 20px;
	vertical-align: top;
}
.input-append .btn-primary, .input-prepend .btn-primary { background-color: var(--c2v-blue); border-color: var(--c2v-blue); }
.input-append .btn-success, .input-prepend .btn-success { background-color: var(--c2v-green-btn); border-color: var(--c2v-green-btn); }
.input-append input { border-radius: var(--c2v-radius-sm) 0 0 var(--c2v-radius-sm); }
.input-prepend input { border-radius: 0 var(--c2v-radius-sm) var(--c2v-radius-sm) 0; }
.input-append .btn:first-child, .input-append .add-on:first-child { border-radius: 0; }
.input-append .btn:last-child, .input-append .add-on:last-child { border-radius: 0 var(--c2v-radius-sm) var(--c2v-radius-sm) 0; }
.input-prepend .add-on:first-child { border-radius: var(--c2v-radius-sm) 0 0 var(--c2v-radius-sm); }

/* django-selectable's combobox button. bootstrap.js loads after jQuery UI and
   replaces $.fn.button, so the button never receives jQuery UI's icon and renders
   empty. Reordering those scripts risks every modal, so draw the caret here. */
.ui-combo-button {
	position: relative;
	box-sizing: border-box;
	width: 30px;
	height: 34px;
	margin-left: -1px;
	padding: 0;
	background: var(--c2v-surface);
	border: 1px solid var(--c2v-line-strong);
	border-radius: 0 var(--c2v-radius-sm) var(--c2v-radius-sm) 0;
	vertical-align: top;
}
.ui-combo-button:after {
	content: "";
	position: absolute;
	top: 14px;
	left: 10px;
	border: 4px solid transparent;
	border-top: 5px solid var(--c2v-muted);
}
.ui-combo-button:hover { background: var(--c2v-line); }
input:has(+ .ui-combo-button) { border-radius: var(--c2v-radius-sm) 0 0 var(--c2v-radius-sm); }

label { color: var(--c2v-ink); }
.help-block, .help-inline { color: var(--c2v-muted); font-size: 13px; }
.controls > .help-block, .controls > p { font-size: 13px; }

.form-horizontal .control-group { margin-bottom: 14px; }
.requiredField { color: var(--c2v-ink); font-weight: 600; }

form fieldset:not(:first-of-type) { margin-top: 28px; }

legend {
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--c2v-line);
	color: var(--c2v-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.form-actions {
	margin: 24px 0 0;
	padding: 16px 0 0;
	background: none;
	border-top: 1px solid var(--c2v-line);
}

.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: var(--c2v-red); }
.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: var(--c2v-red); }

@media (min-width: 768px) {
	.form-horizontal .control-label {
		width: 170px;
		padding-top: 7px;
		color: var(--c2v-muted);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
	}
	.form-horizontal .requiredField.control-label, .form-horizontal .control-label.requiredField { color: var(--c2v-ink); font-weight: 600; }
	.form-horizontal .controls { margin-left: 190px; }
	.form-horizontal .form-actions { padding-left: 190px; }
	.form-horizontal .controls .controls { margin-left: 0; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 767px) {
	/* Fieldsets default to min-width: min-content, so a wide formset table would
	   stretch the whole page. Scroll the table inside its fieldset instead. */
	form fieldset { min-width: 0; overflow-x: auto; }
	.input-append { white-space: normal; }
	.input-append .btn:last-child { border-radius: var(--c2v-radius-sm); }
}