/* Unified CRM modal geometry and buttons. Keep page CSS focused on fields. */
.crm-modal-root.is-open,.crm-timesheet-modal-backdrop {
  position:fixed; inset:0; z-index:var(--crm-modal-overlay-z-index); display:grid;
  align-items:start; justify-items:center;
  padding:var(--crm-modal-top) var(--crm-modal-side);
  background:var(--crm-modal-overlay-bg);
  backdrop-filter:blur(var(--crm-modal-overlay-blur));
  -webkit-backdrop-filter:blur(var(--crm-modal-overlay-blur));
  overflow:hidden;
}
.crm-modal-shell {
  width:min(var(--crm-modal-width,var(--crm-modal-width-standard)),100%);
  height:min(var(--crm-modal-max-height),calc(100dvh - 2 * var(--crm-modal-top)));
  max-height:calc(100dvh - 2 * var(--crm-modal-top));
  min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--crm-modal-bg); border:1px solid var(--crm-modal-border);
  border-radius:var(--crm-modal-radius); box-shadow:var(--crm-modal-shadow);
  /* No opacity animation: a transparent fullscreen shell exposed the page
     when the nested timesheet picker replaced the underlying dialog. */
  animation:none;
}
.crm-modal-shell.crm-modal--compact {
  --crm-modal-width:var(--crm-modal-width-compact);
  height:auto;
  max-height:min(var(--crm-modal-max-height),calc(100dvh - 2 * var(--crm-modal-top)));
}
.crm-modal-shell.crm-modal--medium { --crm-modal-width:var(--crm-modal-width-medium); }
.crm-modal-shell.crm-modal--standard { --crm-modal-width:var(--crm-modal-width-standard); }
.crm-modal-shell.crm-modal--wide { --crm-modal-width:var(--crm-modal-width-wide); }
.crm-modal-shell > form,
.crm-modal-shell > form[data-employee-form],
.crm-modal-shell > form[data-ts-form] {
  display:flex; flex:1 1 auto; flex-direction:column; min-height:0; min-width:0; overflow:hidden;
}
.crm-modal-shell .crm-modal-head,.crm-modal-shell .crm-timesheet-modal-header {
  flex:0 0 auto; position:relative; top:auto; z-index:var(--crm-modal-head-z-index);
  min-height:var(--crm-modal-head-height); padding:var(--crm-modal-head-padding-y) var(--crm-modal-head-padding-x);
  background:var(--crm-modal-head-bg); border-bottom:1px solid var(--crm-modal-head-border);
  box-shadow:var(--crm-modal-head-shadow);
  backdrop-filter:blur(var(--crm-modal-head-blur));
  -webkit-backdrop-filter:blur(var(--crm-modal-head-blur));
}
.crm-modal-shell .crm-timesheet-modal-header h2 {
  font-size:var(--crm-modal-head-title-size);font-weight:500;
}
.crm-modal-shell .crm-modal-content,
.crm-modal-shell .crm-employee-modal-body,
.crm-modal-shell .crm-supplier-modal-body,
.crm-modal-shell .crm-supplier-price-modal-body,
.crm-modal-shell .crm-dict-modal-body,
.crm-modal-shell .crm-timesheet-modal-body {
  flex:1 1 auto; min-height:0; min-width:0; overflow:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:var(--crm-modal-body-padding); background:var(--crm-modal-bg);
}
.crm-modal-shell .crm-modal-footer,
.crm-modal-shell .crm-supplier-form-footer,
.crm-modal-shell .crm-dict-modal-footer,
.crm-modal-shell .crm-timesheet-modal-footer {
  flex:0 0 auto; position:relative; inset:auto; z-index:2;
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px;
  margin:0; padding:var(--crm-modal-footer-padding-y) var(--crm-modal-footer-padding-x);
  background:var(--crm-modal-bg); border-top:1px solid var(--crm-modal-border); box-shadow:none;
}
.crm-modal-shell .crm-modal-footer > .crm-btn,
.crm-modal-shell .crm-supplier-form-footer > .crm-btn,
.crm-modal-shell .crm-dict-modal-footer > .crm-btn,
.crm-modal-shell .crm-timesheet-modal-footer > .crm-btn {
  flex:0 0 auto; width:auto; min-height:var(--crm-modal-action-height);
  padding:9px var(--crm-modal-action-padding-x);
  border-radius:var(--crm-modal-action-radius);
  font-size:var(--crm-modal-action-font-size);font-weight:var(--crm-btn-font-weight);
  line-height:1.2;white-space:nowrap;
}
.crm-modal-shell .crm-modal-close.crm-icon-btn,
.crm-modal-shell .crm-timesheet-modal-actions .crm-icon-btn {
  width:var(--crm-modal-close-size);height:var(--crm-modal-close-size);
  min-width:var(--crm-modal-close-size);min-height:var(--crm-modal-close-size);
  padding:0;border-radius:var(--crm-icon-btn-radius);
  background:var(--crm-icon-btn-bg);color:var(--crm-icon-btn-color);
  border-color:var(--crm-icon-btn-border);
}
.crm-modal-shell .crm-modal-close .crm-icon,
.crm-modal-shell .crm-timesheet-modal-actions .crm-icon {
  width:var(--crm-modal-close-icon-size);height:var(--crm-modal-close-icon-size);
}
.crm-modal-shell .crm-modal-close:hover {
  background:var(--crm-icon-btn-active-bg);color:var(--crm-icon-btn-active-color);
}
html.crm-modal-active,html.crm-modal-active body {overflow:hidden;}
@media (max-width:900px) {
  .crm-modal-root.is-open,.crm-timesheet-modal-backdrop {
    inset:0; display:flex;flex-direction:column;
    padding:0;
    align-items:stretch;justify-content:stretch;
  }
  .crm-modal-shell,.crm-modal-shell.crm-modal--compact,
  .crm-modal-shell.crm-modal--medium,.crm-modal-shell.crm-modal--standard,
  .crm-modal-shell.crm-modal--wide {
    width:100%;height:100%;max-height:100%;min-height:0;flex:1 1 auto;
    border:0;border-radius:0;box-shadow:none;
  }
  .crm-modal-shell .crm-modal-head,.crm-modal-shell .crm-timesheet-modal-header {
    min-height:var(--crm-modal-head-height);padding:var(--crm-modal-head-padding-y) var(--crm-modal-head-padding-x);
  }
  .crm-modal-shell .crm-modal-footer,
  .crm-modal-shell .crm-supplier-form-footer,
  .crm-modal-shell .crm-dict-modal-footer,
  .crm-modal-shell .crm-timesheet-modal-footer {padding:var(--crm-modal-footer-padding-y) var(--crm-modal-footer-padding-x);gap:10px;}
  .crm-modal-shell .crm-modal-footer > .crm-btn,
  .crm-modal-shell .crm-supplier-form-footer > .crm-btn,
  .crm-modal-shell .crm-dict-modal-footer > .crm-btn,
  .crm-modal-shell .crm-timesheet-modal-footer > .crm-btn {flex:1 1 0;min-width:0;}
}
/* Supplier edit keeps its actions outside the scrolling body. */
.crm-modal-shell .crm-supplier-edit-body {padding:0;overflow:hidden;display:flex;flex-direction:column;}
.crm-modal-shell .crm-supplier-edit-body > .crm-supplier-form {
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;
}
.crm-modal-shell .crm-supplier-edit-scroll {flex:1 1 auto;min-height:0;overflow:auto;padding:var(--crm-modal-body-padding);}
.crm-modal-shell .crm-supplier-delete-row {margin-top:16px;display:flex;justify-content:flex-start;}
.crm-modal-shell .crm-supplier-delete-btn {margin-left:0;}
/* Compact view: text fields should not resemble disabled inputs. */
.crm-dict-view {display:flex;flex-direction:column;gap:14px;}
.crm-dict-view-field {display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--crm-border);border-radius:var(--crm-radius-md);background:var(--crm-surface-soft);}
.crm-dict-view-field > span:first-child {color:var(--crm-muted);font-size:12px;font-weight:500;}
.crm-dict-view-field > strong {font-weight:500;overflow-wrap:anywhere;}


