.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.hero-accent {
  display: block;
  color: var(--accent);
}

.page-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  margin: -5px -16px 20px;
  padding: 0 16px 10px;
  scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar {
  display: none;
}

.page-tab {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 760;
}

.page-tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.module-hero {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px 0 25px;
}

.module-hero__icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}

.module-hero__copy {
  min-width: 0;
}

.module-hero__eyebrow,
.catalog-hero__eyebrow {
  margin-bottom: 6px;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.module-hero h2,
.catalog-hero h2 {
  margin-bottom: 7px;
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 840;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.module-hero p:last-child,
.catalog-hero p:last-child {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stat-card {
  display: grid;
  min-width: 0;
  padding: 15px 13px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-card strong {
  margin-top: 6px;
  font-size: clamp(23px, 7vw, 34px);
  letter-spacing: -.04em;
  line-height: 1;
}

.stat-card small {
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-section {
  margin-top: 28px;
}

.text-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 780;
}

.record-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.record-row {
  display: grid;
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr) auto 19px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.record-row:last-child {
  border-bottom: 0;
}

.record-row:hover {
  background: var(--surface-subtle);
}

.record-row__main {
  display: grid;
  min-width: 0;
}

.record-row__id,
.record-card__id {
  color: var(--accent-hover);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.record-row__main strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-row__main small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-row__aside {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.record-row__date {
  color: var(--ink-soft);
  font-size: 10px;
}

.tip-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #b7daf7;
  border-radius: 14px;
  background: #edf7ff;
}

.tip-card__icon {
  color: var(--accent);
}

.tip-card strong {
  font-size: 13px;
}

.tip-card p {
  margin: 3px 0 0;
  color: #526979;
  font-size: 12px;
}

.list-toolbar {
  padding-top: 2px;
}

.search-field {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(7 141 243 / 13%);
}

.search-field > .icon {
  color: #7b8994;
}

.search-field input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.search-field input::placeholder {
  color: #8b98a3;
}

.search-field kbd {
  display: none;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 10px;
  white-space: nowrap;
}

.filter-scroll {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  margin: 10px -16px 0;
  padding: 0 16px 5px;
  scrollbar-width: none;
}

.filter-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.filter-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.list-summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink-soft);
  font-size: 12px;
}

.list-summary strong {
  color: var(--ink);
}

.button--quiet {
  min-height: 42px;
  padding: 0 11px;
  border-color: transparent;
  background: transparent;
  color: var(--accent-hover);
}

.button--quiet:hover {
  background: var(--accent-soft);
}

.button--danger {
  background: var(--danger);
  color: #fff;
}

.button--danger:hover {
  background: #9e302d;
}

.button[disabled] {
  background: #edf1f4;
  color: #94a0aa;
  cursor: not-allowed;
}

.desktop-records {
  display: none;
}

.mobile-records {
  display: grid;
  gap: 9px;
}

.record-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.record-card__top,
.record-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-card__title {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-card__meta,
.record-card__bottom {
  color: var(--ink-soft);
  font-size: 11px;
}

.filter-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 15px;
  background: var(--surface);
  text-align: center;
}

.filter-empty[hidden] {
  display: none;
}

.filter-empty strong {
  margin-top: 10px;
}

.filter-empty > span {
  max-width: 330px;
  margin: 4px 0 16px;
  color: var(--ink-soft);
  font-size: 13px;
}

.table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #f7fafc;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}

.data-table td {
  height: 62px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  color: #4f5d69;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: #f8fbfe;
}

.record-code {
  color: var(--accent-hover);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
}

.table-title {
  color: var(--ink);
  font-weight: 760;
}

.table-open {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  color: var(--accent);
}

.table-open:hover {
  background: var(--accent-soft);
}

.detail-header {
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--line);
}

.back-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  margin-left: -7px;
  padding: 0 7px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 760;
}

.detail-header__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 9px;
}

.detail-header__title {
  min-width: 0;
}

.detail-header__code {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-hover);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.detail-header h2 {
  margin: 0;
  font-size: clamp(25px, 7vw, 38px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 13px;
  color: var(--ink-soft);
  font-size: 11px;
}

.detail-header__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-layout,
.form-layout {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.detail-layout__main,
.detail-layout__aside,
.form-layout__main {
  display: grid;
  align-content: start;
  gap: 14px;
}

.content-card,
.form-card,
.form-summary {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.content-card,
.form-card {
  border-top: 4px solid var(--accent);
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.card-heading h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.02em;
}

.detail-grid {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--line);
}

.detail-grid > div {
  display: grid;
  gap: 3px;
  padding: 12px;
  background: var(--surface-subtle);
}

.detail-grid dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detail-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 680;
}

.note-text {
  margin: 0;
  color: #52606c;
  font-size: 14px;
  line-height: 1.7;
}

.timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 20px;
}

.timeline li:not(:last-child)::before {
  position: absolute;
  top: 11px;
  bottom: -2px;
  left: 6px;
  width: 2px;
  background: var(--line);
  content: "";
}

.timeline__dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: #aeb8c1;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.timeline__dot--blue {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.timeline div {
  display: grid;
}

.timeline strong {
  font-size: 12px;
}

.timeline small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 10px;
}

.danger-link {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #efc1bf;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 750;
  cursor: pointer;
}

.form-intro {
  padding: 2px 0 8px;
}

.form-intro h2 {
  margin: 6px 0 7px;
  font-size: clamp(25px, 7vw, 36px);
  letter-spacing: -.04em;
}

.form-intro p {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.field-grid {
  display: grid;
  gap: 15px;
}

.field {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  display: block;
  margin-bottom: 7px;
  color: #34414c;
  font-size: 12px;
  font-weight: 770;
}

.required-mark {
  margin-left: 3px;
  color: var(--danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.textarea {
  min-height: 112px;
  padding-top: 12px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(7 141 243 / 12%);
}

.input::placeholder,
.textarea::placeholder {
  color: #94a0aa;
}

.input:disabled {
  background: #f0f3f6;
  color: #8c98a2;
}

.field__help,
.field__error,
.field__counter {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 10px;
}

.field__error {
  color: var(--danger);
}

.field__counter {
  justify-content: space-between;
}

.field--error .input {
  border-color: var(--danger);
  background: #fffafa;
}

.select-wrap,
.input-icon-wrap {
  position: relative;
}

.select-wrap .select {
  padding-right: 42px;
  appearance: none;
}

.select-wrap > .icon {
  position: absolute;
  top: 50%;
  right: 13px;
  color: #74818c;
  pointer-events: none;
  transform: translateY(-50%);
}

.input-icon-wrap > .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  color: #74818c;
  pointer-events: none;
  transform: translateY(-50%);
}

.input-icon-wrap .input {
  padding-left: 42px;
}

.autocomplete-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgb(14 36 56 / 16%);
  list-style: none;
}

.autocomplete-panel[hidden] {
  display: none;
}

.autocomplete-panel button {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.autocomplete-panel button:hover,
.autocomplete-panel button.is-active {
  background: var(--accent-soft);
}

.autocomplete-panel button > span:last-child {
  display: grid;
}

.autocomplete-panel strong {
  font-size: 12px;
}

.autocomplete-panel small {
  color: var(--ink-soft);
  font-size: 10px;
}

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #edf1f4;
  color: #5e6a75;
  font-size: 10px;
  font-weight: 820;
}

.avatar--blue {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.choice-grid {
  display: grid;
  gap: 8px;
}

.choice-card {
  position: relative;
  display: grid;
  min-height: 68px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}

.choice-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice-card input {
  position: absolute;
  opacity: 0;
}

.choice-card__check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
}

.choice-card:has(input:checked) .choice-card__check {
  border: 6px solid var(--accent);
}

.choice-card > span:last-child {
  display: grid;
}

.choice-card strong {
  font-size: 12px;
}

.choice-card small {
  color: var(--ink-soft);
  font-size: 10px;
}

.form-summary {
  display: grid;
  gap: 9px;
  text-align: center;
}

.form-summary__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 3px;
  place-items: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.form-summary p {
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 12px;
}

.module-hero--compact {
  padding-top: 10px;
  padding-bottom: 18px;
}

.user-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.user-stat-strip > div {
  display: grid;
  min-width: 0;
  min-height: 64px;
  place-items: center;
  align-content: center;
  border-right: 1px solid var(--line);
}

.user-stat-strip > div:last-child {
  border-right: 0;
}

.user-stat-strip strong {
  color: var(--accent-hover);
  font-size: 20px;
  line-height: 1;
}

.user-stat-strip span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 10px;
}

