/* =====================================================================
   SocialQd — form system. Loads after theme.css.
   Every field, dropdown, date picker and color picker shares one look:
   soft surface, rounded corners, brand-tinted focus ring.
   ===================================================================== */
:root {
    --sq-field-h: 2.6rem;
    --sq-field-radius: 12px;
    --sq-field-bg: var(--sp-surface);
    --sq-field-border: var(--sp-border);
    --sq-field-hover: color-mix(in srgb, var(--bs-body-color) 20%, var(--sp-border));
    --sq-menu-shadow: 0 18px 40px -14px rgba(17, 24, 39, .28), 0 2px 6px rgba(17, 24, 39, .06);
}
[data-bs-theme="dark"] { --sq-menu-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04); }

/* ---- Text inputs, selects, textareas ---- */
.form-control, .form-select {
    border-radius: var(--sq-field-radius); border: 1px solid var(--sq-field-border); background-color: var(--sq-field-bg);
    min-height: var(--sq-field-h); padding: .55rem .85rem; font-size: .9rem; color: var(--bs-body-color);
    box-shadow: var(--sp-shadow-xs); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control-sm, .form-select-sm { --sq-field-h: 2.15rem; border-radius: 10px; padding: .32rem .7rem; font-size: .84rem; }
.form-control-lg, .form-select-lg { --sq-field-h: 3.1rem; border-radius: 14px; font-size: 1rem; }
textarea.form-control { min-height: 6rem; line-height: 1.55; resize: vertical; }
.form-control:hover, .form-select:hover { border-color: var(--sq-field-hover); }
.form-control:focus, .form-select:focus {
    border-color: var(--sp-primary); box-shadow: var(--sp-ring); background-color: var(--sq-field-bg); color: var(--bs-body-color); outline: 0;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--sp-surface-2); opacity: .8; }
.form-select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23858b99' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-size: 14px 14px; background-position: right .85rem center;
}
.form-label { font-weight: 600; font-size: .84rem; margin-bottom: .4rem; color: var(--bs-body-color); }
.form-text { font-size: .78rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.is-invalid.form-control, .is-invalid.form-select { border-color: var(--bs-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger) 14%, transparent); }
.invalid-feedback { font-size: .78rem; font-weight: 500; }

/* Input groups keep one continuous rounded shape */
.input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text, .input-group > .btn { min-height: var(--sq-field-h); }
.input-group-text { background: var(--sp-surface-2); border-color: var(--sq-field-border); color: var(--bs-secondary-color); border-radius: var(--sq-field-radius); }
.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; }
.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; }

/* File inputs: a real button instead of the browser default */
.form-control[type=file] { padding: .3rem; line-height: 1.9; cursor: pointer; }
.form-control[type=file]::file-selector-button {
    margin: 0 .75rem 0 0; padding: .4rem .9rem; border: 0; border-radius: 9px; font-weight: 600; font-size: .82rem;
    background: color-mix(in srgb, var(--sp-primary) 12%, var(--sp-surface)); color: var(--sp-primary-text, var(--sp-primary));
    transition: background .15s;
}
.form-control[type=file]:hover::file-selector-button { background: color-mix(in srgb, var(--sp-primary) 20%, var(--sp-surface)); }
.form-control-sm[type=file] { padding: .2rem; }
.form-control-sm[type=file]::file-selector-button { padding: .25rem .7rem; }

/* Checkboxes, radios, switches */
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid color-mix(in srgb, var(--bs-body-color) 28%, var(--sp-border)); background-color: var(--sq-field-bg); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.form-check-input[type=checkbox] { border-radius: 6px; }
.form-check-input:focus { box-shadow: var(--sp-ring); border-color: var(--sp-primary); }
.form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
.form-switch { padding-left: 3.05em; }
.form-switch .form-check-input { width: 2.35em; height: 1.3em; border-radius: 2em; margin-left: -3.05em; margin-top: .1em; }
.form-check-label { cursor: pointer; }
.form-range::-webkit-slider-thumb { background: var(--sp-primary); }
.form-range::-moz-range-thumb { background: var(--sp-primary); }

/* Hide the browser's native date/time icon — the custom picker provides its own */
input.sq-date-input { cursor: pointer; padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858b99'%3e%3cpath d='M4.5 0a.5.5 0 0 1 .5.5V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-size: 15px; background-position: right .85rem center; }

/* =====================================================================
   Searchable dropdowns (Tom Select) — every <select> becomes one
   ===================================================================== */