/* Site-matching background for every standard CRM modal panel. */
.crm-modal-shell,
.crm-modal-shell .crm-modal-content,
.crm-modal-shell .crm-employee-modal-body,
.crm-modal-shell .crm-supplier-modal-body,
.crm-modal-shell .crm-supplier-price-modal-body,
.crm-modal-shell .crm-dict-modal-body,
.crm-modal-shell .crm-timesheet-modal-body,
.crm-modal-shell .crm-modal-footer,
.crm-modal-shell .crm-supplier-form-footer,
.crm-modal-shell .crm-dict-modal-footer,
.crm-modal-shell .crm-timesheet-modal-footer,
.crm-mobile-sheet-panel,
.crm-mobile-sheet-body,
.crm-mobile-sheet-footer {
  background: var(--crm-modal-bg);
}

/* ===== Tabель: shared dimensions and header for shift form and date/time picker =====
 * Both dialogs use the same geometry, global button/icon tokens and mobile offsets.
 * Other CRM dialogs keep their own width variants and existing placement.
 */

/* Flex centering is intentional: a grid with implicit tracks shrinks the shift
 * form to its content width, while the picker stays wider. */
.crm-timesheet-modal-backdrop,
.crm-ts-picker-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--crm-modal-overlay-bg);
  backdrop-filter: blur(var(--crm-modal-overlay-blur));
  -webkit-backdrop-filter: blur(var(--crm-modal-overlay-blur));
  overflow: hidden;
}
.crm-timesheet-modal-backdrop { z-index: var(--crm-modal-overlay-z-index); }
.crm-ts-picker-backdrop { z-index: var(--crm-modal-picker-z-index); }

