:root {
  --ui-control-height: 40px;
  --ui-icon-control-size: 32px;
}

ui-button {
  --ui-button-scale: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-height);
  padding: 0 calc(.85rem * var(--ui-button-scale));
  border: 1px solid var(--planer-line, #c8ced8);
  border-radius: calc(999px * var(--ui-button-scale));
  font: inherit;
  font-size: calc(1em * var(--ui-button-scale));
  line-height: 1.1;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
ui-button:hover { filter: brightness(1.08); }
ui-button:active { transform: translateY(1px); }
ui-button[variant="primary"] { color: #fff; background: var(--planer-primary, #2364aa); border-color: var(--planer-primary, #2364aa); }
ui-button[variant="secondary"] { color: var(--planer-text, #1e293b); background: var(--planer-surface, #fff); }
ui-button[variant="danger"] { color: #fff; background: #b43a43; border-color: #b43a43; }
ui-button[variant="quiet"] { color: var(--planer-text, #1e293b); background: transparent; border-color: transparent; }
ui-button[variant="outline"] { color: var(--planer-primary, #2364aa); background: transparent; border-color: var(--planer-primary, #2364aa); }
ui-button[variant="flat"] { color: #fff; background: var(--planer-primary, #2364aa); border-radius: .7rem; }
ui-button[variant="gradient"] { color: #fff; background: linear-gradient(145deg, var(--planer-primary, #2364aa), #163b76); }
ui-button[variant="shadow"] { color: var(--planer-text, #1e293b); background: var(--planer-surface, #fff); box-shadow: 0 .35rem 0 var(--planer-line, #c8ced8); }
ui-button[variant="oval"] { color: #fff; background: var(--planer-danger, #b43a43); }
ui-button[variant="dark-3d"] { color: #fff; background: #061129; box-shadow: 0 .35rem 0 #020817; }
ui-button[variant="yellow"] { color: #172033; background: #facc15; }
ui-button[variant="mint"] { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
ui-button[disabled], ui-button[aria-disabled="true"] { opacity: .55; pointer-events: none; cursor: not-allowed; }
.section-module-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: transparent; padding: 10px; border-radius: 12px; }
[data-admin-module-links]:not(.section-module-ready) { visibility: hidden; }
.section-module-actions ui-button { min-width: max-content; }
.section-module-actions ui-button { color: #1e293b; background: #fff; border-color: #c8d4e2; }
.section-module-actions ui-button:hover:not([disabled]) { color: #174b83; background: #edf5ff; border-color: #8eb9e8; }
.section-module-actions ui-button.operation-active { color: #fff; background: #2364aa; border-color: #2364aa; box-shadow: 0 0 0 2px color-mix(in srgb, #2364aa 28%, transparent); }
.section-module-actions ui-button.operation-active:hover:not([disabled]) { color: #fff; background: #2364aa; border-color: #2364aa; }
.archive-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.archive-delete-reason { display: block; max-width: 68ch; margin-top: .35rem; color: var(--planer-danger, #b4232f); line-height: 1.4; }
.plan-exercise-invalid { border-color: #c93643 !important; box-shadow: 0 0 0 2px rgba(201,54,67,.14) !important; }
.plan-exercise-warning-icon { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 8px; border-radius: 50%; background: #c93643; color: #fff; font-size: .78rem; font-weight: 900; line-height: 1; vertical-align: middle; }
.plan-exercise-warning-text { display: block; margin: 7px 0 2px; padding: 7px 9px; border-left: 3px solid #c93643; border-radius: 4px; background: rgba(201,54,67,.09); color: #a51f2c; font-weight: 700; line-height: 1.4; }
:root[data-theme="dark"] .plan-exercise-warning-text { background: rgba(240,82,94,.13); color: #ff9ca5; }
@media (max-width: 560px) { .section-module-actions { display: grid; grid-template-columns: 1fr; } .section-module-actions ui-button { width: 100%; } }
.ui-button-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ui-button-link { --ui-button-scale: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--ui-control-height); padding: 0 calc(1.15rem * var(--ui-button-scale)); border: 1px solid transparent; border-radius: 999px; font-size: calc(.9rem * var(--ui-button-scale)); line-height: 1.15; font-weight: 700; text-decoration: none; box-shadow: 0 5px 14px rgba(25,45,66,.14); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.ui-button-link-primary { color: #fff; background: linear-gradient(135deg,var(--planer-coral,#d45a64),var(--planer-coral-deep,#ac3540)); }
.ui-button-link-secondary { color: #fff; background: linear-gradient(135deg,var(--planer-blue,#4a6fa5),var(--planer-blue-deep,#244d7d)); }
.ui-button-link-danger { color: #fff; background: linear-gradient(135deg,#d45a64,#ac3540); }
.ui-button-link:hover { color: #fff; background: var(--planer-blue,#2364aa); border-color: var(--planer-blue,#2364aa); transform: translateY(-1px); }
ui-icon-button {
  --ui-button-scale: 1;
  display: inline-grid;
  place-items: center;
  width: var(--ui-icon-control-size);
  height: var(--ui-icon-control-size);
  border: 1px solid var(--planer-line, #c8ced8);
  border-radius: 50%;
  color: var(--planer-text, #1e293b);
  background: var(--planer-surface, #fff);
  cursor: pointer;
  font-size: calc(1.15rem * var(--ui-button-scale));
}
ui-icon-button::before { content: '⋯'; }
ui-icon-button.ui-icon-button-close::before { content: '×'; }
ui-icon-button.ui-icon-button-edit::before { content: '✎'; }
ui-icon-button.ui-icon-button-delete::before { content: '×'; }
ui-icon-button.ui-icon-button-media::before { content: '▣'; }
ui-icon-button.ui-icon-button-up::before { content: '▲'; }
ui-icon-button.ui-icon-button-down::before { content: '▼'; }
ui-icon-button.ui-icon-button-left::before { content: '‹'; }
ui-icon-button.ui-icon-button-right::before { content: '›'; }
ui-icon-button.ui-icon-button-play::before { content: '▶'; }
ui-icon-button.ui-icon-button-pause::before { content: 'Ⅱ'; }
ui-icon-button.ui-icon-button-star::before { content: '★'; }
ui-icon-button.ui-icon-button-add::before { content: '+'; }
ui-icon-button.ui-icon-button-add::before { content: '+'; }
ui-icon-button.ui-icon-button-delete { color: #b43a43; border-color: #b43a43; }
ui-icon-button.ui-icon-button-close { color: #fff; border-color: #b43a43; background: #b43a43; }
ui-icon-button.ui-icon-button-close:hover:not([disabled]) { color: #fff; border-color: #d0525c; background: #d0525c; }
ui-icon-button.ui-icon-button-close::before { display: block; line-height: 1; transform: translateY(-1px); }
ui-icon-button[disabled] { opacity: .25; pointer-events: none; cursor: not-allowed; }
ui-icon-button.ui-icon-button-legacy { outline: 3px solid #ef4444; outline-offset: 2px; }
main .exercise-library-actions { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; }
main .exercise-library-actions ui-icon-button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; border-color: var(--planer-line, #c8ced8); background: transparent; color: var(--planer-text, #1e293b); font-size: 12px; }
main .exercise-library-actions ui-icon-button:hover:not([disabled]) { background: transparent; border-color: var(--planer-blue, #2364aa); color: var(--planer-blue, #2364aa); }
main .exercise-library-actions ui-icon-button.ui-icon-button-delete { color: #c0392b; border-color: #c0392b; background: transparent; }
main .exercise-library-actions ui-icon-button.ui-icon-button-edit { color: #178347; border-color: #178347; background: transparent; }
main .exercise-library-actions ui-icon-button.ui-icon-button-media { color: #2364aa; border-color: #2364aa; background: transparent; }
main .exercise-library-actions ui-icon-button.ui-icon-button-delete:hover:not([disabled]) { color: #a52e24; border-color: #a52e24; background: #fbe7e7; }
main .exercise-library-actions ui-icon-button.ui-icon-button-edit:hover:not([disabled]) { color: #126336; border-color: #126336; background: #e7f5ec; }
main .exercise-library-actions ui-icon-button.ui-icon-button-media:hover:not([disabled]) { color: #174b83; border-color: #174b83; background: #e8f1fb; }
main .queued-media-actions ui-icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border-color: var(--planer-line, #c8ced8); background: color-mix(in srgb, var(--planer-surface, #fff) 88%, var(--planer-blue, #2364aa) 12%); color: var(--planer-text, #1e293b); font-size: 1.3rem; }
main .queued-media-actions ui-icon-button:hover:not([disabled]) { background: var(--planer-blue, #2364aa); border-color: var(--planer-blue, #2364aa); color: #fff; }
main .queued-media-actions ui-icon-button.ui-icon-button-left::before { content: '←'; }
main .queued-media-actions ui-icon-button.ui-icon-button-right::before { content: '→'; }
main .queued-media-actions ui-icon-button::before { display: block; line-height: 1; transform: translateY(-1px); }
main .queued-media-actions ui-icon-button.ui-icon-button-delete { margin-left: auto; color: #fff; border-color: #b43a43; background: #b43a43; }
main .queued-media-actions ui-icon-button.ui-icon-button-delete { background: transparent; color: #b43a43; border-color: #b43a43; }
main .queued-media-actions ui-icon-button.ui-icon-button-delete:hover:not([disabled]) { background: #b43a43; color: #fff; border-color: #b43a43; }
main .queued-media-actions ui-icon-button.ui-icon-button-left:not([disabled]), main .queued-media-actions ui-icon-button.ui-icon-button-right:not([disabled]) { border-color: #2364aa; }
.ui-modal { border: 1px solid var(--planer-line, #c8ced8); border-radius: 1rem; background: var(--planer-surface, #fff); color: var(--planer-text, #1e293b); }

/* Kontrakt wymiarów ButtonFactory. Skala zmienia typografię i szerokość,
   ale nigdy wysokość elementu. Dzięki temu przyciski generowane w różnych
   modułach układają się w jednej linii. */
html body ui-button[data-button-factory="1"][data-ui-button-kind="text"],
html body .ui-button-link[data-button-factory="1"][data-ui-button-kind="text"] {
  box-sizing: border-box !important;
  block-size: var(--ui-control-height) !important;
  min-block-size: var(--ui-control-height) !important;
  max-block-size: var(--ui-control-height) !important;
  padding-block: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

html body ui-icon-button[data-button-factory="1"][data-ui-button-kind="icon"][action]:not(.ui-button-size-exempt) {
  box-sizing: border-box !important;
  inline-size: var(--ui-icon-control-size) !important;
  min-inline-size: var(--ui-icon-control-size) !important;
  max-inline-size: var(--ui-icon-control-size) !important;
  block-size: var(--ui-icon-control-size) !important;
  min-block-size: var(--ui-icon-control-size) !important;
  max-block-size: var(--ui-icon-control-size) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 720px), (pointer: coarse) {
  :root {
    --ui-control-height: 44px;
    --ui-icon-control-size: 38px;
  }
}