.ts-wrapper { min-height: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.ts-wrapper.form-select, .ts-wrapper.form-control { background-image: none !important; }
.ts-wrapper .ts-control, .ts-wrapper.form-select .ts-control, .ts-wrapper.single.input-active .ts-control {
    min-height: var(--sq-field-h); border-radius: var(--sq-field-radius); border: 1px solid var(--sq-field-border) !important;
    background: var(--sq-field-bg); color: var(--bs-body-color); padding: .5rem 2.4rem .5rem .85rem; font-size: .9rem;
    box-shadow: var(--sp-shadow-xs); cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23858b99' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-size: 14px; background-position: right .85rem center;
    transition: border-color .15s, box-shadow .15s;
}
.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control, .ts-wrapper.sq-sm .ts-control { min-height: 2.15rem; border-radius: 10px; padding: .28rem 2.2rem .28rem .7rem; font-size: .84rem; }
.ts-wrapper .ts-control:hover { border-color: var(--sq-field-hover) !important; }
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--sp-primary) !important; box-shadow: var(--sp-ring); }
.ts-wrapper.dropdown-active .ts-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23858b99' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m4 10 4-4 4 4'/%3e%3c/svg%3e"); }
.ts-wrapper .ts-control > input { color: var(--bs-body-color); font-size: inherit; min-width: 3rem; }
.ts-wrapper.single .ts-control > input { cursor: pointer; }
.ts-wrapper.single .ts-control > .item { display: block !important; }
.ts-wrapper.plugin-dropdown_input .ts-control > input { position: absolute; opacity: 0; width: 1px !important; min-width: 0; }
.ts-wrapper.disabled .ts-control { opacity: .65; background-color: var(--sp-surface-2); cursor: not-allowed; }
.ts-wrapper.multi .ts-control > .item {
    background: color-mix(in srgb, var(--sp-primary) 12%, var(--sp-surface)); color: var(--sp-primary-text, var(--sp-primary));
    border: 0; border-radius: 999px; padding: .12rem .6rem; font-weight: 600; font-size: .8rem;
}
.ts-wrapper.multi .ts-control > .item .remove { border: 0; margin-left: .2rem; opacity: .7; }

.ts-dropdown {
    margin-top: 6px; border: 1px solid var(--sp-border); border-radius: 14px; background: var(--sp-surface); color: var(--bs-body-color);
    box-shadow: var(--sq-menu-shadow); overflow: hidden; z-index: 1065; padding: 0; animation: sqMenuIn .14s ease-out;
}
@keyframes sqMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ts-dropdown .dropdown-input-wrap { padding: .55rem .55rem .35rem; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface-2); }
.ts-dropdown .dropdown-input {
    width: 100%; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-surface) no-repeat .7rem center / 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858b99'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
    padding: .45rem .7rem .45rem 2rem; font-size: .86rem; color: var(--bs-body-color); box-shadow: none; outline: 0;
}
.ts-dropdown .dropdown-input:focus { border-color: var(--sp-primary); box-shadow: var(--sp-ring); }
.ts-dropdown .ts-dropdown-content { max-height: 280px; padding: .35rem; scroll-behavior: smooth; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .optgroup-header {
    padding: .5rem .7rem; border-radius: 9px; font-size: .88rem; color: var(--bs-body-color); display: flex; align-items: center; gap: .5rem;
}
.ts-dropdown .optgroup-header { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); background: none; padding-top: .7rem; }
.ts-dropdown .option.active { background: color-mix(in srgb, var(--sp-primary) 10%, var(--sp-surface)); color: var(--bs-body-color); }
.ts-dropdown .option.selected { font-weight: 650; color: var(--sp-primary-text, var(--sp-primary)); }
.ts-dropdown .option.selected::after { content: ''; margin-left: auto; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69z'/%3e%3c/svg%3e") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69z'/%3e%3c/svg%3e") center / contain no-repeat; }
.ts-dropdown .no-results { color: var(--bs-secondary-color); justify-content: center; padding: .9rem; }
.ts-dropdown .highlight { background: color-mix(in srgb, var(--sp-primary) 22%, transparent); color: inherit; border-radius: 3px; }

/* =====================================================================
   Date & time picker (flatpickr), themed
   ===================================================================== */
.flatpickr-calendar {
    background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; box-shadow: var(--sq-menu-shadow) !important;
    padding: .55rem; width: auto; font-family: var(--bs-body-font-family); color: var(--bs-body-color);
}
.flatpickr-calendar.open { animation: sqMenuIn .16s ease-out; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { align-items: center; padding: .1rem .1rem .45rem; }
.flatpickr-months .flatpickr-month { height: 38px; color: var(--bs-body-color); fill: var(--bs-body-color); }
.flatpickr-current-month { font-size: .98rem; font-weight: 700; padding-top: 8px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; border-radius: 8px; background: transparent; color: var(--bs-body-color); }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .flatpickr-current-month input.cur-year:hover { background: var(--sp-surface-2); }
.flatpickr-current-month input.cur-year { font-weight: 700; color: var(--bs-body-color); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    top: .6rem; width: 32px; height: 32px; padding: 9px; border-radius: 10px; color: var(--bs-secondary-color); fill: var(--bs-secondary-color);
}
.flatpickr-months .flatpickr-prev-month { left: .6rem; } .flatpickr-months .flatpickr-next-month { right: .6rem; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--sp-surface-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--sp-primary); }
span.flatpickr-weekday { color: var(--bs-secondary-color); font-weight: 650; font-size: .72rem; letter-spacing: .04em; }
.flatpickr-day { border-radius: 10px; border: 0; color: var(--bs-body-color); font-weight: 500; font-size: .86rem; }
.flatpickr-day:hover, .flatpickr-day:focus { background: color-mix(in srgb, var(--sp-primary) 10%, var(--sp-surface)); }
.flatpickr-day.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sp-primary) 55%, transparent); }
.flatpickr-day.today:hover { background: color-mix(in srgb, var(--sp-primary) 12%, var(--sp-surface)); color: var(--bs-body-color); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--sp-primary); color: var(--sp-on-primary, #fff); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sp-primary) 80%, transparent); font-weight: 700;
}
.flatpickr-day.inRange { background: color-mix(in srgb, var(--sp-primary) 12%, var(--sp-surface)); box-shadow: none; border-radius: 0; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: color-mix(in srgb, var(--bs-secondary-color) 35%, transparent); background: none; }
.flatpickr-time { border-top: 1px solid var(--sp-border) !important; margin-top: .4rem; padding-top: .3rem; max-height: none; height: 46px; line-height: 46px; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--bs-body-color); font-weight: 650; font-size: 1rem; border-radius: 10px; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--sp-surface-2); }
.flatpickr-time .flatpickr-time-separator { color: var(--bs-secondary-color); }
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--bs-secondary-color); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--bs-secondary-color); }
.sq-fp-footer { display: flex; justify-content: space-between; gap: .4rem; padding: .5rem .2rem .1rem; border-top: 1px solid var(--sp-border); margin-top: .35rem; }
.sq-fp-footer button { border: 0; background: none; font-size: .8rem; font-weight: 650; padding: .3rem .6rem; border-radius: 8px; color: var(--sp-primary-text, var(--sp-primary)); }
.sq-fp-footer button:hover { background: color-mix(in srgb, var(--sp-primary) 10%, var(--sp-surface)); }
.sq-fp-footer button.muted { color: var(--bs-secondary-color); }

