/* ============================================================
FORM ELEMENTS OVERRIDE
Targets: public/css/admin/main.css (Bootstrap .form-control)
public/plugins/select2/select2.css
public/plugins/bootstrap-select/bootstrap-select.css
INSTRUCTION: Copy this file to:
/telehealth/public/css/admin/form-override.css
Then load it AFTER main.css in your layout :
What changed:
- border-radius: 3px → 8px on all inputs, selects, textareas
- height: 30px → 36px (more readable tap target)
- font-size: 12px → 13px
- border color: #D6D6D6 → #d1d5db (slightly cleaner)
- text color: #555 → #374151
- placeholder: #aaa → #9ca3af
- focus: heavy inset shadow → clean blue ring
- disabled: cleaner muted style
- input-group: connected radius preserved (8px outer, 0 inner)
- select2 plugin: all radius points updated
- bootstrap-select plugin: button radius updated
- validation states: has-success / has-warning / has-error updated
============================================================ */
/* ----------------------------------------------------------------
CORE .form-control (input, select, textarea)
---------------------------------------------------------------- */
.form-control {
height: 36px;
padding: 7px 12px;
font-size: 13px;
line-height: 1.5;
color: #374151;
background-color: #ffffff;
background-image: none;
border: 1px solid #d1d5db;
border-radius: 8px !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-shadow: none;
}
.form-control:focus {
border-color: #3b82f6;
outline: 0;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Placeholder */
.form-control::-webkit-input-placeholder { color: #9ca3af; }
.form-control:-moz-placeholder { color: #9ca3af; }
.form-control::-moz-placeholder { color: #9ca3af; }
.form-control:-ms-input-placeholder { color: #9ca3af; }
/* Textarea */
textarea.form-control {
height: auto;
min-height: 90px;
resize: vertical;
border-radius: 8px !important;
padding: 9px 12px;
line-height: 1.6;
}
/* Native select — match height so options display correctly */
select.form-control {
height: 36px;
padding: 5px 12px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
select[multiple].form-control {
height: auto;
background-image: none;
padding-right: 12px;
border-radius: 8px !important;
}
/* Disabled & readonly */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #f9fafb;
border-color: #e5e7eb;
color: #9ca3af;
opacity: 1;
}
/* ----------------------------------------------------------------
SIZE VARIANTS
---------------------------------------------------------------- */
/* Small */
.input-sm,
.form-horizontal .form-group-sm .form-control {
height: 30px;
padding: 4px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 6px;
}
select.input-sm {
line-height: 30px;
border-radius: 6px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
border-radius: 6px;
}
/* Large */
.input-lg,
.form-horizontal .form-group-lg .form-control {
height: 44px;
padding: 10px 16px;
font-size: 15px;
line-height: 1.4;
border-radius: 8px !important;
}
select.input-lg {
height: 44px;
line-height: 44px;
border-radius: 8px !important;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
border-radius: 8px !important;
}
/* ----------------------------------------------------------------
INPUT GROUPS
When an input is connected to an addon, the touching sides
must be square — the outer sides stay rounded.
---------------------------------------------------------------- */
/* Left addon + input */
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .form-control:first-child {
border-radius: 8px 0 0 8px;
}
.input-group .form-control:last-child {
border-radius: 0 8px 8px 0;
}
/* Addon pills */
.input-group-addon {
background-color: #f1f5f9;
border: 1px solid #d1d5db;
color: #475569;
font-size: 13px;
padding: 7px 12px;
border-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
border-radius: 8px 0 0 8px;
}
.input-group-addon:last-child {
border-left: 0;
border-radius: 0 8px 8px 0;
}
/* Input-group-btn */
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn {
border-radius: 8px 0 0 8px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn {
border-radius: 0 8px 8px 0;
}
/* File input button */
.fileinput-new .input-group .btn-file {
border-radius: 0 8px 8px 0;
}
/* ----------------------------------------------------------------
VALIDATION STATES
---------------------------------------------------------------- */
/* Success */
.has-success .form-control {
border-color: #22c55e;
box-shadow: none;
}
.has-success .form-control:focus {
border-color: #16a34a;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.has-success .input-group-addon {
color: #166534;
border-color: #22c55e;
background-color: #f0fdf4;
}
.has-success .form-control-feedback { color: #16a34a; }
/* Warning */
.has-warning .form-control {
border-color: #f59e0b;
box-shadow: none;
}
.has-warning .form-control:focus {
border-color: #d97706;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.has-warning .input-group-addon {
color: #92400e;
border-color: #f59e0b;
background-color: #fffbeb;
}
.has-warning .form-control-feedback { color: #d97706; }
/* Error */
.has-error .form-control {
border-color: #ef4444;
box-shadow: none;
}
.has-error .form-control:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.has-error .input-group-addon {
color: #991b1b;
border-color: #ef4444;
background-color: #fef2f2;
}
.has-error .form-control-feedback { color: #dc2626; }
/* ----------------------------------------------------------------
SELECT2 PLUGIN (/plugins/select2/select2.css)
---------------------------------------------------------------- */
/* Main container */
.select2-container .select2-choice {
border: 1px solid #d1d5db;
border-radius: 8px;
background-color: #ffffff;
background-image: none;
color: #374151;
height: 36px;
line-height: 36px;
padding: 0 0 0 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container .select2-choice:hover,
.select2-container.select2-dropdown-open .select2-choice {
border-color: #3b82f6;
}
/* When open (dropdown showing below) */
.select2-container.select2-dropdown-open .select2-choice {
border-radius: 8px 8px 0 0;
border-bottom-color: #e5e7eb;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* When dropdown opens above */
.select2-container.select2-drop-above .select2-choice {
border-radius: 0 0 8px 8px;
}
/* Dropdown panel */
.select2-drop {
border: 1px solid #d1d5db;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background: #ffffff;
}
.select2-drop.select2-drop-above {
border-top: 1px solid #d1d5db;
border-bottom: none;
border-radius: 8px 8px 0 0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
/* Arrow button inside select2 */
.select2-container .select2-choice .select2-arrow {
border-left: 1px solid #e5e7eb;
border-radius: 0 8px 8px 0;
background: #f9fafb;
background-image: none;
width: 28px;
}
.select2-container .select2-choice .select2-arrow b {
background-position: 2px 6px;
}
/* Search box inside dropdown */
.select2-search input {
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 5px 10px;
font-size: 13px;
color: #374151;
}
.select2-search input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Results list hover / active */
.select2-results .select2-highlighted {
background: #eff6ff;
color: #1e40af;
border-radius: 4px;
}
/* Multi-select (tags) */
.select2-container-multi .select2-choices {
border: 1px solid #d1d5db;
border-radius: 8px;
background-image: none;
background-color: #ffffff;
min-height: 36px;
padding: 3px 6px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container-multi.select2-container-active .select2-choices {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
outline: none;
}
.select2-container-multi .select2-choices .select2-search-choice {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 5px;
color: #1e40af;
font-size: 12px;
padding: 2px 20px 2px 8px;
margin: 3px 4px 3px 0;
background-image: none;
box-shadow: none;
}
/* Disabled state */
.select2-container.select2-container-disabled .select2-choice {
background-color: #f9fafb;
border-color: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
}
/* ----------------------------------------------------------------
BOOTSTRAP-SELECT PLUGIN (/plugins/bootstrap-select/)
---------------------------------------------------------------- */
.bootstrap-select > .btn,
.bootstrap-select.btn-group > .btn {
border-radius: 8px !important;
border: 1px solid #d1d5db;
background-color: #ffffff;
color: #374151;
font-size: 13px;
height: 36px;
padding: 7px 32px 7px 12px;
background-image: none;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bootstrap-select.btn-group.open > .btn {
border-radius: 8px 8px 0 0 !important;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
outline: none !important;
}
.bootstrap-select .btn:focus {
outline: none !important;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.bootstrap-select .dropdown-menu {
border: 1px solid #d1d5db;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
}
.bootstrap-select .dropdown-menu > li > a {
border-radius: 5px;
font-size: 13px;
color: #374151;
padding: 7px 12px;
transition: background 0.1s ease;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
background-color: #eff6ff;
color: #1e40af;
}
.bootstrap-select .dropdown-menu > li.selected > a,
.bootstrap-select .dropdown-menu > li.active > a {
background-color: #2563eb;
color: #ffffff;
}
.bootstrap-select .bs-searchbox .form-control {
border-radius: 6px;
margin: 4px 4px 6px;
width: calc(100% - 8px);
}
/* ----------------------------------------------------------------
DATEPICKER / CLOCKPICKER / TIMEPICKER INPUTS
These use standard .form-control so they inherit above.
Just ensure their own trigger buttons stay rounded.
---------------------------------------------------------------- */
.input-group.date .input-group-addon,
.input-group.clockpicker .input-group-addon,
.input-group.timepicker .input-group-addon {
border-radius: 0 8px 8px 0;
cursor: pointer;
border-left: none;
}
.datepicker.dropdown-menu {
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 8px;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
background-color: #2563eb;
border-radius: 6px;
}
.datepicker table tr td:hover {
background: #eff6ff;
border-radius: 6px;
}
/* ----------------------------------------------------------------
SEARCH INPUT (top navbar search, sidebar search)
---------------------------------------------------------------- */
input[type="search"].form-control,
.search-input {
border-radius: 8px;
padding-left: 14px;
}
/* ----------------------------------------------------------------
FORM GROUPS & LABELS
Minor spacing polish to complement the rounded inputs
---------------------------------------------------------------- */
.form-group {
margin-bottom: 16px;
}
.form-group label,
.control-label {
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 5px;
display: inline-block;
}
.help-block {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
font-weight: normal;
}