/* Site-wide typography and form control standards */

:root {
    --app-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --app-font-size: 14px;
    --app-input-height: 36px;
    --app-input-padding-y: 10px;
    --app-input-padding-x: 12px;
    --app-input-icon-size: 16px;
    --app-input-icon-gap: 12px;
    --app-input-padding-left-icon: 40px;
    --app-input-padding-right-icon: 36px;
    --app-input-padding-right-dropdown: 36px;
    --app-form-label-height: 1.25rem;
    --app-form-label-gap: 8px;
    --app-input-icon-top: calc(var(--app-form-label-height) + var(--app-form-label-gap) + (var(--app-input-height) / 2));
}

html {
    font-family: var(--app-font-family);
    font-size: var(--app-font-size);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
body.module-layout,
body.module-layout #content,
body.module-layout #content.module-scroll,
.main-content,
.wrapper {
    font-family: inherit;
    font-size: var(--app-font-size);
}

button,
input,
select,
textarea,
optgroup,
label,
table,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li {
    font-family: inherit;
}

i[class*="fa-"],
.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

/* Shared text/select inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
select,
.form-control,
.dropdown-mask input:not([type="checkbox"]):not([type="radio"]),
.search-box input,
.search-bar input,
.kitchen-stock-search-box input,
.main-stock-search-box input,
.event-module input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
.event-module select,
.flatpickr-input,
.hh-form-group input:not([type="checkbox"]):not([type="radio"]),
.hh-form-group select {
    box-sizing: border-box;
    height: var(--app-input-height) !important;
    padding: var(--app-input-padding-y) var(--app-input-padding-x);
    font-size: var(--app-font-size) !important;
    line-height: 1.2;
}

textarea,
textarea.form-control,
.event-module textarea,
.hh-form-group textarea {
    box-sizing: border-box;
    height: auto !important;
    min-height: var(--app-input-height);
    padding: var(--app-input-padding-y) var(--app-input-padding-x) !important;
    font-size: var(--app-font-size) !important;
    line-height: 1.4;
}

/* Select2 */
.select2-container .select2-selection--single {
    height: var(--app-input-height) !important;
    min-height: var(--app-input-height);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: var(--app-input-padding-y) var(--app-input-padding-x) !important;
    line-height: 14px !important;
    font-size: var(--app-font-size) !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--app-input-height) - 2px);
}

.select2-container .select2-search__field {
    height: var(--app-input-height);
    padding: var(--app-input-padding-y) var(--app-input-padding-x);
    font-size: var(--app-font-size);
}

.select2-container--default .select2-selection--multiple {
    min-height: var(--app-input-height);
    padding: 4px var(--app-input-padding-x);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    font-size: var(--app-font-size);
}

/* ========== Inputs / selects with internal icons ========== */

/* Dropdown combobox — room for arrow on the right */
.dropdown-mask input,
.dropdown-mask input.form-control {
    padding-right: var(--app-input-padding-right-dropdown) !important;
}

/* Left icon in form-group — adjacent sibling (no :has dependency) */
.form-group {
    position: relative;
}

.form-group > i.input-icon + input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.form-group > i.input-icon + select,
.form-group > i.input-icon + textarea,
.form-group > i.input-icon + .form-control,
.form-group > i.input-icon + .dropdown-mask input {
    padding-top: var(--app-input-padding-y) !important;
    padding-bottom: var(--app-input-padding-y) !important;
    padding-right: var(--app-input-padding-x) !important;
    padding-left: var(--app-input-padding-left-icon) !important;
}

.form-group > i.input-icon + .dropdown-mask input {
    padding-right: var(--app-input-padding-right-dropdown) !important;
}

.form-group > i.input-icon + textarea,
.form-group > i.input-icon + textarea.form-control {
    padding-top: var(--app-input-padding-y) !important;
    padding-bottom: var(--app-input-padding-y) !important;
    padding-right: var(--app-input-padding-x) !important;
    padding-left: var(--app-input-padding-left-icon) !important;
}

.form-group > i.input-icon {
    position: absolute !important;
    left: var(--app-input-icon-gap) !important;
    /* Anchor to input center (below label), not form-group bottom — stays aligned when .field-error appears */
    top: var(--app-input-icon-top) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: var(--app-input-icon-size);
    height: var(--app-input-icon-size);
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: var(--app-input-icon-size) !important;
    line-height: 1 !important;
    pointer-events: none;
    z-index: 2;
    color: #0ea5e9;
}