.user-table-name {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.user-card-list {
  gap: 10px;
}

.user-card {
  display: grid;
  min-height: 92px;
  grid-template-columns: 44px minmax(0, 1fr) 19px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.user-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 12px;
}

.user-card__body {
  display: grid;
  min-width: 0;
}

.user-card__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-card__heading strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card__body small,
.user-card__body > span:last-child {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card__body small {
  margin-top: 3px;
  font-size: 11px;
}

.user-detail-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.user-detail-heading__avatar {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 14px;
}

.access-summary-list,
.permission-editor {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
  gap: 1px;
}

.access-summary-row,
.permission-editor-row {
  display: grid;
  min-height: 67px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  background: var(--surface-subtle);
}

.access-summary-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.permission-module-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.access-summary-row__body,
.permission-editor-row__module > span:last-child {
  display: grid;
  min-width: 0;
}

.access-summary-row strong,
.permission-editor-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-summary-row small,
.permission-editor-row small {
  color: var(--ink-soft);
  font-size: 9px;
}

.permission-level-label {
  max-width: 112px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 780;
  text-align: right;
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #b7daf7;
  border-radius: 11px;
  background: #edf7ff;
  color: #526979;
}

.form-note > .icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.form-note p {
  margin: 0;
  font-size: 11px;
}

.form-note--standalone {
  margin-top: 0;
}

.role-choice-grid {
  grid-template-columns: 1fr;
}

.role-choice-card {
  min-height: 78px;
}

.role-grid {
  display: grid;
  gap: 11px;
}

.role-card {
  display: grid;
  min-height: 252px;
  align-content: start;
  padding: 17px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.role-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background: #edf1f4;
  color: #5e6a75;
}

.role-card__icon--blue {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.role-card__icon--green {
  background: var(--success-soft);
  color: var(--success);
}

.role-card__count {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 720;
}

.role-card h3 {
  margin: 15px 0 5px;
  font-size: 19px;
}

.role-card > p {
  min-height: 42px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.role-capabilities {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}

.role-capabilities span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #46545f;
  font-size: 11px;
  font-weight: 680;
}

.role-capabilities .icon {
  color: var(--success);
}

.role-card__action {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.role-form-intro {
  padding-bottom: 15px;
}

.role-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
}

.role-title-row h2 {
  margin: 0;
}

.role-title-row p {
  margin-top: 3px;
}

.permission-editor-row {
  align-items: stretch;
}

.permission-editor-row__module {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.permission-editor-row__field .select {
  min-height: 46px;
}

.catalog-hero {
  display: grid;
  gap: 20px;
  padding: 16px 0 25px;
  border-bottom: 1px solid var(--line);
}

.catalog-ratio {
  display: grid;
  align-content: center;
  min-height: 96px;
  padding: 16px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}

.catalog-ratio strong {
  font-size: 29px;
  letter-spacing: -.04em;
  line-height: 1;
}

.catalog-ratio span {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.catalog-jump {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  margin: 14px -16px 0;
  padding: 0 16px 6px;
  scrollbar-width: none;
}

.catalog-jump::-webkit-scrollbar {
  display: none;
}

.catalog-jump a {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 740;
}

.component-section {
  padding-top: 33px;
  scroll-margin-top: 86px;
}

.component-heading {
  margin-bottom: 13px;
}

.component-heading > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.component-number {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.component-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.025em;
}

.component-heading p {
  max-width: 680px;
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.showcase-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.showcase-group + .showcase-group {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.showcase-label {
  display: block;
  margin-bottom: 9px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.component-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.main-action-demo {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 14px;
  border: 1px dashed #99cbed;
  border-radius: 12px;
  background: #eff8ff;
}

.main-action-demo > div {
  display: grid;
}

.main-action-demo strong {
  font-size: 13px;
}

.main-action-demo span {
  color: #566d7d;
  font-size: 11px;
}

.demo-card-grid,
.state-grid {
  display: grid;
  gap: 10px;
}

.demo-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 205px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.demo-card > .badge {
  position: absolute;
  top: 13px;
  right: 13px;
}

.demo-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.demo-card h3 {
  margin: 18px 0 5px;
  font-size: 16px;
}

.demo-card p {
  margin-bottom: 11px;
  color: var(--ink-soft);
  font-size: 12px;
}

.demo-card .text-link {
  margin-top: auto;
}

.demo-card--selected {
  border: 2px solid var(--accent);
  border-top-width: 5px;
  background: #f2f9ff;
}

.demo-card--disabled {
  border-top-color: #b8c2ca;
  box-shadow: none;
  opacity: .68;
}

.badge-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.badge--info {
  background: var(--info-soft);
  color: var(--info);
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.feature-badge--real {
  color: #0067b8;
  background: #e5f4ff;
  border: 1px solid #abd9f8;
}

.feature-badge--demo {
  color: #66377f;
  background: #f3eafb;
  border: 1px solid #d8bde8;
}

.feature-demo-card {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d8bde8;
  border-radius: 18px;
  background: #fbf7fe;
  color: #5f456d;
}

.feature-demo-card__heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.feature-demo-card h2,
.feature-demo-card p { margin: 0; }

.attendance-exception-list {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
  color: #9c3f3f;
  font-size: 0.88rem;
}

.attendance-audit {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: #f2f6f8;
  font-size: 0.84rem;
}

.badge--warning {
  background: #fff5df;
  color: #9a6400;
}

.badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.search-filter-demo {
  display: grid;
  gap: 8px;
}

.catalog-list {
  overflow: hidden;
  margin-top: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.catalog-list__item {
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.catalog-list__item:last-child {
  border-bottom: 0;
}

.catalog-list__main {
  display: grid;
  min-width: 0;
}

.catalog-list__main strong,
.catalog-list__main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-list__main strong {
  font-size: 12px;
}

.catalog-list__main small {
  color: var(--ink-soft);
  font-size: 10px;
}

.choice-demo {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.check-row {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  cursor: pointer;
}

.check-row:last-child {
  border-bottom: 0;
}

.check-row input {
  position: absolute;
  opacity: 0;
}

.check-control {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: transparent;
}

.check-row:has(input:checked) .check-control {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.state-card {
  display: grid;
  min-height: 245px;
  place-items: center;
  align-content: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}

.state-card--error {
  border-top-color: var(--danger);
}

.state-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
}

.state-icon--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.state-card strong {
  margin-top: 12px;
  font-size: 14px;
}

.state-card p {
  max-width: 250px;
  margin: 4px 0 14px;
  color: var(--ink-soft);
  font-size: 11px;
}

.skeleton {
  display: grid;
  width: 100%;
  gap: 9px;
  margin-bottom: 18px;
}

.skeleton__line {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf1f4 25%, #f7f9fb 50%, #edf1f4 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s infinite linear;
}

.skeleton__line--short {
  width: 42%;
}

.skeleton__line--medium {
  width: 72%;
}

@keyframes skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.detail-header--demo {
  padding-top: 0;
}

.tabs-demo {
  margin-top: 19px;
}

.tabs-demo__list {
  display: flex;
  overflow-x: auto;
  gap: 5px;
  border-bottom: 1px solid var(--line);
}

.tabs-demo__list button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.tabs-demo__list button.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent-hover);
}

.tabs-demo__panel {
  min-height: 108px;
  padding: 16px 2px 2px;
}

.tabs-demo__panel[hidden] {
  display: none;
}

.tabs-demo__panel strong {
  font-size: 13px;
}

.tabs-demo__panel p {
  max-width: 620px;
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.dialog {
  width: min(calc(100% - 24px), 520px);
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: 19px;
  border: 0;
  border-top: 5px solid var(--accent);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.dialog::backdrop {
  background: rgb(15 28 39 / 56%);
  backdrop-filter: blur(2px);
}

html.has-dialog-fallback {
  overflow: hidden;
}

html.has-dialog-fallback::before {
  position: fixed;
  z-index: 125;
  inset: 0;
  background: rgb(15 28 39 / 56%);
  content: "";
}

.dialog.is-fallback-open {
  position: fixed;
  z-index: 130;
  top: 50%;
  left: 50%;
  display: block;
  margin: 0;
  transform: translate(-50%, -50%);
}

.bottom-sheet.is-fallback-open {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  transform: none;
}

.dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.dialog h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.03em;
}

.dialog > p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.65;
}

.dialog__actions {
  display: grid;
  gap: 8px;
  margin-top: 19px;
}

.dialog--compact {
  width: min(calc(100% - 24px), 420px);
  text-align: center;
}

.dialog__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
}

.dialog__icon--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.bottom-sheet {
  width: 100%;
  max-width: none;
  max-height: 78vh;
  margin: auto 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  border-top: 5px solid var(--accent);
  border-radius: 22px 22px 0 0;
}

.sheet-options {
  display: grid;
  gap: 7px;
}

.sheet-option {
  display: grid;
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
  text-align: left;
  cursor: pointer;
}

.sheet-option__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.sheet-option > span {
  display: grid;
}

.sheet-option strong {
  font-size: 12px;
}

.sheet-option small {
  color: var(--ink-soft);
  font-size: 10px;
}

@media (min-width: 680px) {
  .page-tabs {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .stat-grid {
    gap: 12px;
  }

  .stat-card {
    padding: 18px;
  }

  .detail-grid,
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-grid > div:nth-child(odd) {
    border-right: 0;
  }

  .field--wide {
    grid-column: 1 / -1;
  }

  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-choice-grid {
    grid-template-columns: 1fr;
  }

  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-editor-row {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
  }

  .catalog-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: end;
  }

  .catalog-jump {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .demo-card-grid,
  .state-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-action-demo,
  .search-filter-demo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .dialog__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bottom-sheet {
    width: min(calc(100% - 24px), 520px);
    max-width: 520px;
    margin: auto;
    border-radius: 18px;
  }
}

@media (min-width: 960px) {
  .module-hero {
    padding: 15px 0 32px;
  }

  .stat-grid {
    max-width: 760px;
  }

  .user-stat-strip {
    max-width: 560px;
  }

  .role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-card {
    min-height: 132px;
  }

  .search-field {
    max-width: 560px;
  }

  .search-field kbd {
    display: inline-flex;
  }

  .filter-scroll {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .desktop-records {
    display: block;
  }

  .mobile-records {
    display: none;
  }

  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    margin-top: 22px;
  }

  .form-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    margin-top: 18px;
  }

  .form-layout__aside {
    display: block;
  }

  .form-summary {
    position: sticky;
    top: 112px;
  }

  .content-card,
  .form-card,
  .showcase-card {
    padding: 21px;
  }

  .catalog-hero {
    padding: 12px 0 34px;
  }

  .component-section {
    padding-top: 48px;
  }

  .component-heading h2 {
    font-size: 22px;
  }

  .showcase-card {
    margin-left: 45px;
  }
}

/* Nářadí */
.tool-quick-find,
.tool-economy-card,
.tool-principle-card,
.tool-box-card,
.tool-location-card,
.tool-box-hero,
.tool-box-accounting,
.tool-item-current,
.tool-recovery-card,
.tool-detail-stat-grid article,
.tool-deployment-row,
.tool-movement-row,
.tool-ledger-note,
.tool-location-summary,
.order-tool-cost-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tool-quick-find {
  position: relative;
  display: grid;
  gap: 13px;
  padding: 15px;
  border-top: 4px solid var(--accent);
}

.tool-quick-find__heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tool-quick-find__icon,
.tool-economy-card__icon,
.tool-principle-card__icon,
.tool-box-card__icon,
.tool-location-card__icon,
.tool-box-hero__icon,
.tool-box-accounting__icon,
.tool-item-current__icon,
.tool-ledger-note__icon,
.tool-location-summary__icon,
.order-tool-cost-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.tool-quick-find__heading > span:last-child {
  display: grid;
}

.tool-quick-find__heading strong {
  font-size: 15px;
}

.tool-quick-find__heading small {
  color: var(--ink-soft);
  font-size: 12px;
}

.tool-quick-find__field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.tool-quick-find__field > .input {
  min-height: 54px;
  font-weight: 680;
}

.tool-quick-find__field .autocomplete-panel {
  right: 0;
  left: 0;
}

.tool-quick-find__open {
  min-width: 100px;
}

.tool-economy-card {
  display: grid;
  gap: 15px;
  margin-top: 12px;
  padding: 18px;
  border-color: #b8daf5;
  background: linear-gradient(145deg, #eef8ff 0%, #fff 72%);
}

.tool-economy-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-economy-card__heading h2,
.tool-principle-card h2,
.tool-ledger-note h2,
.tool-location-summary h2,
.order-tool-cost-card h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.025em;
}

.tool-economy-card__heading p,
.tool-principle-card p,
.tool-ledger-note p,
.tool-location-summary p,
.order-tool-cost-card p {
  margin-bottom: 0;
}

.tool-economy-card__amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tool-economy-card__amounts > span,
.tool-box-hero__facts > span,
.tool-recovery-card__facts > span {
  display: grid;
  gap: 2px;
  padding: 11px;
  border-radius: 11px;
  background: rgb(255 255 255 / 76%);
}

.tool-economy-card__amounts small,
.tool-box-hero__facts small,
.tool-recovery-card__facts small,
.tool-detail-stat-grid small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-economy-card__amounts strong {
  font-size: clamp(15px, 4vw, 20px);
}

.tool-recovery-progress {
  overflow: hidden;
  height: 11px;
  border-radius: 999px;
  background: #d9e8f3;
}

.tool-recovery-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #31b47c);
}

.tool-economy-card > p,
.tool-recovery-card > p {
  margin: 0;
  color: #526979;
  font-size: 12px;
}

.tool-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tool-stat-strip > a {
  display: grid;
  min-width: 0;
  min-height: 74px;
  place-items: center;
  align-content: center;
  padding: 10px 5px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.tool-stat-strip > a:last-child {
  border-right: 0;
}

.tool-stat-strip strong {
  font-size: 23px;
  line-height: 1;
}

.tool-stat-strip span {
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-stat-strip__issue strong {
  color: var(--danger);
}

.tool-section,
.tool-list-section {
  margin-top: 25px;
}

.tool-box-grid,
.tool-location-grid {
  display: grid;
  gap: 10px;
}

.tool-box-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  transition: border-color .15s ease, transform .15s ease;
}

.tool-box-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.tool-box-card__top,
.tool-box-card__heading,
.tool-box-card__location,
.tool-box-card__footer {
  display: flex;
  align-items: center;
}

.tool-box-card__top {
  justify-content: space-between;
  gap: 10px;
}

.tool-code,
.tool-item-row__code {
  display: inline-grid;
  min-width: 42px;
  height: 32px;
  padding: 0 9px;
  place-items: center;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.tool-box-card__heading {
  gap: 11px;
}

.tool-box-card__heading > span:last-child,
.tool-box-card__location > span {
  display: grid;
  min-width: 0;
}

.tool-box-card__heading strong {
  font-size: 15px;
}

.tool-box-card__heading small,
.tool-box-card__location small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-box-card__location {
  gap: 9px;
  padding: 10px 11px;
  border-radius: 11px;
  background: var(--surface-subtle);
}

.tool-box-card__location > .icon {
  color: var(--accent-hover);
}

.tool-box-card__location strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-box-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tool-box-card__facts > span {
  display: grid;
  gap: 2px;
}

.tool-box-card__facts small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-box-card__facts strong {
  font-size: 12px;
}

.tool-box-card__footer {
  min-height: 28px;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-box-card__footer > strong {
  margin-left: auto;
  color: var(--ink);
}

.tool-deployment-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid #a9ddc3;
  border-radius: 13px;
  background: var(--success-soft);
  color: var(--success);
}

.tool-deployment-confirmation > span {
  display: grid;
}

.tool-deployment-confirmation small {
  color: #47745e;
  font-size: 11px;
}

.tool-location-card {
  display: grid;
  min-height: 88px;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 13px;
}

.tool-location-card__icon {
  width: 44px;
  height: 44px;
}

.tool-location-card__body {
  display: grid;
  min-width: 0;
}

.tool-location-card__body strong,
.tool-location-card__body small,
.tool-location-card__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-location-card__body strong {
  font-size: 13px;
}

.tool-location-card__body small,
.tool-location-card__body span {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-principle-card,
.tool-ledger-note,
.tool-location-summary {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  border-top: 4px solid var(--accent);
}

.tool-principle-card > .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.tool-principle-card p:last-child,
.tool-ledger-note p:last-child,
.tool-location-summary p:last-child {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.tool-detail-header,
.tool-location-header {
  margin-bottom: 12px;
}

.tool-return-alert {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #f0c6a8;
  border-radius: var(--radius-md);
  background: #fff7ef;
}

.tool-return-alert__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: #ffead8;
  color: #a95b20;
}

.tool-return-alert h2 {
  margin: 0;
  font-size: 17px;
}

.tool-return-alert p:last-child {
  margin: 3px 0 0;
  color: #775c49;
  font-size: 12px;
}

.tool-return-alert > .button {
  grid-column: 1 / -1;
}

.tool-box-hero {
  overflow: hidden;
  padding: 17px;
  border-top: 4px solid var(--accent);
}

.tool-box-hero__identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-box-hero__identity h2 {
  margin: 0;
  font-size: 20px;
}

.tool-box-hero__identity p:last-child {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.tool-box-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.tool-box-hero__facts > span {
  background: var(--surface-subtle);
}

.tool-box-hero__facts strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-box-hero__deployment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px -17px -17px;
  padding: 12px 17px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.tool-box-hero__deployment > span {
  display: grid;
}

.tool-box-hero__deployment strong {
  font-size: 12px;
}

.tool-box-hero__deployment small {
  color: #4d7594;
  font-size: 10px;
}

.tool-item-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tool-item-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.tool-item-row:last-child {
  border-bottom: 0;
}

.tool-item-row:hover {
  background: var(--surface-subtle);
}

.tool-item-row__main,
.tool-item-row__aside {
  display: grid;
  min-width: 0;
}

.tool-item-row__main strong,
.tool-item-row__main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-item-row__main strong {
  font-size: 13px;
}

.tool-item-row__main small,
.tool-item-row__aside small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-item-row__aside {
  justify-items: end;
  gap: 4px;
}

.tool-item-row--missing {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  background: #fff9f1;
}

.tool-item-row--missing .tool-item-row__code {
  background: #a95b20;
}

.tool-box-accounting {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 15px;
}

.tool-box-accounting strong {
  font-size: 13px;
}

.tool-box-accounting p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-box-accounting > .text-link {
  grid-column: 1 / -1;
  justify-self: start;
}

.tool-deploy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 13px;
  background: var(--accent-soft);
}

.tool-deploy-summary > span {
  display: grid;
}

.tool-deploy-summary > span:nth-child(3) {
  grid-column: 1 / -1;
}

.tool-deploy-summary small {
  color: #54748e;
  font-size: 10px;
}

.tool-deploy-summary p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  color: #416985;
  font-size: 11px;
}

.tool-usage-period {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-subtle);
}

.tool-usage-period__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent-hover);
}

.tool-usage-period__heading > span {
  display: grid;
}

.tool-usage-period__heading small {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.tool-usage-period__heading h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
}

.tool-usage-period__dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.tool-usage-period__hint {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.tool-usage-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.tool-usage-day {
  display: grid;
  min-height: 52px;
  place-items: center;
  gap: 1px;
  padding: 6px 3px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tool-usage-day span {
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.tool-usage-day strong {
  font-size: 12px;
}

.tool-usage-day.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px rgb(7 141 243 / 12%);
}

.tool-usage-day:focus-visible {
  outline: 3px solid rgb(7 141 243 / 18%);
  outline-offset: 1px;
}

.tool-usage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.tool-usage-summary > span {
  display: grid;
}

.tool-usage-summary small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-usage-summary > small {
  grid-column: 1 / -1;
}

.tool-move-rule {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 11px;
  border-radius: 11px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-return-reference {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 13px;
  background: var(--surface-subtle);
}

.tool-return-reference__visual {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: var(--surface);
  color: var(--accent-hover);
}

.tool-return-reference > span:last-child {
  display: grid;
}

.tool-return-reference small {
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-return-choice {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.tool-return-choice__button {
  display: grid;
  min-height: 74px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.tool-return-choice__button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tool-return-choice__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
}

.tool-return-choice__icon--success {
  background: var(--success-soft);
  color: var(--success);
}

.tool-return-choice__icon--warning {
  background: #fff2df;
  color: #a95b20;
}

.tool-return-choice__button > span:nth-child(2) {
  display: grid;
}

.tool-return-choice__button small {
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-return-problem {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #f0c6a8;
  border-radius: 13px;
  background: #fff9f3;
}

.tool-return-problem .field + .field {
  margin-top: 10px;
}

.tool-return-problem > .button {
  margin-top: 12px;
}

.tool-item-current {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 4px solid var(--accent);
}

.tool-item-current__icon {
  width: 54px;
  height: 54px;
}

.tool-item-current h2 {
  margin: 0;
  font-size: 18px;
}

.tool-item-current p:last-child {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.tool-item-current > .button {
  grid-column: 1 / -1;
}

.tool-recovery-card {
  margin-top: 12px;
  padding: 17px;
  border-color: #b8daf5;
  background: linear-gradient(145deg, #eef8ff 0%, #fff 76%);
}

.tool-recovery-card__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.tool-recovery-card__heading h2 {
  margin: 0;
  font-size: 20px;
}

.tool-recovery-card__heading > strong {
  color: var(--accent-hover);
  font-size: 20px;
}

.tool-recovery-card > .tool-recovery-progress {
  margin-top: 13px;
}

.tool-recovery-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.tool-recovery-card__facts > span {
  min-width: 0;
  padding: 9px;
  background: rgb(255 255 255 / 72%);
}

.tool-recovery-card__facts strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-recovery-card > p {
  margin-top: 12px;
}

.tool-detail-stat-grid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.tool-detail-stat-grid article {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 11px;
  padding: 12px;
}

.tool-detail-stat-grid article > .icon {
  color: var(--accent-hover);
}

.tool-detail-stat-grid article > span {
  display: grid;
}

.tool-detail-stat-grid strong {
  font-size: 12px;
}

.tool-deployment-list,
.tool-movement-list {
  display: grid;
  gap: 8px;
}

.tool-empty-inline {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
}

.tool-empty-inline > .icon {
  color: var(--accent-hover);
}

.tool-empty-inline > span {
  display: grid;
}

.tool-empty-inline strong {
  color: var(--ink);
  font-size: 12px;
}

.tool-empty-inline small {
  font-size: 10px;
}

.tool-deployment-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.tool-deployment-row__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--surface-subtle);
  color: var(--accent-hover);
}

.tool-deployment-row__main,
.tool-deployment-row__cost {
  display: grid;
  min-width: 0;
}

.tool-deployment-row__main small,
.tool-deployment-row__main span,
.tool-deployment-row__cost small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-deployment-row__main strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-deployment-row__cost {
  justify-items: end;
}

.tool-deployment-row > .badge {
  grid-column: 2 / -1;
  justify-self: start;
}

.tool-movement-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
}

.tool-movement-row__marker {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.tool-movement-row__marker--return {
  background: var(--success-soft);
  color: var(--success);
}

.tool-movement-row__marker--service {
  background: #fff2df;
  color: #a95b20;
}

.tool-movement-row__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

.tool-movement-row__heading > span {
  display: grid;
}

.tool-movement-row__heading strong {
  font-size: 13px;
}

.tool-movement-row__heading small {
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-movement-row__body > p {
  margin: 7px 0 0;
  font-size: 12px;
}

.tool-movement-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 10px;
}

.tool-movement-row__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tool-movement-row__cost {
  display: block;
  margin-top: 7px;
  color: var(--accent-hover);
  font-size: 11px;
}

.tool-ledger-note,
.tool-location-summary {
  margin-bottom: 12px;
}

.order-tool-cost-card {
  max-width: 980px;
  margin: 12px 0;
  padding: 15px;
  border-top: 4px solid var(--accent);
}

.order-tool-cost-card__heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.order-tool-cost-card__heading > strong {
  color: var(--accent-hover);
  font-size: 18px;
}

.order-tool-cost-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 11px;
  background: var(--surface-subtle);
}

.order-tool-cost-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.order-tool-cost-row > span:nth-child(2) strong,
.order-tool-cost-row > span:nth-child(2) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-tool-cost-row > span:nth-child(2) strong {
  font-size: 12px;
}

.order-tool-cost-row > span:nth-child(2) small {
  color: var(--ink-soft);
  font-size: 10px;
}

.order-tool-cost-card > p {
  margin-top: 11px;
  color: var(--ink-soft);
  font-size: 10px;
}

@media (min-width: 680px) {
  .tool-quick-find {
    grid-template-columns: minmax(220px, .7fr) minmax(300px, 1fr);
    align-items: center;
    padding: 18px;
  }

  .tool-economy-card {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
    align-items: center;
    padding: 20px;
  }

  .tool-economy-card__amounts {
    grid-column: 2;
    grid-row: 1;
  }

  .tool-economy-card > .tool-recovery-progress,
  .tool-economy-card > p {
    grid-column: 1 / -1;
  }

  .tool-box-grid,
  .tool-location-grid,
  .tool-detail-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-principle-card {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    padding: 20px;
  }

  .tool-principle-card > .badge {
    grid-column: auto;
  }

  .tool-return-alert {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
  }

  .tool-return-alert > .button {
    grid-column: auto;
  }

  .tool-box-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tool-box-accounting {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .tool-box-accounting > .text-link {
    grid-column: auto;
  }

  .tool-item-current {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    padding: 20px;
  }

  .tool-item-current > .button {
    grid-column: auto;
  }

  .tool-detail-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-deployment-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
  }

  .tool-deployment-row > .badge {
    grid-column: auto;
  }

  .tool-ledger-note,
  .tool-location-summary {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 20px;
  }
}

@media (min-width: 960px) {
  .tools-tabs,
  .tool-quick-find,
  .tool-economy-card,
  .tool-stat-strip,
  .tool-section,
  .tool-list-section,
  .tool-principle-card,
  .tool-detail-header,
  .tool-location-header,
  .tool-return-alert,
  .tool-box-hero,
  .tool-box-accounting,
  .tool-item-current,
  .tool-recovery-card,
  .tool-detail-stat-grid,
  .tool-ledger-note,
  .tool-location-summary {
    max-width: 1040px;
  }

  .tool-box-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Společná pracovní fronta */

[data-task-item][hidden],
[data-task-badge][hidden],
.task-empty[hidden] {
  display: none !important;
}

.home-welcome,
.tasks-page-header,
.task-card,
.task-principle-note {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.home-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 0;
  background: linear-gradient(135deg, #056fbd, #078df3 60%, #39a9ff);
  color: #fff;
}

.home-welcome .page-intro__eyebrow {
  margin: 0 0 5px;
  color: rgb(255 255 255 / 70%);
}

.home-welcome h2 {
  margin: 0;
  font-size: clamp(23px, 7vw, 34px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.home-welcome__copy > p:last-child {
  margin: 6px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: 10px;
}

.home-welcome__counter {
  display: grid;
  min-width: 72px;
  min-height: 72px;
  place-items: center;
  align-content: center;
  border: 1px solid rgb(255 255 255 / 23%);
  border-radius: 16px;
  background: rgb(0 53 94 / 21%);
  color: #fff;
}

.home-welcome__counter strong {
  font-size: 29px;
  letter-spacing: -.05em;
  line-height: 1;
}

.home-welcome__counter span {
  margin-top: 4px;
  color: rgb(255 255 255 / 72%);
  font-size: 8px;
  font-weight: 760;
  text-transform: uppercase;
}

.home-quick-actions {
  margin-top: 18px;
}

.home-quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.home-quick-action {
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.home-quick-action--primary {
  border-color: #9bcdf3;
  background: linear-gradient(145deg, #eaf6ff, #fff);
}

.home-quick-action__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.home-quick-action > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-quick-action strong {
  font-size: 12px;
}

.home-quick-action small {
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.35;
}

.quick-entry-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid #a9ddc3;
  border-radius: 13px;
  background: var(--success-soft);
  color: var(--success);
}

.quick-entry-confirmation[hidden] {
  display: none !important;
}

.quick-entry-confirmation > span {
  display: grid;
}

.quick-entry-confirmation small {
  color: #47745e;
  font-size: 10px;
}

.task-dashboard {
  margin-top: 22px;
}

.task-dashboard__heading {
  align-items: end;
}

.task-dashboard__all {
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 780;
}

.task-dashboard__all:hover {
  text-decoration: underline;
}

.task-list {
  display: grid;
  gap: 9px;
}

.task-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-left: 4px solid var(--accent);
  box-shadow: none;
}

.task-card[data-task-priority="urgent"] {
  border-left-color: var(--danger);
}

.task-card[data-task-priority="high"] {
  border-left-color: #d58a16;
}

.task-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.task-card[data-task-priority="urgent"] .task-card__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.task-card[data-task-priority="high"] .task-card__icon {
  background: #fff4dd;
  color: #a76500;
}

.task-card__body {
  min-width: 0;
}

.task-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.task-card__module {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-card h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.task-card__body > p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.45;
}

.task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
  color: #657687;
  font-size: 8px;
}

.task-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-card__action {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  padding: 0 11px;
  font-size: 10px;
}

.task-card[data-task-priority="urgent"] .task-card__action {
  border-color: #efb9b9;
  background: #fff8f8;
  color: #9a2c2c;
}

.task-empty {
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid #b9dfcc;
  border-radius: 14px;
  background: var(--success-soft);
  color: var(--success);
}

.task-empty:not([hidden]) {
  display: flex;
}

.task-empty > span {
  display: grid;
  gap: 2px;
}

.task-empty strong {
  font-size: 11px;
}

.task-empty small {
  color: #517262;
  font-size: 9px;
}

.task-dashboard + .module-section {
  margin-top: 28px;
}

.tasks-page-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border-top: 4px solid var(--accent);
}

.tasks-page-header__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}

.tasks-page-header .section-heading__eyebrow {
  margin: 0 0 3px;
  font-size: 8px;
}

.tasks-page-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.03em;
}

.tasks-page-header div > p:last-child {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
}

.tasks-page-header__count {
  display: grid;
  justify-items: end;
}

.tasks-page-header__count strong {
  color: var(--accent-hover);
  font-size: 25px;
  letter-spacing: -.05em;
  line-height: 1;
}

.tasks-page-header__count span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 7px;
  font-weight: 760;
  text-transform: uppercase;
}

.tasks-page-section {
  margin-top: 22px;
}

.task-principle-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 13px;
  border-color: #b8daf5;
  background: #edf7ff;
}

.task-principle-note > .icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.task-principle-note strong {
  display: block;
  font-size: 10px;
}

.task-principle-note p {
  margin: 2px 0 0;
  color: #4c657d;
  font-size: 9px;
  line-height: 1.5;
}

@media (min-width: 680px) {
  .home-welcome {
    padding: 22px;
  }

  .home-welcome__counter {
    min-width: 88px;
    min-height: 82px;
  }

  .task-list--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-quick-actions__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .task-card:not(.task-card--compact) {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px;
  }

  .task-card:not(.task-card--compact) .task-card__icon {
    width: 46px;
    height: 46px;
  }

  .task-card:not(.task-card--compact) .task-card__action {
    grid-column: auto;
    width: auto;
    min-width: 158px;
  }
}

@media (min-width: 960px) {
  .home-welcome,
  .home-quick-actions,
  .task-dashboard,
  .tasks-page-header,
  .tasks-page-section,
  .task-principle-note {
    max-width: 980px;
  }

  .home-welcome h2 {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton__line {
    animation: none;
  }
}

/* Rychlé zápisy a fotografie */

.quick-entry-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 13px;
  background: var(--accent-soft);
}

.quick-entry-summary__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: #d6ebfb;
  color: var(--accent-hover);
}

.quick-entry-summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.quick-entry-summary small,
.quick-entry-summary em {
  overflow: hidden;
  color: #54748e;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-entry-summary strong {
  font-size: 13px;
}

.quick-entry-summary p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #416985;
  font-size: 10px;
  line-height: 1.5;
}

.photo-principle,
.photo-list-section,
.photo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.photo-principle {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border-color: #b8daf5;
  border-top: 4px solid var(--accent);
  background: linear-gradient(145deg, #eef8ff 0%, #fff 75%);
}

.photo-principle__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.photo-principle h2 {
  margin: 2px 0 4px;
  font-size: 17px;
}

.photo-principle p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.photo-principle > .button {
  grid-column: 1 / -1;
  width: 100%;
}

.photo-list-section {
  margin-top: 14px;
  padding: 14px;
}

.photo-list-section .search-field {
  margin-bottom: 10px;
}

.photo-card-grid {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.photo-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 11px;
  overflow: hidden;
  padding: 10px;
  box-shadow: none;
}

.photo-card__preview {
  display: grid;
  min-height: 100px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border-radius: 11px;
  background: linear-gradient(145deg, #dceefa, #eef6fb);
  color: var(--accent-hover);
}

.photo-card__preview span {
  font-size: 9px;
  font-weight: 760;
}

.photo-card__body {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 4px;
}

.photo-card__top,
.photo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 9px;
}

.photo-card__top small,
.photo-card__body > span,
.photo-card__body > p,
.photo-card__meta {
  color: var(--ink-soft);
  font-size: 9px;
}

.photo-card__body > strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card__body > p {
  margin: 3px 0;
  line-height: 1.45;
}

.photo-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 680px) {
  .photo-principle {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
  }

  .photo-principle > .button {
    grid-column: auto;
    width: auto;
  }

  .photo-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .photo-principle,
  .photo-list-section {
    max-width: 980px;
  }
}

/* Docházka */

.button--large {
  min-height: 58px;
  border-radius: 15px;
  font-size: 16px;
}

.attendance-tabs {
  margin-bottom: 14px;
}

.attendance-today,
.attendance-panel {
  display: grid;
  gap: 14px;
}

.attendance-panel[hidden],
.break-warning[hidden],
.break-card__extended[hidden] {
  display: none;
}

.attendance-state-line {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 11px;
}

.attendance-kicker {
  margin: 0 0 5px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 830;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.attendance-start-card,
.shift-live-card,
.active-work-card,
.break-card,
.shift-complete-card,
.attendance-summary-hero,
.team-output-card,
.weather-change-card,
.approval-clean-card,
.week-approval-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.attendance-start-card {
  display: grid;
  padding: 21px 17px 16px;
  text-align: center;
}

.attendance-start-card__icon,
.break-card__icon,
.shift-complete-card__icon {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 19px;
  background: var(--accent-soft);
  color: var(--accent);
}

.attendance-start-card h2,
.break-card h2,
.shift-complete-card h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.04em;
}

.attendance-start-card > p:not(.attendance-kicker) {
  max-width: 430px;
  margin: 7px auto 18px;
  color: var(--ink-soft);
  font-size: 13px;
}

.attendance-plan-brief {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
  text-align: left;
}

.attendance-plan-brief > div {
  display: grid;
  min-height: 62px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--surface-subtle);
}

.attendance-plan-brief .icon {
  color: var(--accent);
}

.attendance-plan-brief span {
  display: grid;
}

.attendance-plan-brief small,
.start-shift-details span,
.work-facts dt,
.shift-summary-grid span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 730;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.attendance-plan-brief strong {
  margin-top: 2px;
  font-size: 13px;
}

.attendance-help-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.attendance-help-link:hover {
  color: var(--danger);
}

.shift-live-card {
  overflow: hidden;
  padding: 17px;
  border-top: 0;
  background: linear-gradient(135deg, #087fd6, #078df3 58%, #39a9ff);
  color: #fff;
}

.shift-live-card__top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.shift-live-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: rgb(255 255 255 / 16%);
}

.shift-live-card__top > span:nth-child(2) {
  display: grid;
}

.shift-live-card__top small {
  color: rgb(255 255 255 / 76%);
  font-size: 10px;
  font-weight: 740;
  text-transform: uppercase;
}

.attendance-live-time {
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 8vw, 36px);
  letter-spacing: -.035em;
  line-height: 1.05;
}

.shift-live-card__since {
  color: rgb(255 255 255 / 82%);
  font-size: 10px;
  text-align: right;
}

.shift-live-card__place {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 15px -17px -17px;
  padding: 11px 17px;
  background: rgb(0 60 108 / 20%);
  color: rgb(255 255 255 / 88%);
  font-size: 11px;
}

.active-work-card {
  padding: 17px;
}

.active-work-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.active-work-card h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.03em;
}

.active-work-card__job {
  margin: 5px 0 17px;
  color: var(--ink-soft);
  font-size: 11px;
}

.work-progress {
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-subtle);
}

.work-progress__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.work-progress__labels span {
  color: var(--ink-soft);
}

.work-progress__track,
.week-progress {
  height: 8px;
  overflow: hidden;
  margin-top: 9px;
  border-radius: 999px;
  background: #dfe7ed;
}

.work-progress__track span,
.week-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.work-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 13px 0 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--line);
}

.work-facts > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px;
  background: #fff;
}

.work-facts dd {
  overflow: hidden;
  margin: 0;
  font-size: 11px;
  font-weight: 730;
  text-overflow: ellipsis;
}

.work-report-button {
  width: 100%;
  min-height: 52px;
  margin-top: 13px;
}

.work-report-sent {
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid #b9dfcc;
  border-radius: 11px;
  background: var(--success-soft);
  color: var(--success);
}

.work-report-sent:not([hidden]) {
  display: flex;
}

.work-report-sent > span {
  display: grid;
  gap: 2px;
}

.work-report-sent strong {
  font-size: 11px;
}

.work-report-sent small {
  color: #517262;
  font-size: 9px;
}

.work-report-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
}

