/* Pop-ups (the pencil / + next to a customer, vehicle, ... field): every field stretches to the same width
   instead of Django's mix of 20em inputs and 40em text areas. */
body.popup .flex-container{align-items:stretch}
/* Django's narrow-window rule sets rows to calc(100vw - 30px), which overflows the popup's own 20px padding */
body.popup .aligned .form-row,body.popup .aligned .form-row > div{width:auto;max-width:100%}
body.popup .form-row :is(input[type=text],input[type=email],input[type=number],input[type=url],input[type=tel],input[type=password],select,textarea):not(.vDateField):not(.vTimeField){
  width:auto;max-width:100%;box-sizing:border-box}
body.popup .related-widget-wrapper{display:flex;align-items:center;gap:8px;width:auto}
body.popup .related-widget-wrapper > :is(select,span.select2){flex:1 1 0;min-width:0}
body.popup .related-widget-wrapper .select2-container{width:100% !important;min-width:0}

/* Font scale on edit forms: 11px small print, 13px everything else, 20px titles.
   Django's "add another" link (12px) and delete button (14px) are the odd ones out. */
.inline-group div.add-row a,.inline-group .tabular tr.add-row td a,.inline-group a.addlink,.submit-row a.deletelink{font-size:.8125rem}

/* same scale on the remaining odd ones: bulk-action dropdown (14px), help paragraphs on forms (14px), object-name subtitle (16px) */
.actions select{font-size:.8125rem}
.change-form #content p{font-size:.8125rem}
.titles h2{font-size:.8125rem}

/* Sidebar: its left edge lines up with the page title / breadcrumb (both start 40px from the left edge) */
@media (min-width:768px){
  /* 17px narrower than Django's 275px, so the content keeps its position and the page does not grow wider */
  .main.shifted > #nav-sidebar{margin-left:17px;flex-basis:258px}
}

/* space above and below the sidebar menu search box (above: from the breadcrumb bar; below: to the first menu group) */
#nav-filter{margin-top:12px;margin-bottom:12px}

/* Header, breadcrumb and sidebar on the same font scale (11 / 13 / 20px):
   site title 24 -> 20, user links 11 -> 13 (they are actions), breadcrumb 14 -> 13, sidebar group names 12 -> 13 */
#site-name{font-size:1.25rem}
#user-tools,#user-tools button,#logout-form button{font-size:.8125rem}
ol.breadcrumbs li{font-size:.8125rem}
.module caption,.module caption a.section{font-size:.8125rem}
/* admin home page: same scale */
.mini{font-size:.6875rem}
#content-related .module h2,#content-related h3{font-size:.8125rem}

/* Repair order: related fields share one row (intake: 4 across, status and accounting rows: 3 across; 2 per line below 1000px) */
.ro-row .form-multiline{display:grid;gap:20px}
.ro-intake .form-multiline{grid-template-columns:minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,1.7fr) minmax(0,.9fr)}
.ro-row3 .form-multiline{grid-template-columns:repeat(3,minmax(0,1fr))}
.ro-row2 .form-multiline{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
/* product: the two tick boxes side by side; code, name, unit on one line with a narrow unit */
.cust-ident .form-multiline{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.veh-row .form-multiline{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr)}
@media (min-width:1000px){.veh-id .form-multiline > .field-vin{grid-column:span 2}}
.part-flags .form-multiline{grid-template-columns:repeat(2,max-content);gap:12px 40px}
.part-ident .form-multiline{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,.5fr)}
.part-money .form-multiline{grid-template-columns:minmax(0,.6fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.aligned.ro-row .form-row > .fieldBox{width:auto;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0;padding:0}
.ro-row .fieldBox label{float:none;width:auto;padding:0;margin-bottom:6px}
.ro-row .related-widget-wrapper{display:flex;align-items:center;gap:8px;width:auto;float:none}
.ro-row .related-widget-wrapper > :is(select,span.select2){flex:1 1 0;min-width:0}
.ro-row .related-widget-wrapper .select2-container{width:100% !important;min-width:0}
.ro-row .fieldBox textarea{width:100%;max-width:100%;box-sizing:border-box}
.ro-row .fieldBox input[type=text],.ro-row .fieldBox input[type=number],.ro-row .fieldBox input[type=email]{width:100%;max-width:100%;box-sizing:border-box}
.ro-row .fieldBox p.date{margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.ro-row .fieldBox p.date input.vDateField{flex:1 1 0;min-width:0;width:auto}
.ro-row .fieldBox p.date .datetimeshortcuts{flex:none;white-space:nowrap;margin:0}
/* totals: notes on the left (as tall as VAT + discount together), VAT above discount on the right */
.ro-totals .form-multiline{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.ro-totals .form-multiline > .field-notes{grid-column:1;grid-row:1 / span 2;align-self:stretch}
.ro-totals .form-multiline > .field-vat_rate{grid-column:2;grid-row:2}
.ro-totals .form-multiline > .field-discount{grid-column:2;grid-row:1}
.aligned.ro-totals .field-notes textarea{flex:1 1 auto;width:100%;max-width:100%;box-sizing:border-box;min-height:9em}
/* the Paid checkbox has no label above it: sit it on the same line as the neighbouring inputs */
.aligned.ro-row .form-row > .fieldBox.checkbox-row{align-self:end;justify-content:center;min-height:36px;padding-bottom:0}
.ro-row .checkbox-row .checkbox{display:flex;align-items:center;gap:8px}
.ro-row .checkbox-row label{margin:0}
/* up to 1000px (the sidebar eats ~300px of that) the intake, status and accounting rows are 2 per line */
@media (max-width:999px){
  .ro-row:not(.ro-totals) .form-multiline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  /* narrow: notes, VAT, discount one under another */
  .ro-totals .form-multiline{grid-template-columns:minmax(0,1fr)}
  .ro-totals .form-multiline > .fieldBox{grid-column:1;grid-row:auto}
}

/* Narrow windows: Django sizes every field's container as calc(100vw - 30px), which ignores the scrollbar and the row's
   own padding, so textareas (and full-width inputs) run past the right edge. Let the container fill its row instead
   (pop-ups already do this above). */
@media (max-width:767px){
  body .aligned .form-row,body .aligned .form-row > div{width:auto;max-width:100%;min-width:0}
  body .aligned .form-row textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
}

/* Cancel repair order: red outlined button beside Delete in the submit row */
.submit-row .gm-cancel-btn{float:right;margin:0 0 0 auto;height:auto;padding:10px 15px;background:transparent;color:#ba2121;border:1px solid #ba2121;border-radius:4px;font-size:.8125rem;cursor:pointer}
.submit-row .gm-cancel-btn:hover{background:#ba2121;color:#fff}
.submit-row .gm-cancel-btn + a.deletelink{margin-left:8px}
.submit-row a.gm-cancel-btn{display:inline-block;box-sizing:border-box;line-height:1.2;text-decoration:none !important}
.submit-row a.gm-cancel-btn:link,.submit-row a.gm-cancel-btn:visited{color:#ba2121}
.submit-row a.gm-cancel-btn:hover{color:#fff}

/* Stock movement: every input, dropdown and the product picker share one width (the + / pencil icons sit beside the picker) */
body.model-stockmovement .aligned .form-row :is(input[type=text],input[type=number],select){width:32rem;max-width:100%;box-sizing:border-box}
body.model-stockmovement .aligned .form-row .select2-container{width:32rem !important;max-width:100%}
body.model-stockmovement .aligned .form-row .related-widget-wrapper{display:flex;align-items:center;gap:8px;width:auto;float:none}