/* ==========================================================================
   GoSMS 表单系统 —— 纯 CSS 独立文件（不依赖 SCSS）
   加载顺序：theme-colors-override.css 之后（见 panels/styles.blade.php）
   色值全部引用 theme-colors-override.css 中的 --gs-* token

   规格
   - 控件高度 40px（sm 32px / lg 48px），圆角 8px，边框 1px
   - 字号：标签 14px/500，输入 14px，辅助说明 12px
   - 状态：默认 → hover 边框加深 → focus 翠绿边框 + 3px 光环 → 错误红色
   ========================================================================== */

:root {
    --gs-field-height: 40px;
    --gs-field-height-sm: 32px;
    --gs-field-height-lg: 48px;
    --gs-field-radius: 8px;
    --gs-field-px: 12px;
    --gs-field-font: 14px;
    --gs-field-border: var(--gs-border, #E4E4E0);
    --gs-field-border-hover: #D0D0CB;
    --gs-field-bg: var(--gs-surface, #FFFFFF);
    --gs-field-bg-disabled: var(--gs-bg, #F8F8F7);
    --gs-field-addon-bg: var(--gs-bg, #F8F8F7);
    --gs-field-focus-border: var(--gs-brand-500, #1EA97B);
    --gs-field-focus-ring: 0 0 0 3px rgba(30, 169, 123, 0.18);
    --gs-field-error: var(--gs-danger, #E5484D);
    --gs-field-error-ring: 0 0 0 3px rgba(229, 72, 77, 0.15);
    --gs-field-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ========== 1. 标签与辅助文字 ========== */
label,
.form-label,
.col-form-label {
    color: var(--gs-ink, #1C1C1C);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.form-label {
    margin-bottom: 6px;
}

.form-label.required::after,
label.required::after {
    color: var(--gs-field-error);
    content: " *";
}

.form-text,
.form-control + small,
.form-control + p small {
    color: var(--gs-text-secondary, #6B6B66);
    font-size: 12px;
}

.invalid-feedback,
.text-danger small,
small.text-danger {
    color: var(--gs-danger-text, #B42328);
    font-size: 12px;
}

/* ========== 2. 输入框 / 下拉 / 文本域 ========== */
.form-control,
.form-select {
    background-color: var(--gs-field-bg);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-field-radius);
    box-shadow: none;
    color: var(--gs-ink, #1C1C1C);
    font-size: var(--gs-field-font);
    line-height: 1.4;
    height: var(--gs-field-height);
    min-height: var(--gs-field-height);
    padding: 0 var(--gs-field-px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-select {
    background-image: var(--gs-field-chevron);
    background-position: right var(--gs-field-px) center;
    background-size: 16px 16px;
    padding-right: 36px;
}

/* 多行 / 多选控件、用 .form-control 做外观的展示块：高度随内容 */
div.form-control,
p.form-control,
span.form-control,
textarea.form-control,
select.form-select[multiple],
select.form-select[size]:not([size="1"]),
select.form-control[multiple] {
    height: auto;
}

div.form-control,
p.form-control,
span.form-control {
    padding-top: 9px;
    padding-bottom: 9px;
}

select.form-select[multiple],
select.form-control[multiple] {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* 文件选择框：按钮与输入框同高 */
input.form-control[type="file"] {
    line-height: calc(var(--gs-field-height) - 2px);
    padding-left: 0;
}

input.form-control[type="file"]::file-selector-button {
    height: calc(var(--gs-field-height) - 2px);
    margin: 0 var(--gs-field-px) 0 0;
    padding: 0 var(--gs-field-px);
}

input.form-control[type="color"] {
    padding: 4px;
    width: 64px;
}

textarea.form-control {
    line-height: 1.55;
    min-height: 96px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-control::placeholder {
    color: var(--gs-text-muted, #9A9A94);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--gs-field-border-hover);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--gs-field-bg);
    border-color: var(--gs-field-focus-border);
    box-shadow: var(--gs-field-focus-ring);
    color: var(--gs-ink, #1C1C1C);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--gs-field-bg-disabled);
    border-color: var(--gs-field-border);
    color: var(--gs-text-secondary, #6B6B66);
    cursor: not-allowed;
    opacity: 1;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    background-image: none;
    border-color: var(--gs-field-error);
    padding-right: var(--gs-field-px);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--gs-field-error);
    box-shadow: var(--gs-field-error-ring);
}

/* 尺寸 */
.form-control-sm,
.form-select-sm {
    border-radius: 6px;
    font-size: 13px;
    height: var(--gs-field-height-sm);
    min-height: var(--gs-field-height-sm);
    padding-left: 10px;
    padding-right: 10px;
}

.form-select-sm {
    padding-right: 32px;
}

.form-control-lg,
.form-select-lg {
    border-radius: 10px;
    font-size: 15px;
    height: var(--gs-field-height-lg);
    min-height: var(--gs-field-height-lg);
    padding-left: 16px;
    padding-right: 16px;
}

.form-select-lg {
    padding-right: 40px;
}

/* 数字输入去掉浏览器上下箭头 */
input.form-control[type="number"] {
    -moz-appearance: textfield;
}

input.form-control[type="number"]::-webkit-outer-spin-button,
input.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========== 3. 输入组 ========== */
.input-group-text {
    background-color: var(--gs-field-addon-bg);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-field-radius);
    color: var(--gs-text-secondary, #6B6B66);
    font-size: var(--gs-field-font);
    height: var(--gs-field-height);
    min-height: var(--gs-field-height);
    padding: 0 var(--gs-field-px);
}

.input-group-sm > .input-group-text { height: var(--gs-field-height-sm); min-height: var(--gs-field-height-sm); font-size: 13px; padding: 0 10px; }
.input-group-lg > .input-group-text { height: var(--gs-field-height-lg); min-height: var(--gs-field-height-lg); padding: 0 16px; }
.input-group-sm > .form-control, .input-group-sm > .form-select { height: var(--gs-field-height-sm); min-height: var(--gs-field-height-sm); font-size: 13px; }
.input-group-lg > .form-control, .input-group-lg > .form-select { height: var(--gs-field-height-lg); min-height: var(--gs-field-height-lg); font-size: 15px; }

/* 输入组：子元素拉伸等高（含 select2 容器、按钮） */
.input-group { align-items: stretch; }
.input-group > .btn { min-width: 0; }

.input-group-text .form-check {
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.input-group-text .form-check .form-check-input {
    float: none;
    margin: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group:focus-within .input-group-text {
    border-color: var(--gs-field-focus-border);
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 5;
}

/* 输入组里包了一层 div 的 select2：去掉左侧圆角（宽度由 .flex-grow-1 控制） */
.input-group > :not(:first-child) .select2-container--default .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ========== 4. Select2（与 .form-select 同规格） ========== */
.select2-container--default .select2-selection--single {
    height: var(--gs-field-height);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--gs-field-bg);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-field-radius);
    min-height: var(--gs-field-height);
    padding: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gs-ink, #1C1C1C);
    font-size: var(--gs-field-font);
    line-height: calc(var(--gs-field-height) - 2px);
    padding-left: var(--gs-field-px);
    padding-right: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gs-text-muted, #9A9A94);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--gs-field-height) - 2px);
    right: var(--gs-field-px);
    top: 0;
    width: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: var(--gs-field-chevron);
    background-position: center;
    background-size: 16px 16px;
    height: 16px;
    left: 0;
    margin-top: -8px;
    padding: 0;
    top: 50%;
    width: 16px;
}

.select2-container--default:hover:not(.select2-container--disabled) .select2-selection {
    border-color: var(--gs-field-border-hover);
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--gs-field-focus-border) !important;
    box-shadow: var(--gs-field-focus-ring) !important;
}

.select2-container--default.select2-container--disabled .select2-selection {
    background-color: var(--gs-field-bg-disabled);
    cursor: not-allowed;
}

.select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: var(--gs-text-muted, #9A9A94);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    min-height: calc(var(--gs-field-height) - 2px);
    padding: 4px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    height: 26px;
    line-height: 24px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 26px;
    margin: 0;
}

/* select2 小 / 大尺寸（.form-select-sm / -lg 初始化出来的容器，或包在 .input-group-sm / -lg 里） */
.input-group-sm .select2-container--default .select2-selection--single,
.select2-container--default .form-select-sm.select2-selection--single { height: var(--gs-field-height-sm); min-height: var(--gs-field-height-sm); }
.input-group-sm .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--gs-field-height-sm) - 2px); font-size: 13px; }
.input-group-sm .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--gs-field-height-sm) - 2px); }
.input-group-lg .select2-container--default .select2-selection--single { height: var(--gs-field-height-lg); min-height: var(--gs-field-height-lg); }
.input-group-lg .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--gs-field-height-lg) - 2px); }
.input-group-lg .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--gs-field-height-lg) - 2px); }

/* 下拉面板搜索框 */
.select2-container--default .select2-search--dropdown .select2-search__field { height: var(--gs-field-height-sm); }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gs-brand-50, #EAF8E7);
    border: 1px solid var(--gs-brand-100, #C8EFC1);
    border-radius: 6px;
    color: var(--gs-brand-800, #044B39);
    font-size: 13px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--gs-brand-800, #044B39);
}

/* 下拉面板 */
.select2-dropdown {
    background-color: var(--gs-field-bg);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-field-radius);
    box-shadow: 0 8px 24px rgba(28, 28, 28, 0.08);
    overflow: hidden;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 4px;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--gs-field-border);
    border-radius: 6px;
    font-size: var(--gs-field-font);
    padding: 0 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--gs-field-focus-border);
    box-shadow: var(--gs-field-focus-ring);
    outline: 0;
}

.select2-results__option {
    color: var(--gs-text, #3A3A37);
    font-size: var(--gs-field-font);
    padding: 8px var(--gs-field-px);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--gs-surface-hover, #F3F3F1) !important;
    color: var(--gs-ink, #1C1C1C) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: var(--gs-brand-50, #EAF8E7);
    color: var(--gs-brand-800, #044B39);
    font-weight: 500;
}

/* ========== 5. 复选框 / 单选 / 开关 ========== */
.form-check-input {
    background-color: var(--gs-field-bg);
    border: 1px solid #C9C9C4;
    height: 16px;
    width: 16px;
}

.form-check-input:hover:not(:disabled) {
    border-color: var(--gs-text-muted, #9A9A94);
}

.form-check-input:focus {
    border-color: var(--gs-field-focus-border);
    box-shadow: var(--gs-field-focus-ring);
}

.form-check-input:checked {
    background-color: var(--gs-brand-800, #044B39);
    border-color: var(--gs-brand-800, #044B39);
}

.form-switch .form-check-input {
    border-radius: 2em;
    height: 20px;
    width: 36px;
}

.form-check-label {
    color: var(--gs-text, #3A3A37);
    font-size: var(--gs-field-font);
    font-weight: 400;
}

/* ========== 6. 行内代码 / Note 标签 ========== */
:not(pre) > code {
    background-color: var(--gs-brand-50, #EAF8E7);
    border-radius: 4px;
    color: var(--gs-brand-800, #044B39);
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;
}

/* ========== 7. 模板内容区（固定文案 + 可编辑字段） ==========
   布局用 Bootstrap 工具类：class="form-template d-flex flex-wrap align-items-center gap-50" */
.form-template {
    background-color: var(--gs-bg, #F8F8F7);
    border: 1px dashed var(--gs-field-border);
    border-radius: 10px;
    color: var(--gs-ink, #1C1C1C);
    font-size: var(--gs-field-font);
    padding: 14px 16px;
}

.form-template .form-control {
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    text-align: center;
    width: 112px;
}

/* ========== 8. 第三方控件同规格 ==========
   flatpickr 生成的可见输入框、DataTables 搜索框 / 每页条数、tagify、bootstrap-select */
.flatpickr-input.form-control,
.flatpickr-input ~ .form-control.input {
    height: var(--gs-field-height);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: var(--gs-field-height-sm);
    min-height: var(--gs-field-height-sm);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_length select {
    padding-right: 32px;
}

.tagify.form-control {
    height: auto;
    min-height: var(--gs-field-height);
    padding: 3px 6px;
    align-items: center;
}

.bootstrap-select > .dropdown-toggle {
    height: var(--gs-field-height);
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* 数字步进（touchspin）：输入框与两侧按钮同高 */
.bootstrap-touchspin.input-group > input.form-control {
    height: var(--gs-field-height);
    padding-top: 0;
    padding-bottom: 0;
}

.bootstrap-touchspin.input-group-sm > input.form-control {
    height: var(--gs-field-height-sm);
}

.bootstrap-touchspin.input-group > .input-group-btn > .btn,
.bootstrap-touchspin.input-group > .btn {
    min-height: var(--gs-field-height);
    min-width: var(--gs-field-height);
    padding: 0;
}