.work-report-summary__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.work-report-summary > span:last-child {
  display: grid;
  gap: 2px;
}

.work-report-summary strong {
  font-size: 12px;
}

.work-report-summary small,
.field__hint {
  color: var(--ink-soft);
  font-size: 9px;
}

.work-report-help {
  margin: 11px 0 14px !important;
  color: var(--ink-soft);
  font-size: 10px !important;
  line-height: 1.5 !important;
}

.attendance-action-stack {
  display: grid;
  gap: 8px;
}

.attendance-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.attendance-action-row .button {
  min-width: 0;
  padding: 0 10px;
  font-size: 12px;
}

.break-card,
.shift-complete-card {
  display: grid;
  justify-items: center;
  padding: 24px 17px 18px;
  text-align: center;
}

.break-card {
  border-top-color: #d58a16;
}

.break-card__icon {
  background: #fff4dd;
  color: #a76500;
}

.break-countdown {
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 18vw, 78px);
  letter-spacing: -.055em;
  line-height: 1;
}

.break-card__note {
  max-width: 400px;
  margin: 5px 0 18px;
  color: var(--ink-soft);
  font-size: 12px;
}

.break-card > .button {
  margin-top: 8px;
}

.break-warning {
  width: 100%;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 11px 12px;
  border: 1px solid #f1cf8d;
  border-radius: 11px;
  background: #fff8e8;
  color: #7d5208;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

.break-warning:not([hidden]) {
  display: flex;
}

.break-card__extended {
  margin-top: 9px;
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
}

.shift-complete-card__icon {
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.shift-complete-card h2 {
  margin-top: 11px;
}

.shift-complete-card > p {
  max-width: 410px;
  margin: 7px auto 17px;
  color: var(--ink-soft);
  font-size: 12px;
}

.shift-summary-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.shift-summary-grid > div {
  display: grid;
  gap: 3px;
  padding: 12px 6px;
  background: var(--surface-subtle);
}

.shift-summary-grid strong {
  font-size: 12px;
}

.attendance-timeline {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 19px 0;
}

.attendance-timeline span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--ink-soft);
}

