/*
 * ZiMeek Links UI foundation.
 *
 * Every feature uses these primitives. Feature stylesheets should only define
 * layout and behavior that is unique to that feature.
 */

:where(.zmk-ui, .zmk-ui-modal, .zmk-modal, .zmk-ui-tooltip) {
  --zmk-ui-primary: #465fff;
  --zmk-ui-primary-dark: #3549dc;
  --zmk-ui-primary-soft: #eef1ff;
  --zmk-ui-success: #12b76a;
  --zmk-ui-success-dark: #067647;
  --zmk-ui-success-soft: #ecfdf3;
  --zmk-ui-info: #0ba5ec;
  --zmk-ui-info-soft: #eff8ff;
  --zmk-ui-warning: #f79009;
  --zmk-ui-warning-dark: #b54708;
  --zmk-ui-warning-soft: #fffaeb;
  --zmk-ui-error: #f04438;
  --zmk-ui-error-dark: #b42318;
  --zmk-ui-error-soft: #fef3f2;
  --zmk-ui-ink: #101828;
  --zmk-ui-text: #344054;
  --zmk-ui-muted: #667085;
  --zmk-ui-border: #e4e7ec;
  --zmk-ui-border-strong: #d0d5dd;
  --zmk-ui-surface: #fff;
  --zmk-ui-surface-subtle: #f9fafb;
  --zmk-ui-background: #f7f8fa;
  --zmk-ui-radius-sm: 8px;
  --zmk-ui-radius-md: 12px;
  --zmk-ui-radius-lg: 16px;
  --zmk-ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --zmk-ui-shadow: 0 10px 30px rgba(16, 24, 40, .06);
  --zmk-ui-shadow-lg: 0 24px 64px rgba(16, 24, 40, .18);
  color: var(--zmk-ui-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:where(.zmk-ui, .zmk-ui-modal, .zmk-modal) *,
:where(.zmk-ui, .zmk-ui-modal, .zmk-modal) *::before,
:where(.zmk-ui, .zmk-ui-modal, .zmk-modal) *::after {
  box-sizing: border-box;
}

:where(
  .zmk-ui-panel,
  .zmk-settings-panel,
  .zmk-table-panel,
  .zmk-chart-panel,
  .zmk-security-note,
  .zmk-reset-analytics
),
:where(
  .zmk-ui-card,
  .zmk-card,
  .zmk-link-card,
  .zmk-ip-card,
  .zmk-post-link-tool-row
) {
  background: var(--zmk-ui-surface, #fff);
  border: 1px solid var(--zmk-ui-border, #e4e7ec);
  box-shadow: var(--zmk-ui-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
  color: var(--zmk-ui-text, #344054);
}

:where(
  .zmk-ui-panel,
  .zmk-settings-panel,
  .zmk-table-panel,
  .zmk-chart-panel,
  .zmk-security-note,
  .zmk-reset-analytics
) {
  border-radius: var(--zmk-ui-radius-lg, 16px);
}

:where(
  .zmk-ui-card,
  .zmk-card,
  .zmk-link-card,
  .zmk-ip-card,
  .zmk-post-link-tool-row
) {
  border-radius: var(--zmk-ui-radius-md, 12px);
}

:where(.zmk-ui-header, .zmk-page-header, .zmk-section-header, .zmk-modal-header),
:where(.zmk-ui-actions, .zmk-page-actions, .zmk-settings-actions, .zmk-modal-footer) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

:where(.zmk-ui-header, .zmk-page-header, .zmk-section-header, .zmk-modal-header) :where(h1, h2, h3, p),
:where(.zmk-ui-actions, .zmk-page-actions, .zmk-settings-actions, .zmk-modal-footer) :where(p, label) {
  margin-block: 0;
}

:where(.zmk-ui-grid, .zmk-cards, .zmk-modal-field-grid, .zmk-settings-number-grid),
:where(.zmk-ui-list, .zmk-links-list, .zmk-link-builder-card-list, .zmk-ip-list) {
  display: grid;
  gap: 12px;
}

:where(.zmk-ui-badge, .zmk-status, .zmk-link-type-badge, .zmk-post-link-tool-kind) {
  align-items: center;
  background: var(--zmk-ui-primary-soft, #eef1ff);
  border-radius: 999px;
  color: var(--zmk-ui-primary-dark, #3549dc);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 24px;
  padding: 3px 9px;
  white-space: nowrap;
}

.zmk-ui-badge.is-success {
  background: var(--zmk-ui-success-soft, #ecfdf3);
  color: var(--zmk-ui-success-dark, #067647);
}

.zmk-ui-badge.is-warning {
  background: var(--zmk-ui-warning-soft, #fffaeb);
  color: var(--zmk-ui-warning-dark, #b54708);
}

.zmk-ui-badge.is-error {
  background: var(--zmk-ui-error-soft, #fef3f2);
  color: var(--zmk-ui-error-dark, #b42318);
}

.zmk-ui-message {
  background: var(--zmk-ui-surface-subtle, #f9fafb);
  border: 1px solid var(--zmk-ui-border, #e4e7ec);
  border-radius: var(--zmk-ui-radius-sm, 8px);
  color: var(--zmk-ui-muted, #667085);
  line-height: 1.5;
  padding: 10px 12px;
}

.zmk-ui-message:empty {
  border: 0;
  min-height: 0;
  padding: 0;
}

.zmk-ui-message.is-success,
.zmk-ui-message.is-ready {
  background: var(--zmk-ui-success-soft, #ecfdf3);
  border-color: #abefc6;
  color: var(--zmk-ui-success-dark, #067647);
}

.zmk-ui-message.is-warning,
.zmk-ui-message.is-notice {
  background: var(--zmk-ui-warning-soft, #fffaeb);
  border-color: #fedf89;
  color: var(--zmk-ui-warning-dark, #b54708);
}

.zmk-ui-message.is-error {
  background: var(--zmk-ui-error-soft, #fef3f2);
  border-color: #fecdca;
  color: var(--zmk-ui-error-dark, #b42318);
}

.zmk-ui-message.is-loading::before,
.zmk-ui-spinner::before {
  animation: zmk-ui-spin .72s linear infinite;
  border: 2px solid var(--zmk-ui-border-strong, #d0d5dd);
  border-radius: 50%;
  border-top-color: var(--zmk-ui-primary, #465fff);
  content: "";
  display: inline-block;
  height: 12px;
  margin-right: 7px;
  vertical-align: -2px;
  width: 12px;
}

.zmk-ui-button {
  align-items: center;
  appearance: none;
  background: var(--zmk-ui-surface, #fff);
  border: 1px solid var(--zmk-ui-border-strong, #d0d5dd);
  border-radius: var(--zmk-ui-radius-sm, 8px);
  box-shadow: var(--zmk-ui-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
  color: var(--zmk-ui-text, #344054);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.zmk-ui-button:hover,
.zmk-ui-button:focus-visible {
  background: var(--zmk-ui-surface-subtle, #f9fafb);
  border-color: #98a2b3;
  color: var(--zmk-ui-ink, #101828);
  outline: 0;
}

.zmk-ui-button.is-primary {
  background: var(--zmk-ui-primary, #465fff);
  border-color: var(--zmk-ui-primary, #465fff);
  color: #fff;
}

.zmk-ui-button.is-primary:hover,
.zmk-ui-button.is-primary:focus-visible {
  background: var(--zmk-ui-primary-dark, #3549dc);
  border-color: var(--zmk-ui-primary-dark, #3549dc);
}

.zmk-ui-button.is-danger {
  background: var(--zmk-ui-error, #f04438);
  border-color: var(--zmk-ui-error, #f04438);
  color: #fff;
}

.zmk-ui-button.is-danger:hover,
.zmk-ui-button.is-danger:focus-visible {
  background: var(--zmk-ui-error-dark, #b42318);
  border-color: var(--zmk-ui-error-dark, #b42318);
}

:where(.zmk-ui-modal, .zmk-modal)[aria-hidden="true"] {
  display: none !important;
}

:where(.zmk-ui-modal, .zmk-modal) {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100000;
}

:where(.zmk-ui-modal__backdrop, .zmk-modal-backdrop) {
  background: rgba(15, 23, 42, .42);
  inset: 0;
  position: absolute;
}

:where(.zmk-ui-modal__dialog, .zmk-modal-dialog) {
  background: var(--zmk-ui-surface, #fff);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  box-shadow: var(--zmk-ui-shadow-lg, 0 24px 64px rgba(16, 24, 40, .18));
  color: var(--zmk-ui-text, #344054);
  max-height: calc(100vh - 48px);
  max-width: 960px;
  overflow: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

:where(.zmk-ui-modal__header, .zmk-modal-header),
:where(.zmk-ui-modal__body, .zmk-modal-body),
:where(.zmk-ui-modal__footer, .zmk-modal-footer) {
  padding: 20px 24px;
}

:where(.zmk-ui-modal__header, .zmk-modal-header) {
  border-bottom: 1px solid var(--zmk-ui-border, #e4e7ec);
}

:where(.zmk-ui-modal__footer, .zmk-modal-footer) {
  border-top: 1px solid var(--zmk-ui-border, #e4e7ec);
}

:where(.zmk-ui-modal__close, .zmk-modal-close) {
  align-items: center;
  appearance: none;
  background: var(--zmk-ui-surface-subtle, #f9fafb);
  border: 0;
  border-radius: 50%;
  color: var(--zmk-ui-muted, #667085);
  cursor: pointer;
  display: flex;
  font-size: 24px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 40px;
}

:where(.zmk-ui-modal__close, .zmk-modal-close):hover,
:where(.zmk-ui-modal__close, .zmk-modal-close):focus-visible {
  background: var(--zmk-ui-border, #e4e7ec);
  color: var(--zmk-ui-ink, #101828);
  outline: 0;
}

.zmk-ui-tooltip {
  background: var(--zmk-ui-ink, #101828);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.zmk-ui-tooltip.is-success {
  background: var(--zmk-ui-success-dark, #067647);
}

.zmk-ui-tooltip.is-error {
  background: #d92d20;
}

@keyframes zmk-ui-spin {
  to { transform: rotate(360deg); }
}

@media screen and (max-width: 782px) {
  .zmk-ui-header,
  .zmk-ui-actions.is-responsive {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.zmk-ui-modal, .zmk-modal) {
    padding: 12px;
  }

  :where(.zmk-ui-modal__dialog, .zmk-modal-dialog) {
    max-height: calc(100dvh - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zmk-ui-button,
  :where(.zmk-ui-modal__dialog, .zmk-modal-dialog) {
    scroll-behavior: auto;
    transition-duration: .01ms;
  }
}