/*
 * Shared backoffice UI foundation (v1.5.3).
 * All common controls live here instead of per-page overrides. The older
 * style.css keeps page-specific layout and the intentionally compact grid inputs.
 * Import this stylesheet AFTER style.css.
 */
:root {
  --ui-font: 'Golos Text', 'Golos Text Variable', 'Segoe UI', Arial, sans-serif;
  --ui-control-height: 42px;
  --ui-control-radius: 10px;
  --ui-control-border: #d8d1e4;
  --ui-control-text: #25213b;
  --ui-control-focus: #6753bf;
  --ui-control-surface: #fff;
  --ui-control-font-size: 13px;
  --ui-field-gap: 7px;
  --ui-form-gap: 12px;
}
html, body, button, input, select, textarea { font-family:var(--ui-font); }
/* Our DOM helpers produce both labels and controls; this single rule reaches
   forms in Finance, Dictionaries, Products, Tasks, Orders and Settings. */
.app-layout .editor-label {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:var(--ui-field-gap);
  margin:0;
  min-width:0;
  font-size:12px;
  font-weight:650;
  line-height:1.35;
  color:#312a47;
}
.app-layout .editor-label > span:first-child { overflow-wrap:anywhere; }
:is(.app-layout, .login-screen) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.matrix-input),
  select
) {
  appearance:auto;
  box-sizing:border-box;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:var(--ui-control-height);
  min-height:var(--ui-control-height);
  margin:0;
  padding:0 12px;
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-control-radius);
  background:var(--ui-control-surface);
  color:var(--ui-control-text);
  outline:0;
  box-shadow:none;
  font:500 var(--ui-control-font-size)/1.3 var(--ui-font);
}
:is(.app-layout, .login-screen) textarea {
  box-sizing:border-box;
  display:block;
  width:100%;max-width:100%;min-width:0;
  min-height:88px;
  margin:0;
  padding:11px 12px;
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-control-radius);
  background:var(--ui-control-surface);
  color:var(--ui-control-text);
  outline:0;box-shadow:none;
  font:500 var(--ui-control-font-size)/1.5 var(--ui-font);
  resize:vertical;
}
:is(.app-layout, .login-screen) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  border-color:var(--ui-control-focus);
  outline:2px solid #e0d9fb;
  outline-offset:0;
}
:is(.app-layout,.login-screen) :is(input,textarea)::placeholder {color:#938b9e;opacity:1;}
:is(.app-layout,.login-screen) :is(input,select,textarea):disabled {
  cursor:not-allowed;
  background:#f3f0f6;
  color:#7f7887;
}
/* Exclude checkbox/radio/file and stock-matrix cells from normal control size. */
.app-layout input[type="checkbox"],
.app-layout input[type="radio"] { accent-color:#6753bf; }
.app-layout .stock-matrix .matrix-input {
  height:34px;min-height:34px;
  width:86px;max-width:100%;
  padding:5px 8px;
  font:500 12px/1.25 var(--ui-font);
}
.app-layout input[type="file"] {font:500 12px/1.35 var(--ui-font);max-width:100%;}
/* Keep a single action size for all regular buttons; the compact/action-only
   controls (mini-btn, column delete, tabs and modal close) are deliberate. */
.app-layout :is(button.primary-button, button.secondary-btn, button.danger-btn, button.sound-toggle),
.login-screen button.primary-button {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-shrink:0;
  min-height:var(--ui-control-height);
  height:var(--ui-control-height);
  max-width:100%;
  margin:0;
  padding:0 15px;
  border-radius:var(--ui-control-radius);
  box-shadow:none;
  font:700 var(--ui-control-font-size)/1.25 var(--ui-font);
  white-space:normal;
  text-align:center;
}
.login-screen button.primary-button {justify-content:space-between;width:100%;margin-top:7px;}
.app-layout button.mini-btn {min-height:30px;height:auto;padding:5px 9px;border-radius:8px;line-height:1.3;}
.app-layout :is(button.primary-button,button.secondary-btn,button.danger-btn,button.sound-toggle):focus-visible {
  outline:3px solid #c2b4f5;
  outline-offset:2px;
}
/* Common form spacing and layout. */
.app-layout .editor-form,
.app-layout .stock-adjust,
.app-layout .task-editor {gap:var(--ui-form-gap);}
.app-layout .editor-row {align-items:flex-end;gap:var(--ui-form-gap);}
.app-layout .editor-form > .primary-button,
.app-layout .finance-form > .primary-button {align-self:end;}
.app-layout .finance-form {
  max-width:1150px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ui-form-gap);
  align-items:end;
}
.app-layout .finance-form .primary-button {width:100%;max-width:none;}
.app-layout .finance-panel {padding:clamp(16px,2vw,23px);}
.app-layout .finance-panel .section-title {margin:0 0 18px;}
.app-layout .finance-category-editor .editor-row {gap:var(--ui-form-gap);}
.app-layout .dictionaries-layout {grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:16px;}
.app-layout .dictionary-section {padding:18px;}
.app-layout .dictionary-section .editor-heading {font-size:19px;}
.app-layout .dictionary-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;
  gap:var(--ui-form-gap);
  margin-top:14px;
}
.app-layout .dictionary-form > .primary-button {width:100%;}
.app-layout .dictionary-entry {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #eee9f3;
  margin:0;
}
.app-layout .dictionary-entry .editor-input {min-width:0;max-width:none;flex:none;}
.app-layout .dictionary-entry small {min-width:0;word-break:break-word;}
.app-layout .dictionary-entry > button {width:100%;}
.app-layout .status-settings-card .editor-row .editor-label {min-width:0;}
.app-layout .staff-notify-form .editor-label {min-width:0;}
.app-layout .staff-notify-form > button {align-self:end;}
.app-layout .tasks-filters {align-items:end;}
.app-layout .tasks-filters .editor-label {min-width:min(100%,170px);}
.app-layout .user-create {max-width:1100px;}
/* At narrower viewport widths, preserve usable input widths. */
@media (max-width:1060px){
  .app-layout .finance-form {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .app-layout .finance-form {grid-template-columns:1fr;max-width:none;}
  .app-layout .dictionary-form {grid-template-columns:1fr;}
  .app-layout .dictionary-entry {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .app-layout .tasks-filters {display:grid;grid-template-columns:1fr;}
  .app-layout .tasks-filters .editor-label {min-width:0;}
  .app-layout .staff-notify-form {display:grid;}
  .app-layout .finance-form .primary-button,
  .app-layout .staff-notify-form > button {width:100%;max-width:none;}
}
/* Toolbar search stays compact even though normal form controls fill their cells. */
.app-layout .orders-toolbar .board-search {width:min(100%,240px);flex:0 1 240px;}

/* v1.5.4 Dictionary creation: aligned primary action in all three cards. */
.app-layout .dictionary-form {
  display:flex;
  flex-direction:column;
  min-height:222px;
  margin-top:12px;
  gap:12px;
}
.app-layout .dictionary-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.app-layout .dictionary-form > .primary-button {
  margin-top:auto;
  width:100%;
}
@media(max-width:760px){
  .app-layout .dictionary-form {min-height:0;}
}