/* JARDS UI CORE 1.0 — the single late-loaded source of shared visual rules.
   Version 283 / stage 1C. Components retain their established DOM and data actions.
   CSS variables intentionally inherit the existing light/gray/dark appearance system. */
:root {
  --jui-space-1:4px; --jui-space-2:8px; --jui-space-3:12px;
  --jui-space-4:16px; --jui-space-5:20px; --jui-space-6:24px;
  --jui-radius-sm:8px; --jui-radius-md:11px; --jui-radius-lg:14px;
  --jui-control-min:44px; --jui-frame:var(--line,#8292a1);
  --jui-bg:var(--surface,#fff); --jui-field:var(--field,var(--surface,#fff));
  --jui-text:var(--text,#183046); --jui-accent:var(--accent,#0b927c);
  --jui-link:#086c82;
  /* Shared layer scale. All content overlays remain below the sticky header. */
  --jui-z-content:0; --jui-z-controls:5; --jui-z-floating:15;
  --jui-z-header:400; --jui-z-popover:420;
  --jui-z-menu-backdrop:800; --jui-z-sidebar:810; --jui-z-toast:900;
}
html[data-gray-theme="true"]:not([data-strong-contrast="true"]) {--jui-link:#84dfd4;}
html[data-theme="dark"]:not([data-gray-theme="true"]):not([data-strong-contrast="true"]) {--jui-link:#8fdbed;}
html[data-strong-contrast="true"] {--jui-link:var(--text,#fff);}

/* Frame and containment rules shared by all JARDS form views. */
.main :is(.panel,.detail,.section,.jobflow-section,.report-section,.catalog-view-summary,.catalog-view-note,
  .catalog-orders,.inspection-order-controls,.jards-custom-card),
.main :is(.form,.two,.toolbar,.heading-actions,.workshop-job-actions),
dialog :is(.form,.two,.dialog-form,.dialog-head,.jards-custom-card) {min-width:0;box-sizing:border-box;}
.main :is(.form,.two,.toolbar,.heading-actions,.workshop-job-actions) > *,
dialog :is(.form,.two,.toolbar,.dialog-head) > * {min-width:0;}
.main :is(.form,.dialog-form,.inspection-order-controls,.jards-custom-editor) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
dialog :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  box-sizing:border-box;max-width:100%;min-width:0;
}
.main :is(button,.outline,.primary,.danger-outline),dialog :is(button,.outline,.primary,.danger-outline){
  overflow-wrap:anywhere;max-width:100%;
}
.main :is(.form,.dialog-form) :is(label,.checkline),
dialog :is(.form,.dialog-form) :is(label,.checkline){min-width:0;}
.main :is(.form,.dialog-form) :is(label,.checkline) {overflow-wrap:anywhere;}
.main :is(.form,.dialog-form) .checkline input[type="checkbox"],dialog .checkline input[type="checkbox"] {
  width:auto!important;min-width:17px!important;min-height:17px!important;flex:0 0 auto;
}
.main a:not(.primary):not(.outline):not(.danger-outline):not(.auth-link):not(.job):not(.job-tile):not(.catalog-mini-open):not([class]),
.supplier-page a:not(.primary):not(.outline):not(.supplier-top a) {text-underline-offset:3px;}
.main .form a[href]:not(.primary):not(.outline),
.supplier-page .supplier-panel a[href]:not(.primary):not(.outline){color:var(--jui-link)!important;text-decoration:underline;}

/* Shared focus treatment. Never remove keyboard affordances. */
html:not([data-strong-contrast="true"]) :is(button,a,summary,input,select,textarea):focus-visible {
  outline:2px solid var(--jui-accent)!important;outline-offset:3px;
}

/* Accordion contract: one outer frame, one clickable summary, no double inset frame. */
.main details:is(.catalog-margin-all,.catalog-used-print).panel{
  box-sizing:border-box;min-width:0;padding:0!important;
  margin:var(--jui-space-3) 0!important;overflow:hidden;
  border:1px solid var(--jui-frame)!important;border-radius:var(--jui-radius-md)!important;
  background:var(--jui-bg)!important;color:var(--jui-text)!important;
}
.main details:is(.catalog-margin-all,.catalog-used-print) > summary.outline{
  display:flex!important;align-items:center;justify-content:space-between;gap:var(--jui-space-3);
  width:100%;max-width:100%;min-height:54px;margin:0!important;
  padding:var(--jui-space-3) var(--jui-space-4)!important;
  box-sizing:border-box;line-height:1.35;
  border:0!important;border-radius:0!important;
  background:transparent!important;color:inherit!important;
  white-space:normal!important;text-align:left;
}
.main details:is(.catalog-margin-all,.catalog-used-print) > .form{
  margin:0!important;padding:var(--jui-space-4)!important;
  border-top:1px solid var(--jui-frame);
}
.main details:is(.catalog-margin-all,.catalog-used-print) > summary::after {flex:0 0 auto;}

/* Interior spacing: borders do not meet labels or controls. */
.main :is(.inspection-order-controls,.jards-custom-card),dialog .jards-custom-card {
  padding:var(--jui-space-4);border-radius:var(--jui-radius-md);
}
.main .jards-section-frame-270:not(.catalog-orders){padding:var(--jui-space-4);}
.main :is(.inspection-order-controls,.jards-custom-card,.jards-section-frame-270) > :is(h3,h4,p):first-child {margin-top:0;}
.main .jards-custom-group{gap:var(--jui-space-3);}

/* Correct separation and wrapping of estimate letterhead on narrow screens. */
.main .estimate .estimate-brand {
  display:flex;align-items:center;justify-content:space-between;gap:var(--jui-space-4);
  min-width:0;flex-wrap:wrap;
}
.main .estimate .estimate-brand > img{flex:0 1 220px;max-width:min(100%,220px);height:auto;object-fit:contain;}
.main .estimate .estimate-brand > div{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;}

/* Common modal spacing, viewport and accessible scrolling. */
body dialog{box-sizing:border-box;max-width:calc(100vw - 24px);overscroll-behavior:contain;}
body dialog .dialog-head,body dialog .preview-head{min-width:0;gap:var(--jui-space-3);}
body dialog .dialog-form{box-sizing:border-box;min-width:0;padding:var(--jui-space-5);}
body dialog .dialog-head :is(h2,strong),body dialog .preview-head strong{min-width:0;overflow-wrap:anywhere;}
body dialog .dialog-head button[data-close],body dialog .preview-head button[data-close]{flex:0 0 auto;}

/* The top bar must win over content toolbars while its popover is open. */
@media screen {
  html body .top {z-index:var(--jui-z-header)!important;overflow:visible;}
  html body .top .jards-quick-appearance{z-index:var(--jui-z-popover)!important;}
  html body .top .jards-quick-menu{z-index:var(--jui-z-popover)!important;}
}
.top .jards-user-name::after{content:" · ";}
/* Logo-mark only on small screens: keeps the account name and role visible. */
.top .home-logo .jards-home-logo-mark{display:none;}
@media screen and (max-width:700px){
  html body .top{display:flex;align-items:center;gap:6px;padding-inline:10px;min-width:0;}
  html body .top .home-logo{flex:0 0 36px;width:36px;min-width:36px;margin:0!important;}
  html body .top .home-logo .jards-home-logo-full{display:none!important;}
  html body .top .home-logo .jards-home-logo-mark{
    display:block!important;width:36px;height:36px;max-width:36px;
    object-fit:contain;object-position:center;background:transparent;
  }
  html body .top>.jards-quick-appearance{flex:0 0 auto;gap:4px;margin:0!important;}
  html body .top .jards-quick-icon{width:30px;height:30px;min-width:30px;min-height:30px;}
  html body .top>.account-panel-link{
    display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-end;
    justify-content:center;gap:0;min-width:0;max-width:none;
    margin-left:auto!important;padding:0!important;
    font-size:clamp(10px,2.8vw,12px);line-height:1.25;text-align:right;
    overflow-wrap:normal!important;word-break:normal;hyphens:none;
  }
  html body .top .jards-user-name{display:block;max-width:100%;overflow-wrap:break-word;}
  html body .top .jards-user-name::after{content:none;}
  html body .top .jards-user-role{display:block;max-width:100%;font-size:clamp(9px,2.45vw,11px);white-space:nowrap;}
  html body .top .jards-quick-menu{max-width:calc(100vw - 20px)!important;}
  /* Sidebar intentionally overlays header while open. */
  html body.menu-open .top{z-index:20!important;}
  html body .main .estimate .estimate-brand{flex-direction:column;align-items:flex-start;}
  html body .main .estimate .estimate-brand>img{flex:0 1 auto;max-width:min(100%,200px);}
  html body .main .estimate .estimate-brand>div{flex:0 1 auto;width:100%;}
  html body dialog .dialog-form{padding:var(--jui-space-4);}
  html body .main details:is(.catalog-margin-all,.catalog-used-print)>summary.outline{padding:12px 14px!important;}
  html body .main :is(.inspection-order-controls,.jards-custom-card){padding:12px;}
}
@media screen and (max-width:360px){
  html body .top{gap:4px;padding-inline:6px;}
  html body .top .menu-toggle{padding-inline:7px;}
  html body .top .home-logo{flex-basis:30px;width:30px;min-width:30px;}
  html body .top .home-logo .jards-home-logo-mark{width:30px;height:30px;}
  html body .top .jards-quick-icon{width:27px;height:27px;min-width:27px;min-height:27px;}
}
@media print{
  html body .top .home-logo .jards-home-logo-mark{display:none!important;}
  /* UI details do not alter white, printable estimates or reports. */
  .main .estimate .estimate-brand{display:flex;flex-direction:row;}
  .main .estimate .estimate-brand>img{max-width:180px;}
}


/* JARDS UI / layer system 1B (282)
   Old collection-view.css sets the panel to z-index:20 and the menu header
   to z-index:20 on mobiles. The later-painted panel could obscure the menu.
   Use one stacking scale for the application; do not use arbitrarily large
   z-index values inside content widgets. Native <dialog> stays in top layer. */
@media screen {
  html body .main {
    isolation:isolate; /* Header and content now share a predictable stack. */
  }
  html body .main > header.top {
    position:relative;
    z-index:var(--jui-z-header)!important;
    overflow:visible;
  }
  html body .main .collection-controls {
    position:relative;
    z-index:var(--jui-z-controls)!important;
    overflow:visible;
    box-sizing:border-box;
    max-width:100%;
  }
  html body .main .collection-columns {position:relative;min-width:0;}
  html body .main .collection-columns fieldset {
    z-index:var(--jui-z-floating)!important;
    background:var(--jui-bg)!important;
    color:var(--jui-text)!important;
  }
  html body .main .collection-columns summary {box-sizing:border-box;max-width:100%;}
  html body .top .jards-quick-appearance,
  html body .top .jards-quick-picker {
    overflow:visible;
  }
  html body .top .jards-quick-menu {
    z-index:var(--jui-z-popover)!important;
    /* A fully opaque popover must stay readable over controls below it. */
    opacity:1;
  }
}

@media screen and (max-width:700px) {
  html body .main > header.top {
    position:sticky!important;
    top:0;
    z-index:var(--jui-z-header)!important;
    isolation:isolate;
  }
  /* Drawer and its dimmer are deliberately above the header and its palettes. */
  html body .app > .menu-backdrop:not([hidden]) {
    z-index:var(--jui-z-menu-backdrop)!important;
  }
  html body .app > .sidebar {
    z-index:var(--jui-z-sidebar)!important;
  }
  html body.menu-open .main > header.top {
    z-index:var(--jui-z-header)!important;
  }
  /* Shared responsive collection control layout: two view actions + three sizes,
     followed by a full-width settings disclosure. Never overlap the top menu. */
  html body .main .collection-controls {
    display:grid!important;
    grid-template-columns:minmax(0, 2fr) minmax(0, 3fr)!important;
    align-items:stretch;
    gap:var(--jui-space-2)!important;
    padding:var(--jui-space-3)!important;
    margin:var(--jui-space-3) 0!important;
  }
  html body .main .collection-switch,
  html body .main .collection-size-buttons {
    display:flex;
    width:100%;
    min-width:0;
    gap:4px;
    align-items:stretch;
  }
  html body .main .collection-controls :is(.collection-switch,.collection-size-buttons)>button {
    box-sizing:border-box;
    flex:1 1 0;
    min-width:0;
    min-height:var(--jui-control-min);
    padding:8px 4px!important;
    font-size:clamp(11px, 2.8vw, 14px)!important;
    line-height:1.25;
    white-space:normal!important;
    overflow-wrap:normal!important;
  }
  html body .main .collection-columns {
    grid-column:1/-1;
    width:100%;
    margin:0!important;
    justify-self:stretch;
  }
  html body .main .collection-columns>summary {
    min-height:var(--jui-control-min);
    width:100%;
    white-space:normal;
    padding:var(--jui-space-3)!important;
  }
  html body .main .collection-columns>fieldset {
    left:0;
    right:0;
    max-width:100%;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    max-height:min(65dvh,520px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
@media screen and (max-width:360px){
  html body .main .collection-controls{gap:6px!important;padding:8px!important;}
  html body .main .collection-controls :is(.collection-switch,.collection-size-buttons)>button{
    font-size:11px!important;padding-inline:3px!important;
  }
}
@media print{
  html body .main{isolation:auto;}
  html body .main > header.top{z-index:auto!important;}
}

/* Theme/accent palettes used to be anchored to the first tiny icon and could
   extend beyond the LEFT viewport edge (especially at 320-390 px). Keep them
   inside the visible viewport, irrespective of the account-name width. */
@media screen and (max-width:700px){
  html body .main>.top{--jui-header-height:72px;}
  html body .main>.top .jards-quick-menu{
    position:fixed!important;
    top:calc(var(--jui-header-height) + 6px)!important;
    right:12px!important;
    left:auto!important;
    width:min(252px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }
}
@media screen and (max-width:650px){
  html body .main>.top{--jui-header-height:56px;}
}


/* JARDS UI CORE 1C (283): one disclosure control, one close button,
   one responsive action-row contract. HTML <details> retains native
   open/close, keyboard interaction and all original form handlers. */
:root {
  --jui-action-gap:8px;
  --jui-action-min:138px;
  --jui-close-bg:#b42335;
  --jui-close-hover:#921c2b;
  --jui-close-border:#dc6270;
}

/* Only regular, text-labelled details are enhanced by jards-ui-core.js.
   Navigation, nested category trees and icon-only summaries are excluded. */
html body details[data-jui-disclosure="1"] > summary {
  /* 290: reserve a real text-safe area for the chevron at any width. */
  position:relative;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start;
  gap:var(--jui-space-3);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:var(--jui-control-min);
  padding:10px 36px 10px 14px!important;
  border-radius:var(--jui-radius-md);
  text-align:left;
  line-height:1.35;
  white-space:normal!important;
  overflow-wrap:anywhere;
  cursor:pointer;
  list-style:none!important;
}
html body details[data-jui-disclosure="1"] > summary::marker {content:""!important;}
html body details[data-jui-disclosure="1"] > summary::-webkit-details-marker {display:none!important;}
html body details[data-jui-disclosure="1"] > summary::after {
  content:""!important;
  display:block!important;
  /* The icon is out of text flow; right padding reserves 12px separation. */
  position:absolute!important;
  right:14px!important;
  top:calc(50% - 5px)!important;
  flex:0 0 10px!important;
  box-sizing:border-box;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  border:solid currentColor!important;
  border-width:0 2px 2px 0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:0!important;
  line-height:0!important;
  transform:rotate(45deg)!important;
  transform-origin:50% 65%;
  transition:transform .22s ease;
}
html body details[data-jui-disclosure="1"][open] > summary::after {
  transform:rotate(225deg)!important;
}
/* The two catalog accordions in 281/282 use the summary as a flush panel
   header. Opening those sections must not reintroduce a doubled gap. */
html body .main details:is(.catalog-margin-all,.catalog-used-print)[data-jui-disclosure="1"] > summary {
  margin-bottom:0!important;
  padding-right:36px!important;
}

/* Modal close button: shared red danger accent. Only the titlebar X is
   affected; footer Cancel/Back buttons retain their ordinary styling. */
html body dialog :is(.dialog-head,.preview-head) > button[data-close] {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto;
  min-width:var(--jui-control-min)!important;
  min-height:var(--jui-control-min)!important;
  padding:8px 12px!important;
  margin:0!important;
  border:1px solid var(--jui-close-border)!important;
  border-radius:var(--jui-radius-md)!important;
  background:var(--jui-close-bg)!important;
  color:#fff!important;
  font-weight:700!important;
  text-align:center;
  line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
html body dialog :is(.dialog-head,.preview-head) > button[data-close]:hover {
  background:var(--jui-close-hover)!important;
}
html body dialog :is(.dialog-head,.preview-head) > button[data-close]:focus-visible {
  outline:3px solid var(--jui-close-border)!important;
  outline-offset:3px;
}
/* Keep long modal headings from forcing their close buttons off screen. */
html body dialog :is(.dialog-head,.preview-head) {
  display:flex;
  flex-direction:row!important;
  align-items:flex-start;
  gap:var(--jui-space-3);
  min-width:0;
}
html body dialog :is(.dialog-head,.preview-head) > :first-child:not(button) {
  min-width:0;
  flex:1 1 auto;
}
html body dialog :is(.dialog-head,.preview-head) > button[data-close] {
  margin-left:auto!important;
}

/* Equal-height, equal-basis action buttons. Rows fit two or more controls
   when space allows and wrap naturally on small screens. Don't apply to
   global toolbars containing search inputs/menus. */
html body .main :is(.company-actions,.vehicle-actions,.catalog-mini-actions,
 .note-tile-actions,.note-view-actions,.order-actions,.catalog-view-footer,
 .report-actions,.inspection-save-actions,.job-summary-actions,.protocol-actions,
 .selected-file-actions,.work-day-save-bar,.entry-actions,.unified-form-actions,
 .entry-action-row,.part-row-actions),
html body dialog :is(.order-actions,.report-actions,.inspection-save-actions,
 .unified-form-actions,.entry-action-row,.part-row-actions) {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  gap:var(--jui-action-gap)!important;
  min-width:0;
}
html body .main :is(.company-actions,.vehicle-actions,.catalog-mini-actions,
 .note-tile-actions,.note-view-actions,.order-actions,.catalog-view-footer,
 .report-actions,.inspection-save-actions,.job-summary-actions,.protocol-actions,
 .selected-file-actions,.work-day-save-bar,.entry-actions,.unified-form-actions,
 .entry-action-row,.part-row-actions) > :is(button,a,form,details),
html body dialog :is(.order-actions,.report-actions,.inspection-save-actions,
 .unified-form-actions,.entry-action-row,.part-row-actions) > :is(button,a,form,details) {
  box-sizing:border-box;
  flex:1 1 var(--jui-action-min)!important;
  width:auto!important;
  min-width:min(100%,var(--jui-action-min))!important;
  max-width:100%;
  margin:0!important;
}
html body .main :is(.company-actions,.vehicle-actions,.catalog-mini-actions,
 .note-tile-actions,.note-view-actions,.order-actions,.catalog-view-footer,
 .report-actions,.inspection-save-actions,.job-summary-actions,.protocol-actions,
 .selected-file-actions,.work-day-save-bar,.entry-actions,.unified-form-actions,
 .entry-action-row,.part-row-actions) :is(button,a.primary,a.outline,a.danger-outline,summary),
html body dialog :is(.order-actions,.report-actions,.inspection-save-actions,
 .unified-form-actions,.entry-action-row,.part-row-actions) :is(button,a.primary,a.outline,a.danger-outline,summary) {
  box-sizing:border-box;
  min-height:var(--jui-control-min);
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  text-align:center;
}
html body .main :is(.company-actions,.vehicle-actions,.catalog-mini-actions,
 .note-tile-actions,.note-view-actions,.order-actions,.catalog-view-footer,
 .report-actions,.inspection-save-actions,.job-summary-actions,.protocol-actions,
 .selected-file-actions,.work-day-save-bar,.entry-actions,.unified-form-actions,
 .entry-action-row,.part-row-actions) > form,
html body dialog :is(.order-actions,.report-actions,.inspection-save-actions,
 .unified-form-actions,.entry-action-row,.part-row-actions) > form {
  display:flex;
  align-items:stretch;
}
html body .main :is(.company-actions,.vehicle-actions,.catalog-mini-actions,
 .note-tile-actions,.order-actions,.catalog-view-footer,.report-actions,
 .inspection-save-actions,.job-summary-actions,.protocol-actions,
 .selected-file-actions,.work-day-save-bar,.entry-actions,.unified-form-actions,
 .entry-action-row,.part-row-actions) > form > :is(button,.unified-form-actions),
html body dialog :is(.order-actions,.report-actions,.inspection-save-actions,
 .unified-form-actions,.entry-action-row,.part-row-actions) > form > :is(button,.unified-form-actions) {
  width:100%!important;
  flex:1 1 auto;
}
/* A disclosure with a full editing form takes the whole row when expanded. */
html body .main :is(.entry-action-row,.part-row-actions) > details[open],
html body dialog :is(.entry-action-row,.part-row-actions) > details[open] {
  flex-basis:100%!important;
}
@media screen and (max-width:360px) {
  html body {--jui-action-min:124px;}
}
@media (prefers-reduced-motion:reduce) {
  html body details[data-jui-disclosure="1"] > summary::after {
    transition:none!important;
  }
}
@media print {
  html body details[data-jui-disclosure="1"] > summary::after {display:none!important;}
}

/* JARDS 284 — centralna, responsywna siatka formularzy; bez zmian semantyki wejść. */
/* Zmienne formularzy JARDS 292 zdefiniowane w końcowym kontrakcie. */
html body .main .jards-layout-row[data-jards-generated="284"],
html body dialog .jards-layout-row[data-jards-generated="284"] {
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
 gap:var(--jui-form-gap)!important;align-items:start;width:100%;min-width:0;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="284"] > .jards-form-field{
 grid-column:span 12!important;min-width:0;max-width:100%;width:100%!important;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="284"] > [data-jards-field-width="half"]{grid-column:span 6!important}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="284"] > [data-jards-field-width="third"]{grid-column:span 4!important}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="284"] > [data-jards-field-width="full"]{grid-column:span 12!important}
/* Forms with a pre-existing .two container retain their structure; use the SAME shared sizing rule. */
html body :is(.main,dialog) .two.jards-form-grid-two{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:var(--jui-form-gap)!important;align-items:start}
html body :is(.main,dialog) .two.jards-form-grid-two > .jards-form-field{grid-column:span 6!important;width:100%!important;min-width:0;max-width:100%;box-sizing:border-box}
html body :is(.main,dialog) .two.jards-form-grid-two > .jards-form-field[data-jards-field-width="full"]{grid-column:span 12!important}
html body :is(.main,dialog) .two.jards-form-grid-two > .jards-form-field[data-jards-field-width="third"]{grid-column:span 4!important}
/* An SQL card is a real field, identical to built-in fields for layout purposes. */
html body :is(.main,dialog) .jards-custom-group{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:var(--jui-form-gap)!important;margin-block:var(--jui-space-4,16px);}
html body :is(.main,dialog) .jards-custom-group > .jards-custom-card{grid-column:span 12!important;min-width:0;width:100%!important;box-sizing:border-box}
html body :is(.main,dialog) .jards-custom-group > .jards-custom-card[data-jards-field-width="half"]{grid-column:span 6!important}
html body :is(.main,dialog) .jards-custom-group > .jards-custom-card[data-jards-field-width="third"]{grid-column:span 4!important}
html body :is(.main,dialog) .jards-custom-group > .jards-custom-card[data-jards-field-width="full"]{grid-column:span 12!important}
html body :is(.main,dialog) :is(.jards-form-grid,.jards-custom-group,.two) > .jards-form-field :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
html body .jards-form-designer-toolbar{position:relative;z-index:var(--jui-z-controls,5);max-width:100%;box-sizing:border-box}
html body .jards-form-designer-toolbar .jards-layout-pencil{width:30px;height:30px;min-height:30px;min-width:30px}
html body .jards-form-designer-toolbar .jards-layout-actions{gap:var(--jui-space-2,8px)}
html body .jards-layout-active [data-jards-layout-field]{outline:2px dashed var(--jui-accent,var(--accent,#0b927c));outline-offset:2px;padding:var(--jui-space-2,8px)!important;min-width:0;box-sizing:border-box}
html body .jards-layout-active [data-jards-layout-field]>.jards-field-controls{display:flex!important;flex-wrap:wrap;gap:5px;align-items:center;padding-top:var(--jui-space-2,8px)}
html body .jards-layout-active [data-jards-layout-field]>.jards-field-controls button{flex:1 1 auto;min-width:38px;min-height:32px;height:auto;padding:5px 8px}
html body .jards-layout-active [data-jards-layout-field].jards-drop-target{background:color-mix(in srgb,var(--jui-accent,#0b927c) 13%,transparent)}
html body .jards-layout-active .jards-field-controls{pointer-events:auto}
@media(max-width:700px){
 html body :is(.main,dialog) :is(.jards-layout-row[data-jards-generated="284"],.two.jards-form-grid-two,.jards-custom-group){grid-template-columns:minmax(0,1fr)!important}
 html body :is(.main,dialog) :is(.jards-layout-row[data-jards-generated="284"],.two.jards-form-grid-two,.jards-custom-group) > .jards-form-field,
 html body :is(.main,dialog) :is(.jards-layout-row[data-jards-generated="284"],.two.jards-form-grid-two,.jards-custom-group) > .jards-custom-card{grid-column:1/-1!important}
}
@media print{.jards-form-designer-toolbar,.jards-field-controls{display:none!important}}
/* Respect native hidden semantics even when the shared grid has !important. */
html body :is(.main,dialog) .jards-custom-group[hidden]{display:none!important}


/* JARDS 285 — sekcje konfigurowalne w jednym bezpiecznym regionie formularza. */
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"]{
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
 gap:var(--jui-form-gap,12px)!important;align-items:start;width:100%;min-width:0;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"] > :is(.jards-form-field,.jards-form-section){
 grid-column:span 12!important;min-width:0;width:100%!important;max-width:100%;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"] > .jards-form-field[data-jards-field-width="half"]{grid-column:span 6!important}
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"] > .jards-form-field[data-jards-field-width="third"]{grid-column:span 4!important}
html body :is(.main,dialog) .jards-form-section-fields{
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
 gap:var(--jui-form-gap,12px)!important;align-items:start;min-width:0;width:100%;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-form-section-fields > .jards-form-field{
 grid-column:span 12!important;min-width:0;width:100%!important;max-width:100%;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-form-section-fields > .jards-form-field[data-jards-field-width="half"]{grid-column:span 6!important}
html body :is(.main,dialog) .jards-form-section-fields > .jards-form-field[data-jards-field-width="third"]{grid-column:span 4!important}
html body :is(.main,dialog) .jards-form-section{
 min-width:0;max-width:100%;box-sizing:border-box;
}
html body :is(.main,dialog) .jards-form-section:not([data-jards-section-id="default"]){
 border:1px solid var(--jui-border,var(--line,#8896a3));
 border-radius:var(--jui-radius,12px);padding:var(--jui-form-pad,16px);
 margin:0;background:transparent;
}
html body :is(.main,dialog) .jards-form-section-head{
 display:flex;align-items:center;flex-wrap:wrap;gap:var(--jui-space-2,8px);
 margin-bottom:var(--jui-form-gap,12px);min-width:0;
}
html body :is(.main,dialog) .jards-form-section[data-jards-section-id="default"] > .jards-form-section-head{display:none}
html body :is(.main,dialog) .jards-form-section-head strong{font-weight:650;min-width:0;overflow-wrap:anywhere}
html body .jards-layout-active .jards-form-section[data-jards-section-id="default"] > .jards-form-section-head{display:flex!important}
html body .jards-layout-active .jards-form-section-head input{flex:1 1 180px;min-width:120px;max-width:100%;min-height:34px}
html body .jards-layout-active .jards-form-section-head button{flex:0 0 auto;min-width:32px;min-height:32px;padding:4px 9px}
html body .jards-layout-active .jards-form-section{
 outline:1px dashed var(--jui-border,var(--line,#8896a3));outline-offset:2px;
}
html body .jards-layout-active .jards-form-section-fields{min-height:40px}
html body .jards-layout-active .jards-form-section-fields:empty:before{
 content:'Przeciągnij tutaj pole z formularza lub wybierz tę sekcję z listy przy polu.';
 font-size:.85rem;line-height:1.5;opacity:.8;grid-column:1/-1;
 white-space:normal;overflow-wrap:anywhere;pointer-events:none;
}
html body .jards-section-actions{grid-column:1/-1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
html body .jards-field-controls .jards-section-selector{flex:1 1 130px;min-width:115px;max-width:100%;height:36px;padding:4px 8px}
html body .jards-layout-active [data-jards-field-hidden="1"]{opacity:.65}
html body .jards-layout-active .jards-form-section-fields.jards-drop-target,
html body .jards-layout-active [data-jards-layout-field].jards-drop-target{
 background:color-mix(in srgb,var(--jui-accent,#0b927c) 16%,transparent);
}
html body :is(.main,dialog) .jards-form-field[hidden]{display:none!important}
html body :is(.main,dialog) .jards-form-field.jards-config-hidden{display:none!important}
html body .jards-layout-active .jards-form-field.jards-config-hidden:not([hidden]){display:block!important}
html body .two > .jards-layout-row[data-jards-generated="286"],
html body .jards-custom-group > .jards-layout-row[data-jards-generated="286"]{grid-column:1/-1!important;min-width:0;width:100%!important}
@media(max-width:700px){
 html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"],
 html body :is(.main,dialog) .jards-form-section-fields{grid-template-columns:minmax(0,1fr)!important}
 html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"] > .jards-form-field,
 html body :is(.main,dialog) .jards-form-section-fields > .jards-form-field{grid-column:1/-1!important}
 html body :is(.main,dialog) .jards-form-section:not([data-jards-section-id="default"]){padding:var(--jui-space-3,12px)}
}
@media print{html body .jards-section-actions,html body .jards-form-section-head button{display:none!important}}

/* JARDS 286: rejestr pól i widoczna ochrona elementów technicznych. */
html body .jards-form-field-catalog{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;margin-block:4px 12px;
 border:1px solid var(--jui-line,var(--line,#999));border-radius:var(--jui-radius,12px);background:var(--jui-panel,var(--surface,#555));box-sizing:border-box;max-width:100%;}
html body .jards-form-field-catalog[hidden]{display:none!important}
html body .jards-form-field-catalog>strong{width:100%;font-weight:650}
html body .jards-form-field-catalog>small{font-size:12px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
html body .jards-form-field-catalog select{flex:1 1 180px;width:auto;min-width:0;max-width:100%;min-height:36px;padding:6px 8px}
html body .jards-field-protected{display:inline-flex;align-items:center;padding:4px;cursor:help}
html body .jards-layout-active .jards-field-catalog-target{outline:2px solid var(--accent,#0a987b);outline-offset:2px}
html body .jards-field-controls :disabled{opacity:.45;cursor:not-allowed}
@media screen and (max-width:700px){html body .jards-form-field-catalog select{flex-basis:100%;width:100%}}
@media print{html body .jards-form-field-catalog{display:none!important}}

/* JARDS 287: unified supplemental fields in report/inspection read-only views. */
.jards-custom-preview{padding:var(--panel-pad,16px);margin-block:12px;border:1px solid var(--line);border-radius:var(--radius,12px);min-width:0}
.jards-custom-preview h3{margin:0 0 12px}
.jards-custom-preview dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:0}
.jards-custom-preview-item{min-width:0;overflow-wrap:anywhere;padding:10px;border:1px solid var(--line);border-radius:10px}
.jards-custom-preview-item dt{font-size:.85em;font-weight:600;opacity:.9}
.jards-custom-preview-item dd{margin:4px 0 0;white-space:normal}
@media print{.jards-custom-preview{break-inside:avoid}}

/* JARDS 288: centralne pola konfiguracji SQL i opcjonalny eksport/import układów. */
html body .jards-custom-admin-list .jards-custom-admin-row-288{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(85px,max-content);gap:10px;align-items:center;padding:12px;box-sizing:border-box;min-width:0}
html body .jards-custom-admin-row-288>input{min-width:0;width:100%;box-sizing:border-box}
html body .jards-custom-admin-row-288>.jards-field-type{justify-self:end}
html body .jards-custom-admin-row-288>.jards-custom-required-toggle,
html body .jards-custom-admin-row-288>.jards-custom-choice-wrap,
html body .jards-custom-admin-row-288>.jards-custom-field-actions{grid-column:1/-1;min-width:0}
html body .jards-custom-admin-row-288>.jards-custom-choice-wrap{display:grid;gap:6px}
html body .jards-custom-admin-row-288>.jards-custom-choice-wrap[hidden]{display:none!important}
html body .jards-custom-admin-row-288 textarea{width:100%;box-sizing:border-box;min-width:0;resize:vertical}
html body .jards-custom-field-actions{display:flex;flex-wrap:wrap;gap:8px}
html body .jards-custom-field-actions>button{flex:1 1 120px;min-width:0}
html body .jards-layout-toolbar .jards-layout-actions{flex-wrap:wrap;gap:8px}
html body .jards-layout-toolbar .jards-layout-actions>button{max-width:100%}
@media(max-width:480px){html body .jards-custom-admin-list .jards-custom-admin-row-288{grid-template-columns:minmax(0,1fr)}html body .jards-custom-admin-row-288>.jards-field-type{grid-column:1;justify-self:start}}


/* JARDS 291 — domyślna sekcja formularza ma własny bezpieczny padding,
   a kontrolki edytora pól układają się w dwóch wierszach bez nachodzenia. */
html body :is(.main,dialog) .jards-form-section[data-jards-section-id="default"]{
 padding:var(--jui-form-pad,16px);margin:0;border-radius:var(--jui-radius,12px);
}
html body :is(.main,dialog) .jards-form-section[data-jards-section-id="default"] > .jards-form-section-fields{
 min-width:0;width:100%;
}
html body .jards-layout-active [data-jards-layout-field] > .jards-field-controls{
 display:flex!important;flex-direction:column;align-items:stretch;gap:6px;
 width:100%;max-width:100%;min-width:0;padding-top:var(--jui-space-2,8px);
}
html body .jards-layout-active .jards-field-controls :is(.jards-field-controls-main,.jards-field-controls-extra){
 display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
 gap:6px;min-width:0;width:100%;max-width:100%;
}
html body .jards-layout-active .jards-field-controls .jards-field-controls-extra > *{min-width:0;max-width:100%;}
html body .jards-layout-active .jards-field-controls .jards-field-handle{
 display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;line-height:1;
}
html body .jards-layout-active .jards-field-controls button{
 flex:0 0 auto;max-width:100%;white-space:nowrap;
}
html body .jards-layout-active .jards-field-controls .jards-section-selector{
 flex:1 1 220px;min-width:min(220px,100%);max-width:100%;width:100%;
}
@media(max-width:820px){
 html body .jards-layout-active .jards-field-controls .jards-field-controls-extra{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
 }
 html body .jards-layout-active .jards-field-controls .jards-field-controls-extra .jards-section-selector{
  grid-column:1/-1;min-width:0;width:100%;
 }
}


/* JARDS 292 — centralny kontrakt wyglądu formularzy.
   Działa również na formularze generowane po załadowaniu strony.
   Lokalne moduły zachowują swoją logikę, układy specjalne oraz motywy. */
:root{
 --jui-form-gap:12px;
 --jui-label-gap:6px;
 --jui-form-pad:16px;
}
html[data-density="comfortable"]{--jui-form-gap:18px;--jui-label-gap:7px;}
html[data-density="tight"]{--jui-form-gap:9px;--jui-label-gap:4px;}
html[data-density="ultra"]{--jui-form-gap:6px;--jui-label-gap:3px;}
/* Wspólna baza nie wymusza siatki ani paddingu całego formularza:
   formularze w kartach, wiersze wyszukiwania i paski akcji mają różne układy. */
html body :is(.main,dialog,.supplier-page,.jards-ui-form-root) form{
 min-width:0;max-width:100%;box-sizing:border-box;
}
html body :is(.main,dialog,.supplier-page,.jards-ui-form-root) form :is(label,fieldset,.two,.work-time-control,.labor-time-control){
 min-width:0;max-width:100%;box-sizing:border-box;
}
html body :is(.main,dialog,.supplier-page,.jards-ui-form-root) form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),select,textarea){
 box-sizing:border-box;min-width:0;max-width:100%;
}
html body :is(.main,dialog,.supplier-page,.jards-ui-form-root) form :is(.two,.jards-form-grid,.jards-form-section-fields,.supplier-two) > *{
 min-width:0;max-width:100%;box-sizing:border-box;
}
/* Typowe, pionowe formularze korzystają z tych samych odstępów.
   Nie dotyczy przycisków inline, pojedynczych pól ani formularzy wyszukiwania. */
html body :is(.main,dialog) form.form{
 gap:var(--jui-form-gap,12px);
}
html body :is(.main,dialog) form.form label:not(.checkline):not(.outline):not(.primary){
 row-gap:var(--jui-label-gap,6px);
}
html body .supplier-page form.supplier-form{
 gap:var(--jui-form-gap,12px);
}
html body .supplier-page form.supplier-form label{
 row-gap:var(--jui-label-gap,6px);
}
html body.login-page .login-box form{
 gap:var(--jui-form-gap,12px);
}
/* Wiersze edytora powinny wypełniać kolumnę nadrzędnej siatki.
   Dzięki temu narzędzia nie lądują w wąskim ułamku szerokości formularza. */
html body :is(.main,dialog) .jards-layout-row[data-jards-generated="286"]{
 grid-column:1/-1!important;min-width:0;width:100%;max-width:100%;
}
/* Ten sam oddech po bokach kart sesji i czasu pracy. */
html body .main :is(.repair-card,.labor-worker,.labor-saved-row){
 padding-inline:var(--jui-form-pad,16px);
}
@media (max-width:650px){
 :root{--jui-form-pad:12px;}
 html body .main :is(.repair-card,.labor-worker,.labor-saved-row){
  padding-inline:var(--jui-form-pad,12px);
 }
}
@media print{
 html body :is(.main,dialog) form.form{gap:var(--jui-form-gap,12px);}
}


/* JARDS 295 — SQL cards may live in the same protected form grid as system fields.
   Keep the empty original SQL container and its hidden submit marker non-visual. */
html body :is(.main,dialog) .jards-custom-group[data-jards-cards-detached="1"]{display:none!important;}
html body .jards-layout-active .jards-form-field.jards-drop-before,
html body .jards-layout-active .jards-form-field.jards-drop-after{position:relative;}
html body .jards-layout-active .jards-form-field.jards-drop-before::before,
html body .jards-layout-active .jards-form-field.jards-drop-after::after{
 content:"";position:absolute;left:0;right:0;height:4px;border-radius:3px;
 background:var(--jui-accent,var(--accent,#0b927c));z-index:6;pointer-events:none;
 box-shadow:0 0 0 2px color-mix(in srgb,var(--jui-accent,#0b927c) 18%,transparent);
}
html body .jards-layout-active .jards-form-field.jards-drop-before::before{top:-7px;}
html body .jards-layout-active .jards-form-field.jards-drop-after::after{bottom:-7px;}
html body .jards-layout-active .jards-form-section-fields.jards-drop-container{
 outline:2px dashed var(--jui-accent,var(--accent,#0b927c));outline-offset:-3px;
 background:color-mix(in srgb,var(--jui-accent,#0b927c) 8%,transparent);
}

/* JARDS 297 — account language preferences; all roles, no crowding in header. */
html body .jards-language-form{padding:var(--jui-space-4,16px);min-width:0;margin-bottom:var(--jui-space-3,12px);gap:12px}
html body .jards-language-form h2{margin:0}
html body .jards-language-form select{max-width:100%;min-height:44px}
html body .jards-language-form button{justify-self:start;min-height:44px}

/* JARDS 307 — scrollable full name for long company names in repair/work time forms.
   Keep the original input untouched; the strip is display-only. */
html body :is(.repair-section,.work-new,.work-edit,.work-entry-form) input[name="external_company"]{
  min-width:0;max-width:100%;width:100%;box-sizing:border-box;
}
html body .jards-company-scroll-307[hidden]{display:none!important}
html body .jards-company-scroll-307:not([hidden]){
  display:grid;grid-template-columns:36px minmax(0,1fr) 36px;
  width:100%;max-width:100%;min-width:0;align-items:center;
  gap:5px;margin-top:6px;
}
html body .jards-company-scroll-307 .jards-company-scroll-viewport{
  min-width:0;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;
  white-space:nowrap;touch-action:pan-x;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;overscroll-behavior-x:contain;
  padding:7px 8px;border:1px solid var(--line,#60788b);
  border-radius:var(--jui-radius,8px);
  background:var(--surface-1,transparent);color:inherit;
  font:inherit;font-weight:400;line-height:1.35;
}
html body .jards-company-scroll-307 .jards-company-scroll-viewport:focus-visible{
  outline:2px solid var(--accent,#478cb8);outline-offset:2px;
}
html body .jards-company-scroll-307 .jards-company-scroll-text{display:inline-block;min-width:max-content;}
html body .jards-company-scroll-307 .jards-company-scroll-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px!important;min-width:36px!important;height:36px!important;
  min-height:36px!important;max-height:36px;padding:0!important;
  line-height:1;font-size:14px;border-radius:8px;
}
html body .jards-company-scroll-307 .jards-company-scroll-arrow:disabled{opacity:.38;cursor:default;}

/* JARDS 308: scoping of backup table scroll areas; never overlap next heading. */
html body .main .admin-db-table-wrap.backup-list-scroll {display:block;position:relative;isolation:isolate;max-height:min(460px,55vh);overflow:auto;min-height:0;margin-bottom:18px;z-index:0;}
html body .main .admin-db-table-wrap.backup-list-scroll > table {width:100%;margin:0;border-collapse:separate;border-spacing:0;}
html body .main .admin-db-table-wrap.backup-list-scroll + h3 {display:block;position:relative;clear:both;margin-top:20px;z-index:1;}
html body .main .admin-db-table-wrap.backup-list-scroll thead th {position:sticky;top:0;z-index:1;}