.attendance-timeline span:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  content: "";
}

.attendance-timeline i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-bottom: 5px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

.attendance-timeline strong {
  font-size: 10px;
}

.attendance-timeline small {
  font-size: 9px;
}

.location-confirmation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #b9dfcc;
  border-radius: 13px;
  background: var(--success-soft);
}

.location-confirmation__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--success);
}

.location-confirmation > span:nth-child(2) {
  display: grid;
}

.location-confirmation strong {
  font-size: 13px;
}

.location-confirmation small {
  color: #517262;
  font-size: 10px;
}

.start-shift-details {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.start-shift-details > div {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  background: #fff;
}

.start-shift-details strong {
  font-size: 12px;
  text-align: right;
}

.offline-code {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--info-soft);
  color: #48627c;
  font-size: 10px;
}

.offline-code .icon {
  flex: 0 0 auto;
  color: var(--info);
}

.quantity-input {
  position: relative;
}

.quantity-input .input {
  padding-right: 48px;
  text-align: left;
}

.quantity-input span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 740;
  transform: translateY(-50%);
}

.end-output-field {
  margin-top: 16px;
  text-align: left;
}

.attendance-summary-hero {
  display: grid;
  gap: 15px;
  padding: 18px;
}

.attendance-summary-hero__copy h2 {
  margin: 0;
  color: var(--accent-hover);
  font-size: clamp(34px, 12vw, 50px);
  letter-spacing: -.055em;
  line-height: 1;
}