/* When the date/time picker is open, hide the underlying shift dialog
 * and its overlay visually. The form stays mounted with all its values. */
html.crm-timesheet-picker-open .crm-timesheet-modal-backdrop {
  visibility: hidden;
  pointer-events: none;
}

.crm-modal-shell.crm-modal--timesheet {
  flex: 0 1 auto;
  width: min(var(--crm-timesheet-dialog-width), calc(100vw - 36px));
  height: min(var(--crm-timesheet-dialog-height), calc(100dvh - 36px));
  max-height: calc(100dvh - 36px);
  min-height: 0;
  border-radius: var(--crm-modal-radius);
  background: var(--crm-modal-bg);
  box-shadow: var(--crm-modal-shadow);
}

/* The picker sheet lives outside the form root, but shares the exact same header. */
.crm-modal-shell.crm-modal--timesheet > .crm-modal-head,
.crm-modal-shell.crm-modal--timesheet > form > .crm-modal-head {
  height: var(--crm-modal-head-height);
  min-height: var(--crm-modal-head-height);
  padding: var(--crm-modal-head-padding-y) var(--crm-modal-head-padding-x);
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.crm-modal-shell.crm-modal--timesheet .crm-modal-head-title h2 {
  margin: 0;
  font-size: var(--crm-modal-head-title-size);
  font-weight: 500;
  line-height: 1.1;
  color: var(--crm-text);
}
.crm-modal-shell.crm-modal--timesheet .crm-modal-close.crm-icon-btn {
  width: var(--crm-modal-close-size);
  height: var(--crm-modal-close-size);
  min-width: var(--crm-modal-close-size);
  min-height: var(--crm-modal-close-size);
  padding: 0;
  border-radius: var(--crm-icon-btn-radius);
  border-color: var(--crm-icon-btn-border);
  background: var(--crm-icon-btn-bg);
  color: var(--crm-icon-btn-color);
  box-shadow: var(--crm-icon-btn-shadow);
  font-size: inherit;
  line-height: normal;
}
.crm-modal-shell.crm-modal--timesheet .crm-modal-close .crm-icon {
  width: var(--crm-modal-close-icon-size);
  height: var(--crm-modal-close-icon-size);
}

/* A grid-based form should not distribute unused vertical space between fields. */
.crm-modal-shell.crm-modal--timesheet .crm-timesheet-modal-body {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 14px;
}
.crm-modal-shell.crm-modal--timesheet .crm-timesheet-field {
  align-content: start;
}
.crm-modal-shell.crm-modal--timesheet .crm-timesheet-total {
  min-height: 48px;
  align-items: center;
}

.crm-modal-shell.crm-modal--timesheet .crm-ts-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  align-items: stretch;
}
.crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer {
  display: flex;
  gap: 8px;
}
.crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer > .crm-btn {
  min-height: var(--crm-modal-action-height);
  padding: 9px var(--crm-modal-action-padding-x);
  border-radius: var(--crm-modal-action-radius);
  font-size: var(--crm-modal-action-font-size);
  font-weight: var(--crm-btn-font-weight);
}
.crm-modal-shell.crm-modal--timesheet .crm-ts-picker-btn.primary {
  background: var(--crm-primary);
  color: var(--color-btn, #fff);
  border-color: var(--crm-primary);
}

@media (max-width: 900px) {
  .crm-timesheet-modal-backdrop,
  .crm-ts-picker-backdrop {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .crm-modal-shell.crm-modal--timesheet {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .crm-modal-shell.crm-modal--timesheet > .crm-modal-head,
  .crm-modal-shell.crm-modal--timesheet > form > .crm-modal-head {
    height: var(--crm-modal-head-height);
    min-height: var(--crm-modal-head-height);
    padding: var(--crm-modal-head-padding-y) var(--crm-modal-head-padding-x);
  }
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-body {
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
  }
}
@media (max-width: 420px) {
  /* Two actions on start, three on end: no redundant Cancel or empty grid cells. */
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer > .crm-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer > .crm-btn.primary {
    grid-column: auto;
  }
}


/* ===== Global form fields: native controls only, never calendar/time widgets. ===== */
.crm-modal-shell :is(.crm-field, .crm-dict-field, .crm-timesheet-field) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  select, textarea
) {
  padding: var(--crm-modal-field-padding-y) var(--crm-modal-field-padding-x);
  border: 1px solid var(--crm-modal-field-border);
  border-radius: var(--crm-modal-field-radius);
  background: var(--crm-modal-field-bg);
  color: var(--crm-modal-field-text);
  font-size: var(--crm-modal-field-font-size);
}
/* Keep multi-line notes as tall as their page form requires. */
.crm-modal-shell :is(.crm-field, .crm-dict-field, .crm-timesheet-field) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select
) {
  min-height: var(--crm-modal-field-height);
}
.crm-modal-shell :is(.crm-field, .crm-dict-field, .crm-timesheet-field) textarea {
  height: auto;
}
/* The picker has its own complex calendar fields; keep their special sizes. */
.crm-modal-shell .crm-modal-close.crm-icon-btn:hover,
.crm-modal-shell .crm-modal-close.crm-icon-btn:focus-visible {
  color: var(--crm-icon-btn-active-color);
}
/* The picker close action uses the same global icon-button on mobile as on desktop. */
.crm-modal-shell .crm-ts-picker-head .crm-modal-head-actions { display: flex; }

@media (max-width: 900px) {
  /* One fullscreen overlay over the page header AND the fixed mobile footer. */
  .crm-modal-root.is-open,
  .crm-timesheet-modal-backdrop,
  .crm-ts-picker-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
  }
  .crm-modal-shell,
  .crm-modal-shell.crm-modal--compact,
  .crm-modal-shell.crm-modal--medium,
  .crm-modal-shell.crm-modal--standard,
  .crm-modal-shell.crm-modal--wide,
  .crm-modal-shell.crm-modal--timesheet {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .crm-modal-shell .crm-modal-head,
  .crm-modal-shell .crm-timesheet-modal-header,
  .crm-mobile-sheet-head {
    min-height: var(--crm-modal-head-height);
    padding: calc(var(--crm-modal-head-padding-y) + env(safe-area-inset-top, 0px))
             var(--crm-modal-head-padding-x)
             var(--crm-modal-head-padding-y);
  }
  .crm-modal-shell.crm-modal--timesheet > .crm-modal-head,
  .crm-modal-shell.crm-modal--timesheet > form > .crm-modal-head {
    height: auto;
    min-height: var(--crm-modal-head-height);
    padding: calc(var(--crm-modal-head-padding-y) + env(safe-area-inset-top, 0px))
             var(--crm-modal-head-padding-x)
             var(--crm-modal-head-padding-y);
  }
  .crm-modal-shell .crm-modal-footer,
  .crm-modal-shell .crm-supplier-form-footer,
  .crm-modal-shell .crm-dict-modal-footer,
  .crm-modal-shell .crm-timesheet-modal-footer,
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-footer {
    padding: var(--crm-modal-footer-padding-y) var(--crm-modal-footer-padding-x);
    padding-bottom: calc(var(--crm-modal-footer-padding-y) + env(safe-area-inset-bottom, 0px));
  }
  .crm-modal-shell.crm-modal--timesheet .crm-ts-picker-head .crm-modal-head-actions { display: flex; }
}

/* Avoid mobile GPU re-compositing when switching between nested dialogs. */
@media (max-width:900px) {
  .crm-modal-root.is-open,
  .crm-timesheet-modal-backdrop,
  .crm-ts-picker-backdrop {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Mobile header surface: pages and every standard dialog share the same flat
   background, bottom border, and no blurred/shadowed edge.  This stylesheet
   loads after page-specific CSS so legacy decorative effects cannot override it. */
@media (max-width: 900px) {
  .crm-page-head,
  .crm-modal-head,
  .crm-mobile-sheet-head,
  .crm-modal-shell .crm-modal-head,
  .crm-modal-shell .crm-timesheet-modal-header,
  .crm-timesheet-modal-header,
  .crm-modal-shell .crm-ts-picker-head,
  .crm-ts-picker-head {
    background: var(--crm-mobile-head-bg);
    background-image: none;
    border-bottom-color: var(--crm-mobile-head-border);
    box-shadow: var(--crm-mobile-head-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Filter dialog has a single close control, not a separate mobile action set.
     The generic mobile header hides desktop actions, so display this close. */
  .crm-modal-shell.crm-timesheet-filter-dialog .crm-modal-head-actions {
    display: flex;
  }
}