/* Studio Savoy — one look for every form field, on the public site and in the admin.
   Loaded after site.css / admin.css. Fields are 16px so iPhones don't zoom in when you tap one. */
:root {
  --f-border: rgba(54, 18, 21, .24);
  --f-border-hover: rgba(54, 18, 21, .45);
  --f-focus: #74262c;
  --f-ring: rgba(116, 38, 44, .18);
  --f-bg: #fff;
  --f-radius: 12px;
  --f-h: 48px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23361215' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* labels: the text above a field */
:is(.form, .adm-form) label { display: grid; gap: 6px; margin-bottom: 14px; font-size: .92rem; font-weight: 500; color: #361215; }
:is(.form, .adm-form) label small, :is(.form, .adm-form) label .opt { display: inline; font-weight: 400; color: #74625a; font-size: .85rem; }

/* text-like fields, selects, textareas */
input:not([type=hidden], [type=checkbox], [type=radio], [type=color], [type=submit], [type=button], [type=range], [type=file]),
select, textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: var(--f-h); margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--f-border); border-radius: var(--f-radius);
  background-color: var(--f-bg); color: #361215;
  font: 400 16px/1.35 var(--sans, "Jost", system-ui, sans-serif);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9b8a82; opacity: 1; }
:is(input, select, textarea):hover:not(:focus):not(:disabled) { border-color: var(--f-border-hover); }
:is(input, select, textarea):focus { outline: none; border-color: var(--f-focus); box-shadow: 0 0 0 4px var(--f-ring); }
:is(input, select, textarea):disabled { background: #f6f0ea; color: #8a7a74; cursor: not-allowed; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select { padding-right: 42px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 15px center; cursor: pointer; }
input[type=date], input[type=time] { cursor: text; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=number]::-webkit-inner-spin-button { opacity: .5; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* checkboxes and radios: drawn by us, the same everywhere */
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0; display: inline-grid; place-content: center;
  border: 1.5px solid var(--f-border-hover); background: #fff; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type=checkbox] { border-radius: 7px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before {
  content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .15s ease;
  background: #fff; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
input[type=radio]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s ease; }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--f-focus); border-color: var(--f-focus); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--f-ring); }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--f-focus); }

/* a checkbox with its sentence */
:is(.form, .adm-form) label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: #5e4a46; cursor: pointer; }
:is(.form, .adm-form) label.check input { margin-top: 1px; }

/* colour picker: a round swatch */
input[type=color] {
  -webkit-appearance: none; appearance: none; width: var(--f-h); height: var(--f-h); padding: 4px;
  border: 1px solid var(--f-border); border-radius: var(--f-radius); background: #fff; cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 8px; }

/* compact fields in toolbars (timetable filter, admin search, inline row forms) */
.tt-filter select, .adm-search input, .adm-form.inline :is(input, select) { --f-h: 42px; padding-top: 8px; padding-bottom: 8px; }
.tt-filter select { width: auto; min-width: 200px; }
@media (max-width: 640px) { .tt-filter select { min-width: 0; } }

/* file picker */
input[type=file] { font: 400 15px var(--sans, "Jost", sans-serif); color: #5e4a46; width: 100%; padding: 10px; border: 1px dashed var(--f-border-hover); border-radius: var(--f-radius); background: #fff; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--f-border); border-radius: 10px; background: #f6f0ea; color: #361215; font: inherit; font-weight: 500; cursor: pointer; }