.attendance-summary-hero__copy > span,
.attendance-summary-hero__status > span {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 11px;
}

.attendance-summary-hero__status {
  align-self: center;
}

.week-progress {
  grid-column: 1 / -1;
  margin-top: -3px;
}

.week-mini-stats,
.team-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.week-mini-stats > div,
.team-status-strip > div {
  display: grid;
  min-width: 0;
  min-height: 66px;
  place-items: center;
  align-content: center;
  padding: 8px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.week-mini-stats > div:last-child,
.team-status-strip > div:last-child {
  border-right: 0;
}

.week-mini-stats strong {
  font-size: 12px;
}

.week-mini-stats span,
.team-status-strip span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 9px;
}

.attendance-section {
  margin-top: 25px;
}

.attendance-day-list,
.team-attendance-grid,
.work-plan-list,
.approval-exception-list {
  display: grid;
  gap: 9px;
}

.attendance-day-card {
  display: grid;
  min-height: 76px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.attendance-day-card__date,
.attendance-day-card__time {
  display: grid;
  min-width: 0;
}

.attendance-day-card__date strong,
.attendance-day-card__time strong {
  font-size: 12px;
}

.attendance-day-card__date span,
.attendance-day-card__time span {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-status-strip {
  margin-top: 0;
}

.team-status-strip strong {
  font-size: 24px;
  line-height: 1;
}

.team-status-strip__working strong {
  color: var(--success);
}

.team-status-strip__break strong {
  color: #a76500;
}

.team-status-strip__issue strong {
  color: var(--danger);
}

.team-attendance-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.team-attendance-card--waiting {
  border-left-color: #d58a16;
}

.team-attendance-card--issue {
  border-left-color: var(--danger);
}

.team-attendance-card__top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.team-attendance-card__person {
  display: grid;
  min-width: 0;
}

.team-attendance-card__person strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-card__person small {
  color: var(--ink-soft);
  font-size: 10px;
}

.team-attendance-card__facts {
  display: grid;
  gap: 6px;
  margin-top: 11px;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-subtle);
  color: #53616d;
  font-size: 10px;
}

.team-attendance-card__facts span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.team-attendance-card__facts .icon {
  color: var(--accent);
}

.team-attendance-card__action {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  background: transparent;
  color: var(--danger);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.team-output-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  margin-top: 14px;
  padding: 15px;
}

.team-output-card__icon,
.weather-change-card__icon,
.approval-clean-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}

.team-output-card h2,
.weather-change-card h2,
.approval-clean-card h2,
.week-approval-card h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.025em;
}

.team-output-card p:last-child,
.weather-change-card p:last-child,
.approval-clean-card p:last-child,
.week-approval-card p:last-child {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.team-output-card > strong {
  grid-column: 1 / -1;
  padding: 11px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  text-align: center;
}

.weather-change-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  padding: 15px;
  border-top-color: #5291ba;
  background: linear-gradient(135deg, #fff, #f0f8ff);
}

.weather-change-card > .badge {
  grid-column: 2;
  justify-self: start;
}

.work-plan-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 34px;
  gap: 10px;
  padding: 13px 8px 13px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.work-plan-card__date {
  display: grid;
  align-content: start;
  gap: 2px;
  padding-right: 9px;
  border-right: 1px solid var(--line);
}

.work-plan-card__date span {
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.work-plan-card__date strong {
  font-size: 10px;
}

.work-plan-card__date time {
  margin-top: 7px;
  font-size: 20px;
  font-weight: 830;
  letter-spacing: -.04em;
}

.work-plan-card__body {
  min-width: 0;
}

.work-plan-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.work-plan-card__heading h3 {
  margin: 0;
  font-size: 13px;
}

.work-plan-card__heading p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.work-plan-card__facts {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 9px;
}

.work-plan-card__facts span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.work-plan-card__facts .icon {
  color: var(--accent);
}

.work-plan-card__menu {
  display: grid;
  width: 34px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.approval-clean-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 11px;
  padding: 15px;
  border-top-color: var(--success);
  background: linear-gradient(135deg, #fff, #f2fbf6);
}

.approval-clean-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--success-soft);
  color: var(--success);
}

.approval-clean-card > .badge {
  grid-column: 2;
  justify-self: start;
}

.approval-exception-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.approval-exception-card__body {
  min-width: 0;
}

.approval-exception-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.approval-exception-card__heading > div {
  display: grid;
}

.approval-exception-card__heading strong {
  font-size: 12px;
}

.approval-exception-card__heading span:not(.badge) {
  color: var(--ink-soft);
  font-size: 9px;
}

.approval-exception-card h3 {
  margin: 10px 0 0;
  font-size: 13px;
}

.approval-exception-card p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.approval-exception-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 10px;
}

.approval-exception-card__actions .button {
  min-height: 43px;
  padding: 0 10px;
  font-size: 10px;
}

.week-approval-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
}

.week-approval-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
}

.week-approval-card__stats strong {
  color: var(--ink);
}

@media (min-width: 680px) {
  .attendance-today {
    max-width: 760px;
    margin: 0 auto;
  }

  .attendance-plan-brief {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .attendance-summary-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 22px;
  }

  .attendance-summary-hero__status {
    text-align: right;
  }

  .team-attendance-grid,
  .approval-exception-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-output-card,
  .weather-change-card,
  .approval-clean-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    padding: 18px;
  }

  .team-output-card > strong,
  .weather-change-card > .badge,
  .approval-clean-card > .badge {
    grid-column: auto;
  }

  .work-plan-card {
    grid-template-columns: 100px minmax(0, 1fr) 44px;
    padding: 16px 10px 16px 16px;
  }

  .work-plan-card__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .week-approval-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .week-approval-card__stats {
    justify-content: flex-end;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 960px) {
  .attendance-tabs {
    margin-bottom: 22px;
  }

  .attendance-day-list {
    max-width: 860px;
  }

  .team-attendance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-output-card,
  .weather-change-card,
  .approval-clean-card,
  .week-approval-card {
    max-width: 980px;
  }

  .work-plan-list {
    max-width: 980px;
  }
}

/* Přepínač uživatelského náhledu */

.user-switcher-sheet {
  max-height: min(84vh, 720px);
}

.user-switcher-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 14px;
  padding: 10px 11px;
  border: 1px solid #c8e2f7;
  border-radius: 11px;
  background: var(--info-soft);
  color: #4c657d;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

.user-switcher-note .icon {
  flex: 0 0 auto;
  color: var(--info);
}

.user-profile-list {
  display: grid;
  gap: 8px;
}

.user-profile-option {
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.user-profile-option:hover {
  border-color: #a9d5f6;
  background: var(--accent-soft);
}

.user-profile-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}

.user-profile-option__avatar {
  width: 44px;
  height: 44px;
}

.user-profile-option__body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.user-profile-option__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.user-profile-option__heading strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-option__body > span:last-child {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-option__check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #edf1f4;
  color: transparent;
}

.user-profile-option[aria-pressed="true"] .user-profile-option__check {
  background: var(--accent);
  color: #fff;
}

@media (min-width: 680px) {
  .user-switcher-sheet {
    width: min(calc(100% - 24px), 560px);
    max-width: 560px;
  }

  .user-profile-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Peníze */

.money-tabs {
  margin-bottom: 14px;
}

.money-kicker {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 830;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.money-balance-card,
.money-info-card,
.regular-advance-card,
.next-advance-card,
.money-history-hero,
.money-earning-card,
.money-transaction-row,
.money-history-card,
.advance-approval-card,
.payroll-worker-card,
.money-privacy-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.money-balance-card {
  overflow: hidden;
  padding: 18px;
  border: 0;
  background: linear-gradient(135deg, #056fbd, #078df3 58%, #39a9ff);
  color: #fff;
  box-shadow: 0 15px 35px rgb(5 111 189 / 21%);
}

.money-balance-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.money-balance-card__top > span:first-child {
  display: grid;
  min-width: 0;
}

.money-balance-card .money-kicker {
  color: rgb(255 255 255 / 70%);
}

.money-balance-card__top > span:first-child > strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-balance-card .badge {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(0 53 94 / 25%);
  color: #fff;
}

.money-balance-card__label {
  display: block;
  margin-top: 24px;
  color: rgb(255 255 255 / 78%);
  font-size: 11px;
  font-weight: 760;
}

.money-balance-card__amount {
  display: block;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 58px);
  letter-spacing: -.06em;
  line-height: 1.04;
}

.money-balance-card > p {
  max-width: 520px;
  margin: 8px 0 17px;
  color: rgb(255 255 255 / 78%);
  font-size: 11px;
}

.money-balance-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  background: rgb(255 255 255 / 18%);
}

.money-balance-breakdown > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 8px;
  background: rgb(0 63 111 / 18%);
}

.money-balance-breakdown span {
  color: rgb(255 255 255 / 68%);
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.money-balance-breakdown strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-next-payout {
  display: grid;
  min-height: 55px;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  margin: 16px -18px -18px;
  padding: 9px 18px;
  background: rgb(0 53 94 / 24%);
}

.money-next-payout > span {
  display: grid;
}

.money-next-payout small {
  color: rgb(255 255 255 / 68%);
  font-size: 9px;
  font-weight: 720;
  text-transform: uppercase;
}

.money-next-payout strong {
  font-size: 12px;
}

.money-info-card,
.money-privacy-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 13px 14px;
  border-color: #b8daf5;
  background: #edf7ff;
}

.money-info-card > .icon,
.money-privacy-card > .icon {
  margin-top: 1px;
  color: var(--accent);
}

.money-info-card strong,
.money-privacy-card strong {
  display: block;
  font-size: 11px;
}

.money-info-card p,
.money-privacy-card p {
  margin: 2px 0 0;
  color: #4c657d;
  font-size: 10px;
  line-height: 1.5;
}

.money-section {
  margin-top: 24px;
}

.money-earning-list,
.money-transaction-list,
.money-history-list,
.advance-approval-list,
.payroll-worker-list {
  display: grid;
  gap: 8px;
}

.money-earning-card {
  display: grid;
  gap: 11px;
  padding: 14px;
}

.money-earning-card__top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.money-earning-card__icon,
.money-transaction-row__icon,
.money-history-card__icon,
.regular-advance-card__icon,
.money-history-hero__icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.money-earning-card__icon,
.money-transaction-row__icon {
  width: 42px;
  height: 42px;
}

.money-earning-card__title {
  display: grid;
  min-width: 0;
}

.money-earning-card__title small {
  color: var(--accent-hover);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
}

.money-earning-card__title strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-earning-card__amount,
.money-transaction-row__amount,
.money-history-card__amount,
.advance-approval-card__amount {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}

.money-earning-card__detail {
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--surface-subtle);
}

.money-earning-card__detail span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
}

.money-earning-card__detail p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.money-earning-card > .badge {
  justify-self: start;
}

.money-transaction-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.money-transaction-row {
  display: grid;
  min-height: 71px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.money-transaction-row:last-child {
  border-bottom: 0;
}

.money-transaction-row__icon--coins {
  background: #fff4dd;
  color: #a76500;
}

.money-transaction-row__body,
.money-transaction-row__aside {
  display: grid;
  min-width: 0;
}

.money-transaction-row__body strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-transaction-row__body small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-transaction-row__aside {
  justify-items: end;
  gap: 4px;
}

.money-advance-sheet {
  max-height: min(88vh, 780px);
}

.advance-fee-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 15px;
  padding: 10px 11px;
  border: 1px solid #f0cf91;
  border-radius: 11px;
  background: #fff8e8;
  color: #79520c;
  font-size: 10px;
  line-height: 1.45;
}

.advance-fee-notice > .icon {
  margin-top: 1px;
}

.money-input {
  position: relative;
}

.money-input .input {
  padding-right: 48px;
  font-size: 19px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.money-input > span {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 760;
  transform: translateY(-50%);
}

.money-optional {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
}

.advance-request-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  margin-top: 14px;
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-subtle);
  font-size: 11px;
}

.advance-request-summary span {
  color: var(--ink-soft);
}