/* =====================================================================
   Brand color field
   ===================================================================== */
.sq-color-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sq-color-swatch {
    position: relative; width: var(--sq-field-h); height: var(--sq-field-h); border-radius: 12px; background: var(--c); cursor: pointer; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 4px 12px -4px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .12s;
}
.sq-color-swatch:hover { transform: scale(1.05); }
.sq-color-swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.sq-color-hex { position: relative; width: 8.5rem; }
.sq-color-hex span { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); font-weight: 600; pointer-events: none; }
.sq-color-hex .form-control { padding-left: 1.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; }
.sq-color-preview {
    display: inline-flex; align-items: center; gap: .4rem; height: var(--sq-field-h); padding: 0 1rem; border-radius: 10px;
    background: var(--c); color: var(--on); font-weight: 650; font-size: .86rem; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 65%, transparent);
}
.sq-color-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.sq-color-preset {
    width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .12s, box-shadow .12s;
}
.sq-color-preset:hover { transform: scale(1.12); }
.sq-color-preset.active { box-shadow: 0 0 0 2px var(--sp-surface), 0 0 0 4px var(--c); }
.sq-color-hex .form-control.is-invalid { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger) 14%, transparent); }

/* =====================================================================
   Button style chooser (solid / gradient)
   ===================================================================== */
.sq-bstyle-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.sq-bstyle-opt { margin: 0; cursor: pointer; }
.sq-bstyle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sq-bstyle-card { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .75rem .85rem; border-radius: 14px; border: 1.5px solid var(--sp-border); background: var(--sp-surface); transition: border-color .15s, box-shadow .15s, transform .12s; }
.sq-bstyle-card strong { font-size: .88rem; }
.sq-bstyle-card small { font-size: .74rem; color: var(--bs-secondary-color); line-height: 1.3; }
.sq-bstyle-swatch { display: block; height: 26px; border-radius: 8px; margin-bottom: .45rem; background: var(--sp-primary); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sq-bstyle-opt:hover .sq-bstyle-card { transform: translateY(-1px); border-color: color-mix(in srgb, var(--sp-primary) 45%, var(--sp-border)); }
.sq-bstyle-opt input:checked + .sq-bstyle-card { border-color: var(--sp-primary); box-shadow: var(--sp-ring); background: color-mix(in srgb, var(--sp-primary) 5%, var(--sp-surface)); }
.sq-bstyle-opt input:focus-visible + .sq-bstyle-card { box-shadow: var(--sp-ring); }
.sq-bstyle-grad { margin-top: .9rem; padding: .85rem .9rem; border-radius: 12px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); }
.sq-bstyle-grad[hidden], .sq-bstyle-to[hidden] { display: none; }
.sq-bstyle-preview { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; padding: .8rem .9rem; border-radius: 12px; border: 1px dashed var(--sp-border); }
.sq-bstyle-demo { border: 0; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(17,24,39,.35); transition: background-position .45s ease; pointer-events: none; }