/* Younique Dermal v1.9.4 — global form-control, dropdown and flow consistency layer.
   Presentation only: no routing, database or business-logic changes. */
:root{
  --yd-ui-border:#d9cbd0;
  --yd-ui-border-hover:#b98d9b;
  --yd-ui-focus:#722c43;
  --yd-ui-bg:#fff;
  --yd-ui-soft:#fbf7f8;
  --yd-ui-text:#2f2026;
  --yd-ui-muted:#76666c;
  --yd-ui-radius:9px;
  --yd-ui-control-h:44px;
}

/* Admin: make every ordinary field/select behave consistently without touching
   checkbox/radio/file/button widgets or the application shell. */
main .content :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea
){
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  border:1px solid var(--yd-ui-border);
  border-radius:var(--yd-ui-radius);
  background-color:var(--yd-ui-bg);
  color:var(--yd-ui-text);
  font:inherit;
  line-height:1.35;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
main .content :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select
){min-height:var(--yd-ui-control-h)}
main .content :where(select){
  padding:10px 38px 10px 12px;
}
main .content select:not([multiple]){
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23722c43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}
main .content textarea{padding:11px 12px;resize:vertical;min-height:96px}
main .content :where(input,select,textarea):hover:not(:disabled){border-color:var(--yd-ui-border-hover)}
main .content :where(input,select,textarea):focus{
  outline:0;
  border-color:var(--yd-ui-focus);
  box-shadow:0 0 0 3px rgba(114,44,67,.10);
}
main .content :where(input,select,textarea):disabled{
  cursor:not-allowed;
  opacity:.68;
  background:#f5f1f2;
}
main .content :where(input,textarea)::placeholder{color:#a08f95;opacity:1}
main .content :where(input[type="checkbox"],input[type="radio"]){accent-color:#722c43}

/* Consistent labels and form rows. */
main .content :where(.admin-form,.settings-form,.account-form,.notification-filter-grid,.payment-filter-grid,.invoice-filter-grid,.order-filter-grid,.admin-product-filters,.product-report-filters,.yd-st-toolbar) label{
  min-width:0;
  color:#4e3c43;
}
main .content .form-row>*{min-width:0}

/* All filter/search bars: fields stay inside their grid and actions never clip. */
main .content :where(.notification-filter-grid,.payment-filter-grid,.invoice-filter-grid,.order-filter-grid,.admin-product-filters,.product-report-filters)>*{min-width:0}
main .content :where(.notification-filter-grid,.payment-filter-grid,.invoice-filter-grid,.order-filter-grid,.admin-product-filters,.product-report-filters) :where(input,select){width:100%;margin-top:6px}
main .content .filter-actions{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
main .content .filter-actions :where(.primary,.secondary,.button,button){
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Notifications: fix the cramped native selects and right-edge action clipping. */
main .content .notification-filter-grid{
  grid-template-columns:minmax(180px,240px) minmax(260px,1fr) auto;
  gap:14px;
  align-items:end;
}
main .content .notification-filter-grid label{font-size:11px;font-weight:800;letter-spacing:.02em}
main .content .notification-filter-grid select{width:100%;margin:0;min-height:44px}
main .content .notification-filter-grid .filter-actions{align-self:end}

/* Isolated Support Tickets toolbar: same visual language as Notifications. */
main .content .yd-st-toolbar{
  display:grid!important;
  grid-template-columns:minmax(180px,240px) minmax(260px,1fr) auto auto!important;
  gap:12px!important;
  align-items:end!important;
  width:100%;
}
main .content .yd-st-toolbar label{display:grid;gap:7px;font-size:11px;font-weight:800}
main .content .yd-st-toolbar .search{min-width:0!important}
main .content .yd-st-toolbar :where(input,select){width:100%;margin:0}
main .content .yd-st-toolbar :where(button,.button){min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}

/* General action consistency without redesigning existing buttons. */
main .content :where(.primary,.secondary,.button):focus-visible,
.storefront :where(button,a,input,select,textarea):focus-visible,
.login-page :where(button,a,input,select,textarea):focus-visible{
  outline:3px solid rgba(114,44,67,.18);
  outline-offset:2px;
}

/* Storefront/account dropdowns: remove browser-default rendering while preserving
   each existing page layout and brand colours. */
.storefront select{
  box-sizing:border-box;
  min-height:44px;
  max-width:100%;
  padding:10px 38px 10px 12px!important;
  border:1px solid var(--yd-ui-border)!important;
  border-radius:9px!important;
  background-color:#fff!important;
  color:var(--yd-ui-text)!important;
  font:inherit!important;
}
.storefront select:not([multiple]){
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23722c43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:12px 8px!important;
}
.storefront select:hover:not(:disabled){border-color:var(--yd-ui-border-hover)!important}
.storefront select:focus{outline:0!important;border-color:var(--yd-ui-focus)!important;box-shadow:0 0 0 3px rgba(114,44,67,.10)!important}
.storefront :where(input[type="checkbox"],input[type="radio"]){accent-color:#722c43}

/* Authentication fields keep their existing layout, with clearer focus feedback. */
.login-page input:focus,.login-page select:focus,.login-page textarea:focus{
  outline:0;
  border-color:#722c43!important;
  box-shadow:0 0 0 3px rgba(114,44,67,.10);
}

/* Responsive flow: collapse filters before they can overflow the content panel. */
@media(max-width:1100px){
  main .content .notification-filter-grid{grid-template-columns:1fr 1fr}
  main .content .notification-filter-grid .filter-actions{grid-column:1/-1}
  main .content .yd-st-toolbar{grid-template-columns:1fr 1fr!important}
  main .content .yd-st-toolbar :where(button,.button){width:100%}
}
@media(max-width:700px){
  main .content .notification-filter-grid{grid-template-columns:1fr}
  main .content .notification-filter-grid .filter-actions{grid-column:auto;width:100%}
  main .content .notification-filter-grid .filter-actions>*{flex:1 1 140px}
  main .content .yd-st-toolbar{grid-template-columns:1fr!important}
  main .content .yd-st-toolbar :where(button,.button){width:100%}
  main .content .form-row{grid-template-columns:1fr!important}
}