.advance-request-summary strong {
  text-align: right;
}

.advance-request-summary span:nth-last-child(-n + 2),
.advance-request-summary strong:last-child {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.regular-advance-card,
.money-history-hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 4px solid var(--accent);
}

.regular-advance-card__icon,
.money-history-hero__icon {
  width: 54px;
  height: 54px;
}

.regular-advance-card h2,
.money-history-hero h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.045em;
}

.regular-advance-card p:last-child,
.money-history-hero p:last-child {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.regular-advance-card > .badge,
.money-history-hero > .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.advance-month-strip,
.payroll-admin-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
  box-shadow: var(--shadow-sm);
}

.advance-month-strip > div,
.payroll-admin-strip > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 11px 8px;
  background: var(--surface);
  text-align: center;
}

.advance-month-strip strong,
.payroll-admin-strip strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advance-month-strip span,
.payroll-admin-strip span {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 720;
  text-transform: uppercase;
}

.next-advance-card {
  margin-top: 12px;
  padding: 15px;
  border-top: 4px solid #d58a16;
}

.next-advance-card__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.next-advance-card h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.03em;
}

.next-advance-card > p {
  margin: 9px 0 13px;
  color: var(--ink-soft);
  font-size: 11px;
}

.next-advance-card__example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 9px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #fff8e8;
}

.next-advance-card__example span {
  color: #79520c;
  font-size: 9px;
}

.next-advance-card__example strong {
  font-size: 12px;
  text-align: right;
}

.next-advance-card__example > .icon {
  display: none;
  color: #a76500;
}

.money-history-hero {
  border-top-color: var(--accent);
}

.money-history-card {
  display: grid;
  grid-template-columns: 56px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
}

.money-history-card[hidden] {
  display: none;
}

.money-history-card__date {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 740;
}

.money-history-card__icon {
  width: 40px;
  height: 40px;
}

.money-history-card__body {
  display: grid;
  min-width: 0;
}

.money-history-card__body strong,
.money-history-card__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-history-card__body strong {
  font-size: 11px;
}

.money-history-card__body small {
  color: var(--ink-soft);
  font-size: 9px;
}

.money-history-card > .badge {
  grid-column: 3 / -1;
  justify-self: start;
}

.payroll-admin-strip {
  margin-top: 0;
}

.advance-approval-card {
  overflow: hidden;
}

.advance-approval-card__top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
}

.advance-approval-card__top .avatar,
.payroll-worker-card .avatar {
  width: 42px;
  height: 42px;
}

.advance-approval-card__person {
  display: grid;
  min-width: 0;
}

.advance-approval-card__person strong {
  font-size: 12px;
}

.advance-approval-card__person small {
  color: var(--ink-soft);
  font-size: 9px;
}

.advance-approval-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.advance-approval-card__facts > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 9px;
  background: var(--surface-subtle);
}

.advance-approval-card__facts dt {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 720;
  text-transform: uppercase;
}

.advance-approval-card__facts dd {
  overflow: hidden;
  margin: 0;
  font-size: 9px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advance-approval-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
}

.advance-approval-card__actions .button {
  min-width: 0;
  min-height: 48px;
  padding: 0 9px;
  font-size: 11px;
}

.payroll-worker-card {
  padding: 13px;
}

.payroll-worker-card__heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.payroll-worker-card__heading > span:nth-child(2) {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.payroll-worker-card__heading > span:nth-child(2) > strong {
  font-size: 12px;
}

.payroll-worker-card__heading > strong {
  font-size: 14px;
  white-space: nowrap;
}

.payroll-worker-card__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
}

.payroll-worker-card__numbers strong {
  color: var(--ink);
}

.money-privacy-card {
  margin-top: 16px;
}

@media (min-width: 680px) {
  .money-balance-card {
    padding: 22px;
  }

  .money-next-payout {
    margin: 18px -22px -22px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .money-earning-list,
  .advance-approval-list,
  .payroll-worker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .regular-advance-card,
  .money-history-hero {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    padding: 20px;
  }

  .regular-advance-card__icon,
  .money-history-hero__icon {
    width: 64px;
    height: 64px;
  }

  .regular-advance-card > .badge,
  .money-history-hero > .badge {
    grid-column: auto;
    justify-self: end;
  }

  .next-advance-card__example {
    grid-template-columns: auto auto 18px auto auto;
    justify-content: start;
    gap: 9px;
  }

  .next-advance-card__example > .icon {
    display: block;
  }

  .money-history-card {
    grid-template-columns: 76px 42px minmax(0, 1fr) auto auto;
    padding: 12px 14px;
  }

  .money-history-card > .badge {
    grid-column: auto;
  }
}

@media (min-width: 960px) {
  .money-tabs {
    margin-bottom: 22px;
  }

  .money-balance-card,
  .money-info-card,
  .regular-advance-card,
  .advance-month-strip,
  .next-advance-card,
  .money-history-hero,
  .payroll-admin-strip,
  .money-privacy-card {
    max-width: 920px;
  }

  .money-earning-list,
  .payroll-worker-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .advance-approval-list {
    max-width: 920px;
  }

  .money-history-list {
    max-width: 920px;
  }
}

/* Zakázky a ceník práce */

.order-tabs {
  margin-bottom: 14px;
}

.order-kicker {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 830;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.order-flow-card,
.order-progress-hero,
.work-review-alert,
.order-stage,
.work-section-card,
.rate-lock-card,
.order-rule-note,
.import-source-card,
.import-detected-card,
.import-item-card,
.import-ready-card,
.rate-principle-card,
.rate-empty-card,
.rate-suggestion-card,
.rate-rule-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.order-flow-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 17px;
  border-top: 4px solid var(--accent);
}

.order-flow-card__icon,
.import-source-card__icon,
.rate-principle-card__icon,
.rate-suggestion-card__icon {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.order-flow-card__icon {
  width: 54px;
  height: 54px;
}

.order-flow-card h2,
.rate-principle-card h2,
.rate-empty-card h2,
.import-source-card h2 {
  margin: 0;
  font-size: clamp(21px, 6vw, 29px);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.order-flow-card p:last-child,
.rate-principle-card p:last-child,
.rate-empty-card p:last-child,
.import-source-card__heading p:last-child {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.order-flow-card > .button {
  grid-column: 1 / -1;
}

.order-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
  box-shadow: var(--shadow-sm);
}

.order-stat-strip > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 11px 7px;
  background: var(--surface);
  text-align: center;
}

.order-stat-strip strong {
  font-size: 20px;
  letter-spacing: -.04em;
}

.order-stat-strip span {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 720;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.order-list-section {
  margin-top: 19px;
}

.order-card-list,
.order-stage-list,
.work-section-list,
.import-item-list,
.rate-suggestion-list,
.rate-rules-grid {
  display: grid;
  gap: 9px;
}

.order-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.order-card:hover {
  border-color: #acd5f4;
  box-shadow: 0 8px 28px rgb(14 36 56 / 8%);
}

.order-card__heading,
.order-progress__labels,
.order-stage__header,
.work-section-card__top,
.work-section-progress > span,
.rate-suggestion-card__scope,
.team-share-summary,
.import-item-card__top,
.import-item-card__decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-card__identity,
.import-item-card__identity {
  display: grid;
  min-width: 0;
}

.order-card__identity small,
.import-item-card__identity small,
.work-section-card__code {
  color: var(--accent-hover);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .05em;
}

.order-card__identity strong,
.import-item-card__identity strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: var(--ink-soft);
  font-size: 10px;
}

.order-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.order-progress {
  min-width: 0;
}

.order-progress__labels {
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 9px;
}

.order-progress__labels strong {
  color: var(--ink);
}

.order-progress__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ed;
}

.order-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.order-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.order-card__footer > span {
  display: grid;
  min-width: 0;
}

.order-card__footer strong,
.order-card__footer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card__footer strong {
  font-size: 10px;
}

.order-card__footer small {
  color: var(--ink-soft);
  font-size: 8px;
}

.order-card__next {
  display: none !important;
}

.order-card__footer > .icon {
  color: var(--accent);
}

.order-rule-note,
.rate-lock-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  padding: 13px 14px;
  border-color: #b8daf5;
  background: #edf7ff;
}

.order-rule-note > .icon,
.rate-lock-card > .icon {
  margin-top: 1px;
  color: var(--accent);
}

.order-rule-note strong,
.rate-lock-card strong {
  display: block;
  font-size: 11px;
}

.order-rule-note p,
.rate-lock-card p {
  margin: 2px 0 0;
  color: #4c657d;
  font-size: 10px;
  line-height: 1.5;
}

.order-detail-header {
  margin-bottom: 14px;
}

.order-progress-hero {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 0;
  background: linear-gradient(135deg, #056fbd, #078df3 58%, #39a9ff);
  color: #fff;
}

.order-progress-hero .order-kicker {
  color: rgb(255 255 255 / 70%);
}

.order-progress-hero h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -.045em;
}

.order-progress-hero__main > p:last-child {
  max-width: 540px;
  margin: 5px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: 10px;
}

.order-progress-hero__value {
  display: grid;
}

.order-progress-hero__value strong {
  font-size: 38px;
  letter-spacing: -.06em;
  line-height: 1;
}

.order-progress-hero__value span {
  color: rgb(255 255 255 / 70%);
  font-size: 9px;
}

.order-progress--light .order-progress__track {
  background: rgb(255 255 255 / 22%);
}

.order-progress--light .order-progress__track span {
  background: #fff;
}

.order-progress-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 -18px -18px;
  background: rgb(255 255 255 / 18%);
}

.order-progress-hero__facts > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 10px 8px;
  background: rgb(0 53 94 / 21%);
}

.order-progress-hero__facts small {
  color: rgb(255 255 255 / 66%);
  font-size: 7px;
  font-weight: 720;
  text-transform: uppercase;
}

.order-progress-hero__facts strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-review-alert {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  padding: 13px;
  border-color: #efd08e;
  border-left: 4px solid #d58a16;
  background: #fffaf0;
}

.work-review-alert__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: #fff0cf;
  color: #a76500;
}

.work-review-alert h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -.02em;
}

.work-review-alert p:last-child {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
}

.work-review-alert > .button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 50px;
}

.work-review-alert--approved {
  border-color: #b9dfcc;
  border-left-color: var(--success);
  background: var(--success-soft);
}

.work-review-alert--approved .work-review-alert__icon {
  background: #fff;
  color: var(--success);
}

.work-review-alert--returned {
  border-color: #f0c2c2;
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.work-review-alert--returned .work-review-alert__icon {
  background: #fff;
  color: var(--danger);
}

.order-work-section {
  margin-top: 23px;
}

.order-stage {
  overflow: hidden;
  padding: 14px;
  border-top: 4px solid var(--accent);
}

.order-stage__header h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.03em;
}

.order-stage__header p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
}

.order-stage__header > strong {
  font-size: 13px;
}

.order-stage > .order-progress {
  margin: 10px 0 13px;
}

.work-section-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  border-radius: 13px;
  box-shadow: none;
}

.work-section-card--one-off {
  border-left: 4px solid #d58a16;
}

.work-section-card--catalog {
  border-left: 4px solid var(--accent);
}

.work-section-card--hourly {
  border-left: 4px solid var(--success);
}

.work-section-card h4 {
  margin: 0;
  font-size: 13px;
  letter-spacing: -.015em;
}

.work-section-card > p {
  margin: -4px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.5;
}

.work-section-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.work-section-card__facts > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 8px 9px;
  background: var(--surface-subtle);
}

.work-section-card__facts small,
.work-section-progress small {
  color: var(--ink-soft);
  font-size: 7px;
  font-weight: 720;
  text-transform: uppercase;
}

.work-section-card__facts strong,
.work-section-progress strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-section-progress {
  padding: 9px;
  border-radius: 10px;
  background: var(--surface-subtle);
}

.work-section-progress--reported {
  border: 1px solid #efd08e;
  background: #fffaf0;
}

.work-section-progress > span {
  margin-bottom: 7px;
}

.work-section-card__actions {
  display: grid;
}

.work-section-card__actions .button {
  width: 100%;
  min-height: 48px;
}

.work-review-person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #efd08e;
  border-radius: 12px;
  background: #fffaf0;
}

.work-review-person > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.work-review-person strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-review-person small {
  color: var(--ink-soft);
  font-size: 9px;
}

.work-review-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--line);
}

.work-review-plan > div {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  background: var(--surface-subtle);
}