/* Form groups without a label — icon is the first child */
.form-group > i.input-icon:first-child {
    top: calc(var(--app-input-height) / 2) !important;
}

.form-group > i.input-icon + textarea,
.form-group > i.input-icon + textarea.form-control {
    min-height: 80px;
}

.form-group > i.input-icon:has(+ textarea),
.form-group > i.input-icon:has(+ textarea.form-control) {
    top: calc(var(--app-form-label-height) + var(--app-form-label-gap) + var(--app-input-padding-y)) !important;
    bottom: auto !important;
    transform: none !important;
}

.form-group > i.input-icon + .price-input,
.form-group > i.input-icon + .details-price-input {
    padding-left: calc(var(--app-input-padding-left-icon) + 8px) !important;
}

/* Right icon wrapper (event module) */
.input-with-icon {
    position: relative;
    width: 100%;
}

.input-with-icon > input,
.input-with-icon > select,
.input-with-icon > .form-control {
    padding-right: var(--app-input-padding-right-icon) !important;
    width: 100%;
}

.input-with-icon > i {
    position: absolute;
    right: var(--app-input-icon-gap);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
}

/* Search boxes — icon on the right */
.search-box {
    position: relative;
}

.search-box > input,
.search-box > input[type="text"],
.search-box > input[type="search"] {
    padding-right: var(--app-input-padding-right-icon) !important;
}

.search-box > i:last-child {
    position: absolute;
    right: var(--app-input-icon-gap);
    bottom: calc(var(--app-input-height) / 2);
    transform: translateY(50%);
    pointer-events: none;
    z-index: 2;
    color: #64748b;
    line-height: 1;
}

/* Toolbar search — icon on the left */
.kitchen-stock-search-box,
.main-stock-search-box {
    position: relative;
}

.kitchen-stock-search-box > input,
.main-stock-search-box > input {
    padding-left: var(--app-input-padding-left-icon) !important;
}

.kitchen-stock-search-box > select,
.main-stock-search-box > select {
    padding-left: var(--app-input-padding-x) !important;
}

.kitchen-stock-search-box > i[class*="fa-"],
.main-stock-search-box > i[class*="fa-"] {
    position: absolute;
    left: var(--app-input-icon-gap);
    bottom: calc(var(--app-input-height) / 2);
    transform: translateY(50%);
    pointer-events: none;
    z-index: 2;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
}

/* Inline relative wrappers with icon + input siblings */
div:not(.form-group):not(.search-box):not(.input-with-icon):not(.kitchen-stock-search-box):not(.main-stock-search-box):has(> i[class*="fa-"] + input) > input,
div:not(.form-group):not(.search-box):not(.input-with-icon):has(> i[class*="fa-"] + .form-control) > .form-control {
    padding-left: var(--app-input-padding-left-icon) !important;
}

div:not(.form-group):not(.search-box):not(.input-with-icon):has(> input + i[class*="fa-"]) > input,
div:not(.form-group):not(.search-box):not(.input-with-icon):has(> .form-control + i[class*="fa-"]) > .form-control {
    padding-right: var(--app-input-padding-right-icon) !important;
}

div:not(.form-group):not(.search-box):not(.input-with-icon):not(.kitchen-stock-search-box):not(.main-stock-search-box):has(> i[class*="fa-"] + input) > i[class*="fa-"],
div:not(.form-group):not(.search-box):not(.input-with-icon):has(> i[class*="fa-"] + .form-control) > i[class*="fa-"] {
    position: absolute;
    left: var(--app-input-icon-gap);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

div:not(.form-group):not(.search-box):not(.input-with-icon):has(> input + i[class*="fa-"]) > i[class*="fa-"],
div:not(.form-group):not(.search-box):not(.input-with-icon):has(> .form-control + i[class*="fa-"]) > i[class*="fa-"] {
    position: absolute;
    right: var(--app-input-icon-gap);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* Tables / sections without field icons */
.ingredients-table input,
.ingredients-table .form-control,
.ingredients-table .dropdown-mask input,
.sides-section input[type="number"] {
    padding: var(--app-input-padding-y) var(--app-input-padding-x) !important;
}

.ingredients-table .dropdown-mask input {
    padding-right: var(--app-input-padding-right-dropdown) !important;
}
.btn {
    border: 1px solid transparent;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    background: #fff;
    color: #111827;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-success:hover {
    background: #00a182;
}

.btn-secondary {
   
    background: #eef2f7;
    color: #334155;
}

.btn-secondary:hover {
    background: #e2e8f0;
}