.work-review-plan small {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 720;
  text-transform: uppercase;
}

.work-review-plan strong {
  font-size: 12px;
}

.work-review-reward {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--accent-soft);
}

.work-review-reward > span,
.work-review-reward small {
  color: var(--ink-soft);
  font-size: 9px;
}

.work-review-reward strong {
  color: var(--accent-hover);
  font-size: 18px;
  letter-spacing: -.03em;
}

.work-review-rule {
  margin: 11px 0 0 !important;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
  font-size: 9px !important;
  line-height: 1.5 !important;
}

.work-review-actions .button {
  min-height: 52px;
}

.team-split-sheet__intro {
  margin: -4px 0 13px !important;
}

.team-share-list {
  display: grid;
  gap: 7px;
}

.team-share-row {
  display: grid;
  min-height: 74px;
  grid-template-columns: 42px minmax(0, 1fr) 65px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
}

.team-share-row__person {
  display: grid;
  min-width: 0;
}

.team-share-row__person strong {
  font-size: 11px;
}

.team-share-row__person small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-share-row__input {
  position: relative;
}

.team-share-row__input .input {
  height: 48px;
  padding-right: 23px;
  padding-left: 8px;
  text-align: right;
}

.team-share-row__input small {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--ink-soft);
  font-size: 9px;
  transform: translateY(-50%);
}

.team-share-row > strong {
  grid-column: 2 / -1;
  color: var(--accent-hover);
  font-size: 11px;
  text-align: right;
}

.team-share-summary {
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--surface-subtle);
  font-size: 11px;
}

.team-share-summary p {
  width: 100%;
  margin: 2px 0 0;
  color: var(--danger);
  font-size: 9px;
}

.team-share-summary p[hidden] {
  display: none;
}

.import-workspace {
  display: grid;
  gap: 14px;
  max-width: 980px;
}

.import-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.import-stepper > span {
  position: relative;
  display: grid;
  min-height: 52px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-soft);
}

.import-stepper strong {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #edf1f4;
  font-size: 10px;
}

.import-stepper small {
  overflow: hidden;
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-stepper > span.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.import-stepper > span.is-active strong,
.import-stepper > span.is-done strong {
  background: var(--accent);
  color: #fff;
}

.import-stepper > span.is-done {
  color: var(--success);
}

.import-source-card {
  padding: 16px;
  border-top: 4px solid var(--accent);
}

.import-source-card__heading {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 13px;
}

.import-source-card__icon {
  width: 50px;
  height: 50px;
}

.import-source-input {
  min-height: 210px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
  resize: vertical;
}

.import-source-card__actions {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.import-source-card__actions .button {
  min-height: 52px;
}

.import-result[hidden] {
  display: none;
}

.import-result {
  display: grid;
  gap: 13px;
}

.import-detected-card {
  overflow: hidden;
}

.import-detected-card__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--success-soft);
  color: var(--success);
}

.import-detected-card__status > span {
  display: grid;
}

.import-detected-card__status strong {
  font-size: 11px;
}

.import-detected-card__status small {
  font-size: 8px;
}

.import-order-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.import-order-facts > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 10px 8px;
  background: var(--surface);
}

.import-order-facts dt {
  color: var(--ink-soft);
  font-size: 7px;
  font-weight: 720;
  text-transform: uppercase;
}

.import-order-facts dd {
  overflow: hidden;
  margin: 0;
  font-size: 9px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-mapping-heading {
  margin: 4px 0 0;
}

.import-item-card {
  padding: 13px;
}

.import-item-card__numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.import-item-card__numbers > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 8px 9px;
  background: var(--surface-subtle);
}

.import-item-card__numbers small {
  color: var(--ink-soft);
  font-size: 7px;
  font-weight: 720;
  text-transform: uppercase;
}

.import-item-card__numbers strong {
  font-size: 10px;
}

.import-choice-grid {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.import-choice {
  display: grid;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
}

.import-choice > .icon {
  margin: auto;
}

.import-choice > span {
  display: grid;
}

.import-choice strong {
  color: var(--ink);
  font-size: 10px;
}

.import-choice small {
  font-size: 8px;
}

.import-choice.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.import-item-card__decision {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
}

.import-item-card__decision strong {
  color: var(--accent-hover);
}

.import-static-mapping {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--success);
  font-size: 9px;
  font-weight: 720;
}

.import-ready-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border-color: #b8daf5;
  background: #edf7ff;
}

.import-ready-card > .icon {
  color: var(--accent);
}

.import-ready-card strong {
  font-size: 11px;
}

.import-ready-card p {
  margin: 2px 0 0;
  color: #4c657d;
  font-size: 9px;
}

.import-ready-card > .button {
  grid-column: 1 / -1;
  min-height: 54px;
}

.rate-principle-card,
.rate-empty-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.rate-principle-card {
  border-top: 4px solid var(--accent);
}

.rate-principle-card__icon {
  width: 54px;
  height: 54px;
}

.rate-principle-card > .badge,
.rate-empty-card > .button {
  grid-column: 1 / -1;
  justify-self: start;
}

.rate-empty-card {
  margin-top: 11px;
}

.rate-empty-card__visual {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
}

.rate-empty-card__visual span {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  font-weight: 820;
}

.rate-suggestions-section {
  margin-top: 23px;
}

.rate-suggestion-card {
  overflow: hidden;
}

.rate-suggestion-card__heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
}

.rate-suggestion-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.rate-suggestion-card__heading > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.rate-suggestion-card__heading strong {
  font-size: 11px;
}

.rate-suggestion-card__heading small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rate-suggestion-card__scope {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--ink-soft);
  font-size: 9px;
}

.rate-suggestion-card__scope strong {
  color: var(--ink);
}

.rate-suggestion-card__form {
  padding: 11px 12px 0;
}

.rate-value-input {
  position: relative;
}

.rate-value-input .input {
  padding-right: 96px;
  font-weight: 760;
}

.rate-value-input > span {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 720;
  transform: translateY(-50%);
}

.category-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.category-add-button {
  min-width: 82px;
  min-height: 52px;
  padding: 0 11px;
}

.category-create-panel {
  grid-template-columns: minmax(0, 1fr) auto 44px;
  gap: 6px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #b8daf5;
  border-radius: 11px;
  background: var(--accent-soft);
}

.category-create-panel:not([hidden]) {
  display: grid;
}

.category-create-panel[hidden] {
  display: none;
}

.category-create-panel .input,
.category-create-panel .button,
.category-create-panel .icon-button {
  min-height: 48px;
}

.category-create-panel .button {
  padding: 0 11px;
}

.rate-suggestion-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px 12px;
}

.rate-suggestion-card__actions .button {
  min-width: 0;
  min-height: 48px;
  padding: 0 7px;
  font-size: 9px;
}

.rate-rules-grid {
  margin-top: 15px;
}

.rate-rule-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
}

.rate-rule-card > .icon {
  color: var(--accent);
}

.rate-rule-card strong {
  display: block;
  font-size: 10px;
}

.rate-rule-card p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.5;
}

.rate-form-notice {
  margin-top: 14px;
  margin-bottom: 0;
  border-color: #b8daf5;
  background: #edf7ff;
  color: #4c657d;
}

@media (min-width: 680px) {
  .order-flow-card {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    padding: 20px;
  }

  .order-flow-card__icon {
    width: 64px;
    height: 64px;
  }

  .order-flow-card > .button {
    grid-column: auto;
  }

  .order-card-list,
  .rate-suggestion-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-card__footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
  }

  .order-card__next {
    display: grid !important;
  }

  .order-progress-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 22px;
  }

  .order-progress-hero > .order-progress,
  .order-progress-hero__facts {
    grid-column: 1 / -1;
  }

  .order-progress-hero__value {
    justify-items: end;
  }

  .order-progress-hero__facts {
    margin: 0 -22px -22px;
  }

  .work-review-alert {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 14px 16px;
  }

  .work-review-alert > .button {
    grid-column: auto;
    width: auto;
    min-width: 160px;
  }

  .order-stage {
    padding: 17px;
  }

  .work-section-list,
  .rate-rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-share-row {
    grid-template-columns: 42px minmax(0, 1fr) 74px 92px;
  }

  .team-share-row > strong {
    grid-column: auto;
  }

  .import-source-card__actions {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .import-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .import-choice {
    min-height: 82px;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
  }

  .import-ready-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
  }

  .import-ready-card > .button {
    grid-column: auto;
  }

  .rate-principle-card,
  .rate-empty-card {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    padding: 20px;
  }

  .rate-principle-card__icon,
  .rate-empty-card__visual {
    width: 64px;
    height: 64px;
  }

  .rate-principle-card > .badge,
  .rate-empty-card > .button {
    grid-column: auto;
    justify-self: end;
  }
}

@media (min-width: 960px) {
  .order-tabs {
    margin-bottom: 22px;
  }

  .order-flow-card,
  .order-stat-strip,
  .order-rule-note,
  .order-progress-hero,
  .work-review-alert,
  .rate-lock-card,
  .rate-principle-card,
  .rate-empty-card {
    max-width: 980px;
  }

  .order-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-stage-list,
  .rate-suggestion-list,
  .rate-rules-grid {
    max-width: 980px;
  }

  .rate-rules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Auta */
.vehicle-active-card,
.vehicle-economy-card,
.vehicle-card,
.vehicle-service-alert,
.vehicle-hero,
.vehicle-current-trip,
.vehicle-trip-complete,
.vehicle-created-confirmation,
.vehicle-cost-confirmation,
.vehicle-combination-card,
.vehicle-combination-confirmation,
.vehicle-section,
.vehicle-economy-detail,
.vehicle-rule-card,
.vehicle-list-section,
.vehicle-cost-balance,
.vehicle-no-double-charge,
.vehicle-service-hero,
.vehicle-service-row,
.vehicle-service-rule {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.vehicle-active-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border-color: #b8daf5;
  border-top: 4px solid var(--accent);
  background: linear-gradient(145deg, #eef8ff 0%, #fff 75%);
}

.vehicle-active-card__icon,
.vehicle-economy-card__icon,
.vehicle-card__icon,
.vehicle-service-alert__icon,
.vehicle-hero__icon,
.vehicle-current-trip__icon,
.vehicle-rule-card__icon,
.vehicle-cost-balance__icon,
.vehicle-service-hero__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.vehicle-active-card h2,
.vehicle-service-alert h2,
.vehicle-rule-card h2,
.vehicle-service-hero h2 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.vehicle-active-card p,
.vehicle-service-alert p,
.vehicle-rule-card p,
.vehicle-service-hero p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.vehicle-active-card__cost {
  display: grid;
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgb(255 255 255 / 72%);
}

.vehicle-active-card__cost small,
.vehicle-economy-card__amounts small,
.vehicle-hero__facts small,
.vehicle-current-trip__numbers small,
.vehicle-economy-detail__numbers small,
.vehicle-cost-balance__numbers small {
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-active-card > .button {
  grid-column: 1 / -1;
}

.vehicle-combination-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 14px;
  border-color: #b8daf5;
}

.vehicle-combination-card__icons,
.vehicle-combination-summary__icons {
  display: flex;
  width: 68px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.vehicle-combination-card h2 {
  margin: 2px 0 4px;
  font-size: 15px;
}

.vehicle-combination-card p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-combination-card > .button {
  grid-column: 1 / -1;
  width: 100%;
}

.vehicle-combination-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px;
  border-color: #a9ddc3;
  background: var(--success-soft);
  color: var(--success);
}

.vehicle-combination-confirmation[hidden] {
  display: none !important;
}

.vehicle-combination-confirmation > span {
  display: grid;
}

.vehicle-combination-confirmation small {
  color: #47745e;
  font-size: 10px;
}

.vehicle-economy-card {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 17px;
}

.vehicle-economy-card__heading,
.vehicle-cost-balance__heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.vehicle-economy-card__heading > span:last-child,
.vehicle-cost-balance__heading > span:last-child {
  display: grid;
}

.vehicle-economy-card h2,
.vehicle-cost-balance h2 {
  margin: 2px 0 0;
  font-size: 17px;
}

.vehicle-economy-card__amounts,
.vehicle-economy-detail__numbers,
.vehicle-cost-balance__numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.vehicle-economy-card__amounts > span,
.vehicle-economy-detail__numbers > span,
.vehicle-cost-balance__numbers > span {
  display: grid;
  min-width: 0;
  padding: 11px;
  border-radius: 11px;
  background: var(--surface-subtle);
}

.vehicle-recovery-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8ef;
}

.vehicle-recovery-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #35b882);
}

.vehicle-economy-card > p,
.vehicle-economy-detail > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.vehicle-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.vehicle-stat-strip a {
  display: grid;
  min-height: 72px;
  place-content: center;
  padding: 10px 5px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.vehicle-stat-strip a + a {
  border-left: 1px solid var(--line);
}

.vehicle-stat-strip strong {
  font-size: 20px;
}

.vehicle-stat-strip span {
  color: var(--ink-soft);
  font-size: 9px;
}

.vehicle-stat-strip__warning strong {
  color: #a95b20;
}

.vehicle-section,
.vehicle-list-section {
  margin-top: 14px;
  padding: 14px;
}

.vehicle-card-grid,
.vehicle-trip-list,
.vehicle-cost-list,
.vehicle-service-list,
.vehicle-load-list {
  display: grid;
  gap: 9px;
}

.vehicle-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  color: var(--ink);
  text-decoration: none;
}

.vehicle-card__top,
.vehicle-card__heading,
.vehicle-card__current,
.vehicle-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vehicle-card__top,
.vehicle-card__footer {
  justify-content: space-between;
}

.vehicle-plate,
.vehicle-detail-header__plate {
  letter-spacing: .05em;
  white-space: nowrap;
}

.vehicle-card__heading > span:last-child,
.vehicle-card__current > span {
  display: grid;
  min-width: 0;
}

.vehicle-card__heading strong {
  font-size: 14px;
}

.vehicle-card__heading small,
.vehicle-card__current small,
.vehicle-card__facts small {
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-card__current {
  min-height: 55px;
  padding: 10px;
  border-radius: 11px;
  background: var(--surface-subtle);
  color: var(--accent-hover);
}

.vehicle-card__current strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vehicle-card__facts > span {
  display: grid;
}

.vehicle-card__footer {
  min-height: 31px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-card__footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vehicle-start-confirmation,
.vehicle-trip-complete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px;
  border-color: #a9ddc3;
  background: var(--success-soft);
  color: var(--success);
}

.vehicle-start-confirmation > span,
.vehicle-trip-complete > span {
  display: grid;
}

.vehicle-start-confirmation small,
.vehicle-trip-complete small {
  color: #47745e;
  font-size: 11px;
}

.vehicle-service-alert {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  margin-top: 14px;
  padding: 14px;
  border-color: #f2d1a4;
  background: #fff9f1;
}

.vehicle-service-alert__icon {
  background: #fff0dc;
  color: #a95b20;
}

.vehicle-service-alert > .button {
  grid-column: 1 / -1;
}

.vehicle-detail-header {
  margin-top: 0;
}

.vehicle-hero {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.vehicle-hero__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.vehicle-hero__identity h2 {
  margin: 2px 0 4px;
  font-size: 19px;
}

.vehicle-hero__identity p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.vehicle-hero__facts,
.vehicle-current-trip__numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vehicle-hero__facts > span,
.vehicle-current-trip__numbers > span {
  display: grid;
  padding: 10px;
  border-radius: 11px;
  background: var(--surface-subtle);
}

.vehicle-current-trip {
  display: grid;
  gap: 12px;
  margin-top: 13px;
  padding: 15px;
  border-color: #b8daf5;
}

.vehicle-current-trip__heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.vehicle-current-trip__heading > span:last-child {
  min-width: 0;
}

.vehicle-current-trip h2 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.vehicle-current-trip p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-current-trip > .button {
  width: 100%;
}

.vehicle-load-row {
  display: grid;
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

.vehicle-load-row__code {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 800;
}

.vehicle-load-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.vehicle-load-row small,
.vehicle-trip-row__main small,
.vehicle-trip-row__main span,
.vehicle-trip-row__numbers small,
.vehicle-cost-row__main small,
.vehicle-cost-row__main span,
.vehicle-cost-row__amount small,
.vehicle-service-row__main small,
.vehicle-service-row__main span {
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-empty-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
}

.vehicle-empty-inline > span {
  display: grid;
}

.vehicle-empty-inline strong {
  color: var(--ink);
  font-size: 12px;
}

.vehicle-empty-inline small {
  font-size: 10px;
}

.vehicle-economy-detail {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.vehicle-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.vehicle-detail-actions .button {
  min-width: 0;
  padding: 0 8px;
  font-size: 11px;
}

.vehicle-rule-card,
.vehicle-service-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
}

.vehicle-rule-card > .badge,
.vehicle-service-hero > .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.vehicle-list-section .search-field {
  margin-bottom: 10px;
}

.vehicle-trip-row,
.vehicle-cost-row {
  display: grid;
  min-height: 82px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.vehicle-trip-row__icon,
.vehicle-cost-row__icon,
.vehicle-service-row__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.vehicle-trip-row__main,
.vehicle-cost-row__main,
.vehicle-service-row__main,
.vehicle-trip-row__numbers,
.vehicle-cost-row__amount,
.vehicle-service-row__due {
  display: grid;
  min-width: 0;
}

.vehicle-trip-row__main strong,
.vehicle-cost-row__main strong,
.vehicle-service-row__main strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-trip-row__numbers,
.vehicle-cost-row__amount,
.vehicle-service-row__due {
  justify-items: end;
  text-align: right;
}

.vehicle-trip-row > .badge,
.vehicle-trip-row > .icon,
.vehicle-cost-row > .badge {
  display: none;
}

.vehicle-cost-balance {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-top: 4px solid var(--accent);
}

.vehicle-cost-balance__numbers {
  grid-template-columns: 1fr;
}

.vehicle-no-double-charge,
.vehicle-service-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border-color: #b8daf5;
  background: #edf7ff;
  color: var(--accent-hover);
}

.vehicle-no-double-charge strong,
.vehicle-service-rule strong {
  color: var(--ink);
  font-size: 12px;
}

.vehicle-no-double-charge p,
.vehicle-service-rule p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.vehicle-service-hero {
  border-color: #f2d1a4;
  border-top: 4px solid #d88a32;
  background: #fff9f1;
}

.vehicle-service-hero__icon {
  background: #fff0dc;
  color: #a95b20;
}

.vehicle-service-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 78px;
  padding: 11px;
  box-shadow: none;
}

.vehicle-service-row--warning {
  border-color: #f2d1a4;
  background: #fff9f1;
}

.vehicle-service-row--warning .vehicle-service-row__icon {
  background: #fff0dc;
  color: #a95b20;
}

.vehicle-service-row > .button,
.vehicle-service-row > .icon {
  grid-column: 1 / -1;
  width: 100%;
}

.vehicle-rate-summary,
.vehicle-trip-calculation,
.vehicle-fuel-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 13px;
  background: var(--accent-soft);
}

.vehicle-combination-inline {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #b8daf5;
  border-radius: 12px;
  background: #edf7ff;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 740;
}

.vehicle-combination-summary {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 13px;
  background: var(--accent-soft);
}

.vehicle-combination-summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.vehicle-combination-summary small,
.vehicle-combination-summary p {
  color: #54748e;
  font-size: 10px;
}

.vehicle-combination-summary strong {
  font-size: 12px;
}

.vehicle-combination-summary p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  line-height: 1.5;
}

.vehicle-rate-summary > span,
.vehicle-trip-calculation > span {
  display: grid;
}

.vehicle-rate-summary small,
.vehicle-trip-calculation small,
.vehicle-fuel-summary small {
  color: #54748e;
  font-size: 10px;
}

.vehicle-rate-summary p,
.vehicle-fuel-summary p,
.vehicle-trip-calculation > .field__error {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #416985;
  font-size: 10px;
}

.vehicle-usage-picker {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-subtle);
}

.vehicle-usage-picker__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent-hover);
}

.vehicle-usage-picker__heading h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.vehicle-usage-picker__heading small,
.vehicle-usage-picker > p {
  color: var(--ink-soft);
  font-size: 10px;
}

.vehicle-usage-picker > p {
  margin: 7px 0 0;
}

.vehicle-trip-calculation__total {
  display: flex;
  grid-column: 1 / -1;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid #c9dfee;
}

.vehicle-trip-calculation__total strong {
  font-size: 19px;
}

.vehicle-fuel-summary {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

.vehicle-fuel-summary > .icon {
  color: var(--accent-hover);
}

.vehicle-fuel-summary > span {
  display: grid;
}

.input-suffix {
  position: relative;
}

.input-suffix .input {
  padding-right: 48px;
}

.input-suffix > span {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--ink-soft);
  font-size: 11px;
  transform: translateY(-50%);
  pointer-events: none;
}

.vehicle-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.vehicle-section-actions .button {
  min-height: 36px;
  padding: 0 11px;
  font-size: 11px;
}

.vehicle-type-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.vehicle-type-guide > span {
  display: flex;
  min-height: 47px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--surface-subtle);
  color: var(--accent-hover);
}

.vehicle-type-guide strong {
  color: var(--ink);
  font-size: 11px;
}

.vehicle-created-confirmation,
.vehicle-cost-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px;
  border-color: #a9ddc3;
  background: var(--success-soft);
  color: var(--success);
}

.vehicle-created-confirmation > span,
.vehicle-cost-confirmation > span {
  display: grid;
}

.vehicle-created-confirmation small,
.vehicle-cost-confirmation small {
  color: #47745e;
  font-size: 11px;
}

.vehicle-cost-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 11px;
}

.vehicle-cost-actions .button {
  width: 100%;
}

.vehicle-form-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 13px;
  background: var(--accent-soft);
}

.vehicle-form-summary__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #d9eeff;
  color: var(--accent-hover);
}

.vehicle-form-summary > span:nth-child(2) {
  display: grid;
}

.vehicle-form-summary small {
  color: #54748e;
  font-size: 10px;
}

.vehicle-form-summary strong {
  font-size: 13px;
}

.vehicle-form-summary p {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  color: #416985;
  font-size: 10px;
  line-height: 1.5;
}

.vehicle-form-summary--success {
  background: var(--success-soft);
}

.vehicle-form-summary--success .vehicle-form-summary__icon {
  background: #cdebdc;
  color: var(--success);
}

.vehicle-form-summary--success small,
.vehicle-form-summary--success p {
  color: #47745e;
}

.vehicle-service-row__cost {
  margin: 2px 0 4px;
  color: var(--ink) !important;
  font-weight: 750;
}

@media (min-width: 680px) {
  .vehicle-active-card {
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .vehicle-active-card__cost,
  .vehicle-active-card > .button {
    grid-column: auto;
  }

  .vehicle-combination-card {
    grid-template-columns: 68px minmax(0, 1fr) auto;
  }

  .vehicle-combination-card > .button {
    grid-column: auto;
    width: auto;
  }

  .vehicle-active-card > .button {
    width: auto;
  }

  .vehicle-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vehicle-type-guide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vehicle-cost-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vehicle-service-alert,
  .vehicle-rule-card,
  .vehicle-service-hero {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
  }

  .vehicle-service-alert > .button,
  .vehicle-rule-card > .badge,
  .vehicle-service-hero > .badge {
    grid-column: auto;
  }

  .vehicle-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vehicle-current-trip {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .vehicle-current-trip__numbers {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
  }

  .vehicle-trip-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto 17px;
  }

  .vehicle-cost-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
  }

  .vehicle-trip-row > .badge,
  .vehicle-trip-row > .icon,
  .vehicle-cost-row > .badge {
    display: inline-flex;
  }

  .vehicle-cost-balance__numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vehicle-service-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
  }

  .vehicle-service-row > .button,
  .vehicle-service-row > .icon {
    grid-column: auto;
    width: auto;
  }
}

@media (min-width: 960px) {
  .vehicle-tabs,
  .vehicle-active-card,
  .vehicle-combination-card,
  .vehicle-combination-confirmation,
  .vehicle-economy-card,
  .vehicle-stat-strip,
  .vehicle-section,
  .vehicle-service-alert,
  .vehicle-hero,
  .vehicle-current-trip,
  .vehicle-trip-complete,
  .vehicle-economy-detail,
  .vehicle-detail-actions,
  .vehicle-rule-card,
  .vehicle-list-section,
  .vehicle-cost-balance,
  .vehicle-no-double-charge,
  .vehicle-service-hero,
  .vehicle-service-rule {
    max-width: 980px;
  }

  .vehicle-cost-actions,
  .vehicle-cost-confirmation {
    max-width: 980px;
  }
}