/* ==========================================================================
   MetuSoft Admin — Design System V2
   Tokens: assets/css/tokens.css (shared with the public site). Prefix: "ad-".
   Standalone: V2 screens load no Bootstrap/theme CSS. Documentation: docs/design/DESIGN_SYSTEM.md §V2-Admin.
   ========================================================================== */

/* ---------- 1. Base ------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ms-admin-topbar-h) + 16px);
}

/* the sticky save bar (.ad-formbar) must not hide a focused / scrolled-to field (WCAG 2.4.11) */
html:has(.ad-formbar) {
  scroll-padding-bottom: 88px;
}

body.ad-body {
  margin: 0;
  min-height: 100vh;
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ad-body :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
}

.ad-body :where(p, ul, ol, dl, dd, figure) {
  margin: 0;
}

.ad-body :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.ad-body a {
  color: var(--ms-color-primary-text);
  text-decoration: none;
}

.ad-body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ad-body :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.ad-body svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.ad-body :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ms-ring-focus);
}

[hidden] {
  display: none !important;
}

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

.ad-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: var(--ms-z-toast);
  padding: 10px 16px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-text);
  color: #fff !important;
  font-weight: var(--ms-font-weight-semibold);
}

.ad-skip:focus {
  top: 12px;
}

.ad-num {
  font-variant-numeric: tabular-nums;
}

.ad-muted {
  color: var(--ms-color-text-secondary);
}

.ad-mono {
  font-family: var(--ms-font-mono);
  font-size: 0.92em;
}

@media (prefers-reduced-motion: reduce) {
  .ad-body *,
  .ad-body *::before,
  .ad-body *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- 2. Shell: sidebar + topbar + main ---------------------------- */
.ad-shell {
  min-height: 100vh;
}

.ad-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--ms-z-drawer);
  display: flex;
  flex-direction: column;
  width: var(--ms-admin-sidebar-w);
  background: var(--ms-color-surface);
  border-right: 1px solid var(--ms-color-border);
}

.ad-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  height: var(--ms-admin-topbar-h);
  padding: 0 var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  color: var(--ms-color-text) !important;
  text-decoration: none !important;
}

.ad-sidebar__brand img {
  height: 28px;
  width: auto;
}

.ad-sidebar__brand span {
  display: grid;
  line-height: 1.2;
}

.ad-sidebar__brand small {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
}

.ad-sidebar__search {
  padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-1);
}

.ad-searchbtn {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  width: 100%;
  height: 36px;
  padding: 0 var(--ms-space-2) 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-searchbtn:hover {
  border-color: var(--ms-color-border-strong);
}

.ad-searchbtn svg {
  width: 16px;
  height: 16px;
}

.ad-searchbtn span {
  flex: 1;
}

@media (max-width: 1023px) {
  .ad-searchbtn .ad-kbd {
    display: none;
  }
}

.ad-kbd {
  display: inline-flex;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--ms-color-border);
  border-bottom-width: 2px;
  border-radius: var(--ms-radius-xs);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-secondary);
  font: var(--ms-font-weight-medium) 11px/1 var(--ms-font-sans);
}

.ad-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-5);
  scrollbar-width: thin;
}

.ad-nav__group + .ad-nav__group {
  margin-top: var(--ms-space-4);
}

.ad-nav__label {
  padding: 0 var(--ms-space-2) var(--ms-space-1-5);
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
}

.ad-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ms-space-2-5, 10px);
  min-height: 34px;
  padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body) !important;
  font-weight: var(--ms-font-weight-medium);
  text-decoration: none !important;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-nav__link svg {
  width: 17px;
  height: 17px;
  color: var(--ms-color-text-tertiary);
}

.ad-nav__link:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ad-nav__link[aria-current="page"] {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text) !important;
}

.ad-nav__link[aria-current="page"] svg {
  color: var(--ms-color-primary);
}

.ad-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ms-color-primary);
}

.ad-nav__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ad-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-body);
  font-size: 11px;
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ad-count--alert {
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
}

.ad-sidebar__foot {
  display: grid;
  gap: var(--ms-space-1);
  padding: var(--ms-space-3);
  border-top: 1px solid var(--ms-color-border);
}

/* short pages (empty list, one row): the footer stays at the bottom of the window instead of mid-page (FAZ B) */
.ad-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.ad-main > .ad-content {
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .ad-main {
    margin-left: var(--ms-admin-sidebar-w);
  }

  .ad-sidebar__close,
  .ad-topbar__menu {
    display: none !important;
  }
}

/* Mobile/tablet: sidebar becomes an off-canvas drawer */
@media (max-width: 1023px) {
  .ad-sidebar {
    width: min(304px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: var(--ms-shadow-xl);
    transition: transform var(--ms-duration-slow) var(--ms-ease-out), visibility 0s linear var(--ms-duration-slow);
  }

  .ad-shell.is-nav-open .ad-sidebar {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .ad-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ms-z-drawer) - 1);
    background: rgb(7 10 34 / 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ms-duration-base) var(--ms-ease-out), visibility 0s linear var(--ms-duration-base);
  }

  .ad-shell.is-nav-open .ad-scrim {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .ad-sidebar__brand {
    justify-content: space-between;
  }
}

.ad-topbar {
  position: sticky;
  top: 0;
  z-index: var(--ms-z-header);
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  height: var(--ms-admin-topbar-h);
  padding: 0 var(--ms-space-6);
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ms-color-border);
}

@media (max-width: 639px) {
  .ad-topbar {
    padding: 0 var(--ms-space-3);
    gap: var(--ms-space-2);
  }
}

.ad-topbar__crumbs {
  flex: 1;
  min-width: 0;
}

.ad-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
}

.ad-crumbs ol {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  min-width: 0;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  white-space: nowrap;
}

.ad-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  min-width: 0;
}

.ad-crumbs li + li::before {
  content: "/";
  color: var(--ms-color-border-strong);
}

.ad-crumbs a {
  color: var(--ms-color-text-secondary);
}

.ad-crumbs [aria-current="page"] {
  overflow: hidden;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  text-overflow: ellipsis;
}

@media (max-width: 639px) {
  .ad-crumbs li:not(:last-child) {
    display: none;
  }
}

.ad-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-secondary) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-iconbtn:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ad-iconbtn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ms-color-surface);
  border-radius: 50%;
  background: var(--ms-color-danger);
}

@media (max-width: 1023px) {
  .ad-iconbtn {
    width: 44px;
    height: 44px;
  }
}

.ad-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-navy-900);
  color: #fff;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.02em;
}

.ad-content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--ms-space-7) var(--ms-space-6) var(--ms-space-12);
}

@media (max-width: 639px) {
  .ad-content {
    padding: var(--ms-space-5) var(--ms-space-4) var(--ms-space-11);
  }
}

.ad-footer {
  padding: var(--ms-space-5) var(--ms-space-6);
  border-top: 1px solid var(--ms-color-border);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
}

/* ---------- 3. Menus (details/summary dropdowns) ------------------------- */
.ad-menu {
  position: relative;
}

.ad-menu > summary {
  list-style: none;
  cursor: pointer;
}

.ad-menu > summary::-webkit-details-marker {
  display: none;
}

.ad-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--ms-z-modal);
  /* width from the items, never from the trigger's cell: in stacked phone tables the actions cell is a 40 px absolute
     box and the panel otherwise grew to 545 px and was pushed off-screen (V8 release check, İşlem geçmişi @390) */
  width: max-content;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: var(--ms-space-1-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-lg);
}

.ad-menu__panel--left {
  right: auto;
  left: 0;
}

.ad-menu__panel--up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* positioned against the viewport by admin.js (escapes the table's scroll container) */
.ad-menu__panel.is-floating {
  position: fixed;
  right: auto;
  bottom: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ad-menu__head {
  padding: var(--ms-space-2) var(--ms-space-2-5, 10px) var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  margin-bottom: var(--ms-space-1);
}

.ad-menu__head strong {
  display: block;
  color: var(--ms-color-text);
}

.ad-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--ms-space-2-5, 10px);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: none;
  color: var(--ms-color-text-body) !important;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}

/* stacked phone tables make every "td a" inline-flex; menu items must stay one per line */
.ad-menu__panel .ad-menu__item {
  display: flex;
}

.ad-menu__item:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ad-menu__item svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-text-tertiary);
}

.ad-menu__item--danger,
.ad-menu__item--danger svg {
  color: var(--ms-color-danger) !important;
}

.ad-menu__item--danger:hover {
  background: var(--ms-color-danger-subtle);
}

.ad-menu__sep {
  height: 1px;
  margin: var(--ms-space-1) 0;
  background: var(--ms-color-border);
}

.ad-menu__meta {
  margin-left: auto;
}

/* ---------- 4. Buttons --------------------------------------------------- */
.ad-btn {
  --_bg: var(--ms-color-surface);
  --_fg: var(--ms-color-text);
  --_bd: var(--ms-color-border-strong);
  --_sh: var(--ms-shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-1-5);
  min-height: var(--ms-control-sm);
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--_bd);
  border-radius: var(--ms-radius-md);
  background: var(--_bg);
  color: var(--_fg) !important;
  box-shadow: var(--_sh);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-btn:hover {
  --_bg: var(--ms-color-bg-subtle);
  --_bd: var(--ms-gray-400);
}

.ad-btn:focus-visible {
  box-shadow: var(--_sh), var(--ms-ring-focus);
}

.ad-btn svg {
  width: 16px;
  height: 16px;
}

.ad-btn--primary {
  --_bg: var(--ms-color-primary);
  --_fg: var(--ms-color-on-primary);
  --_bd: var(--ms-color-primary);
  --_sh: 0 1px 2px rgb(11 16 51 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.ad-btn--primary:hover {
  --_bg: var(--ms-color-primary-hover);
  --_bd: var(--ms-color-primary-hover);
}

.ad-btn--danger {
  --_bg: var(--ms-color-danger);
  --_fg: #fff;
  --_bd: var(--ms-color-danger);
  --_sh: 0 1px 2px rgb(155 28 34 / 0.2);
}

.ad-btn--danger:hover {
  --_bg: var(--ms-color-danger-hover);
  --_bd: var(--ms-color-danger-hover);
}

.ad-btn--ghost {
  --_bg: transparent;
  --_bd: transparent;
  --_sh: none;
  --_fg: var(--ms-color-text-body);
}

.ad-btn--ghost:hover {
  --_bg: var(--ms-color-bg-muted);
  --_bd: transparent;
}

.ad-btn--lg {
  min-height: 40px;
  padding: 0 var(--ms-space-4);
}

.ad-btn--icon {
  width: var(--ms-control-sm);
  padding: 0;
}

.ad-btn[disabled],
.ad-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ad-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ad-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-color: var(--_fg) var(--_fg) transparent transparent;
  border-radius: 50%;
  animation: ad-spin 0.7s linear infinite;
}

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

@media (max-width: 1023px) {
  .ad-btn {
    min-height: 40px;
  }

  .ad-btn--icon {
    width: 40px;
  }
}

/* ---------- 5. Page header ----------------------------------------------- */
.ad-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-space-4);
  margin-bottom: var(--ms-space-6);
}

.ad-page-head h1 {
  font-size: var(--ms-font-size-2xl);
  line-height: 1.25;
  letter-spacing: var(--ms-tracking-heading);
}

.ad-page-head p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
}

.ad-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
}

/* ---------- 6. Cards, stats, chart --------------------------------------- */
.ad-card {
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xs);
  min-width: 0;
}

.ad-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  min-height: 52px;
  padding: var(--ms-space-3) var(--ms-space-5);
  border-bottom: 1px solid var(--ms-color-border);
}

.ad-card__head h2 {
  font-size: var(--ms-font-size-sm);
}

.ad-card__head p {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
}

.ad-card__body {
  padding: var(--ms-space-5);
}

.ad-card__foot {
  padding: var(--ms-space-3) var(--ms-space-5);
  border-top: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-xs);
}

.ad-grid {
  display: grid;
  gap: var(--ms-space-4);
}

@media (min-width: 640px) {
  .ad-grid--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ad-grid--stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

/* Vertical rhythm between top-level blocks of a page */
.ad-content > * + * {
  margin-top: var(--ms-space-4);
}

.ad-content > .ad-page-head + * {
  margin-top: 0;
}

.ad-grid--main {
  align-items: start;
}

.ad-stat {
  display: grid;
  align-content: start;
  gap: var(--ms-space-1);
  padding: var(--ms-space-5);
}

.ad-stat__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ms-color-text-secondary);
  font-weight: var(--ms-font-weight-medium);
}

.ad-stat__label svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-text-tertiary);
}

.ad-stat__value {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-3xl);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ad-stat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-1) var(--ms-space-2);
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ad-delta--up {
  background: var(--ms-color-success-subtle);
  color: var(--ms-green-700);
}

.ad-delta--down {
  background: var(--ms-color-danger-subtle);
  color: var(--ms-red-700);
}

.ad-delta--flat {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-secondary);
}

/* Work queue tiles */
.ad-queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .ad-queue {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ad-queue__item {
  display: grid;
  gap: 2px;
  padding: var(--ms-space-4) var(--ms-space-5);
  color: var(--ms-color-text-secondary) !important;
  text-decoration: none !important;
  border-right: 1px solid var(--ms-color-border);
  border-bottom: 1px solid var(--ms-color-border);
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-queue__item:hover {
  background: var(--ms-color-bg-subtle);
}

.ad-queue__item strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ad-queue__item.is-attention strong {
  color: var(--ms-color-primary-text);
}

@media (min-width: 768px) {
  .ad-queue__item {
    border-bottom: 0;
  }

  .ad-queue__item:last-child {
    border-right: 0;
  }
}

@media (max-width: 767px) {
  .ad-queue__item:nth-child(2n) {
    border-right: 0;
  }

  .ad-queue__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* Bar chart (server-rendered, no library) */
.ad-chart {
  display: grid;
  gap: var(--ms-space-3);
}

.ad-chart__plot {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  height: 180px;
  padding-top: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  background-image: linear-gradient(var(--ms-gray-100) 1px, transparent 1px);
  background-size: 100% 45px;
}

.ad-chart__bar {
  position: relative;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--ms-blue-500);
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-chart__bar.is-zero {
  background: var(--ms-gray-200);
}

.ad-chart__bar.is-today {
  background: var(--ms-color-primary);
}

.ad-chart__bar:hover,
.ad-chart__bar:focus-visible {
  background: var(--ms-blue-700);
}

.ad-chart__axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  color: var(--ms-color-text-tertiary);
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
  .ad-chart__axis span:nth-child(odd) {
    visibility: hidden;
  }
}

.ad-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

/* Lists inside cards (recent items) */
.ad-list > li + li {
  border-top: 1px solid var(--ms-color-border);
}

.ad-list__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-5);
  color: inherit !important;
  text-decoration: none !important;
}

a.ad-list__item:hover {
  background: var(--ms-color-bg-subtle);
}

.ad-list__main {
  flex: 1;
  min-width: 0;
}

.ad-list__title {
  display: block;
  overflow: hidden;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ad-list__sub {
  display: block;
  overflow: hidden;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ad-list__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-secondary);
}

.ad-list__icon svg {
  width: 16px;
  height: 16px;
}

/* Quick actions */
.ad-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-2);
  padding: var(--ms-space-4);
}

.ad-quick {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text) !important;
  font-weight: var(--ms-font-weight-medium);
  text-decoration: none !important;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-quick:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
}

.ad-quick svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-primary);
}

/* ---------- 7. Badges ---------------------------------------------------- */
.ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.ad-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-gray-400);
}

.ad-badge--plain::before {
  display: none;
}

.ad-badge--success {
  border-color: var(--ms-color-success-border);
  background: var(--ms-color-success-subtle);
  color: var(--ms-green-700);
}

.ad-badge--success::before {
  background: var(--ms-green-600);
}

.ad-badge--warning {
  border-color: var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-amber-700);
}

.ad-badge--warning::before {
  background: var(--ms-amber-600);
}

.ad-badge--danger {
  border-color: var(--ms-color-danger-border);
  background: var(--ms-color-danger-subtle);
  color: var(--ms-red-700);
}

.ad-badge--danger::before {
  background: var(--ms-red-600);
}

.ad-badge--info {
  border-color: var(--ms-color-info-border);
  background: var(--ms-color-info-subtle);
  color: var(--ms-blue-800);
}

.ad-badge--info::before {
  background: var(--ms-blue-600);
}

/* ---------- 8. Tabs, toolbar, filters ------------------------------------ */
.ad-tabs {
  display: flex;
  gap: var(--ms-space-1);
  overflow-x: auto;
  padding: 0 var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  scrollbar-width: none;
}

.ad-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 44px;
  padding: 0 var(--ms-space-2);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ms-color-text-secondary);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}

.ad-tabs a:hover {
  color: var(--ms-color-text);
  text-decoration: none;
}

.ad-tabs a[aria-current="page"] {
  border-bottom-color: var(--ms-color-primary);
  color: var(--ms-color-text);
}

.ad-tabs a[aria-current="page"] .ad-count {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
}

.ad-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
}

.ad-toolbar__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.ad-toolbar__search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--ms-color-text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

.ad-toolbar__search .ad-input {
  padding-left: 34px;
}

.ad-toolbar__field {
  display: grid;
  gap: 4px;
}

.ad-toolbar__field > span {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
}

.ad-toolbar__actions {
  display: flex;
  gap: var(--ms-space-2);
}

@media (max-width: 767px) {
  .ad-toolbar__field {
    flex: 1 1 calc(50% - var(--ms-space-3));
  }

  .ad-toolbar__actions {
    flex: 1 1 100%;
  }

  .ad-toolbar__actions .ad-btn {
    flex: 1;
  }
}

.ad-filters-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2-5, 10px) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.ad-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
}

.ad-chip a {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--ms-color-text-tertiary);
}

.ad-chip a:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text);
}

.ad-chip svg {
  width: 12px;
  height: 12px;
}

/* ---------- 9. Data table ------------------------------------------------ */
.ad-table-wrap {
  overflow-x: auto;
}

.ad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-font-size-sm);
}

.ad-table th,
.ad-table td {
  padding: var(--ms-space-3) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  text-align: left;
  vertical-align: middle;
}

.ad-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
  padding-block: 0;
  background: var(--ms-gray-25);
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
}

.ad-table thead th a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.ad-table thead th a svg {
  width: 12px;
  height: 12px;
}

.ad-table tbody tr {
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-table tbody tr:hover {
  background: var(--ms-gray-25);
}

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

.ad-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ad-table .is-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.ad-table__primary {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

.ad-table__sub {
  display: block;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-table__link {
  color: var(--ms-color-text) !important;
  font-weight: var(--ms-font-weight-medium);
}

.ad-table__link:hover {
  color: var(--ms-color-primary-text) !important;
}

/* <768px: rows become stacked cards; each cell shows its column name from data-label */
@media (max-width: 767px) {
  .ad-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .ad-table--stack,
  .ad-table--stack tbody,
  .ad-table--stack tr,
  .ad-table--stack td {
    display: block;
    width: 100%;
  }

  .ad-table--stack tr {
    position: relative;
    padding: var(--ms-space-3) var(--ms-space-4);
    border-bottom: 1px solid var(--ms-color-border);
  }

  .ad-table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .ad-table--stack td {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    column-gap: var(--ms-space-4);
    align-items: baseline;
    padding: var(--ms-space-1) 0;
    border: 0;
    text-align: right;
  }

  /* label in the first column, every piece of the value stacked in the second */
  .ad-table--stack td > * {
    grid-column: 2;
    justify-self: end;
  }

  .ad-table--stack td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 3;
    color: var(--ms-color-text-tertiary);
    font-size: var(--ms-font-size-xs);
    text-align: left;
  }

  .ad-table--stack td.is-head {
    display: block;
    padding-right: 48px;
    margin-bottom: var(--ms-space-1);
    text-align: left;
  }

  .ad-table--stack td.is-head::before,
  .ad-table--stack td.is-actions::before {
    display: none;
  }

  .ad-table--stack td.is-actions {
    position: absolute;
    top: var(--ms-space-2);
    right: var(--ms-space-2);
    width: auto;
    padding: 0;
  }
}

/* V8: wide report tables (İşlem geçmişi, 404 raporu) are stacked up to tablet width instead of scrolling sideways */
@media (max-width: 1023px) {
  .ad-table--stack-lg thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .ad-table--stack-lg,
  .ad-table--stack-lg tbody,
  .ad-table--stack-lg tr,
  .ad-table--stack-lg td {
    display: block;
    width: 100%;
  }

  .ad-table--stack-lg tr {
    position: relative;
    padding: var(--ms-space-3) var(--ms-space-4);
    border-bottom: 1px solid var(--ms-color-border);
  }

  .ad-table--stack-lg tbody tr:last-child {
    border-bottom: 0;
  }

  .ad-table--stack-lg td {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    column-gap: var(--ms-space-4);
    align-items: baseline;
    padding: var(--ms-space-1) 0;
    border: 0;
    text-align: right;
  }

  /* label in the first column, every piece of the value stacked in the second */
  .ad-table--stack-lg td > * {
    grid-column: 2;
    justify-self: end;
  }

  .ad-table--stack-lg td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 3;
    color: var(--ms-color-text-tertiary);
    font-size: var(--ms-font-size-xs);
    text-align: left;
  }

  .ad-table--stack-lg td.is-head {
    display: block;
    padding-right: 48px;
    margin-bottom: var(--ms-space-1);
    text-align: left;
  }

  .ad-table--stack-lg td.is-head::before,
  .ad-table--stack-lg td.is-actions::before {
    display: none;
  }

  .ad-table--stack-lg td.is-actions {
    position: absolute;
    top: var(--ms-space-2);
    right: var(--ms-space-2);
    width: auto;
    padding: 0;
  }
}

.ad-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-top: 1px solid var(--ms-color-border);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.ad-table-foot form {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
}

/* Pagination */
.ad-pager ol {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ad-pager a,
.ad-pager span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body);
  font-weight: var(--ms-font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ad-pager a:hover {
  border-color: var(--ms-color-border);
  background: var(--ms-color-bg-subtle);
  text-decoration: none;
}

.ad-pager [aria-current="page"] {
  border-color: var(--ms-color-border-strong);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
}

.ad-pager .is-disabled {
  color: var(--ms-color-text-placeholder);
}

.ad-pager svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .ad-pager a,
  .ad-pager span {
    min-width: 40px;
    height: 40px;
  }
}

/* ---------- 10. Forms ---------------------------------------------------- */
.ad-input,
.ad-select,
.ad-textarea {
  display: block;
  width: 100%;
  min-height: var(--ms-control-sm);
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
  font-size: var(--ms-font-size-sm);
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

@media (max-width: 1023px) {
  .ad-input,
  .ad-select {
    min-height: 44px;
    font-size: var(--ms-font-size-md); /* no iOS zoom */
  }
}

.ad-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525a6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.ad-textarea {
  min-height: 112px;
  padding: var(--ms-space-2) var(--ms-space-3);
  resize: vertical;
}

.ad-input::placeholder,
.ad-textarea::placeholder {
  color: var(--ms-color-text-placeholder);
}

.ad-input:hover,
.ad-select:hover,
.ad-textarea:hover {
  border-color: var(--ms-gray-400);
}

.ad-input:focus,
.ad-select:focus,
.ad-textarea:focus {
  outline: none;
  border-color: var(--ms-color-primary);
  box-shadow: var(--ms-ring-focus);
}

.ad-input[aria-invalid="true"],
.ad-select[aria-invalid="true"],
.ad-textarea[aria-invalid="true"] {
  border-color: var(--ms-color-danger);
}

.ad-input[aria-invalid="true"]:focus {
  box-shadow: var(--ms-ring-danger);
}

.ad-input:disabled,
.ad-input[readonly] {
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
}

/* Settings-style form: section description on the left, fields on the right (≥1024px) */
.ad-form {
  display: grid;
  gap: var(--ms-space-4);
}

.ad-section {
  display: grid;
  gap: var(--ms-space-5);
  padding: var(--ms-space-6);
}

@media (min-width: 1024px) {
  .ad-section {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--ms-space-10);
  }
}

@media (max-width: 639px) {
  .ad-section {
    padding: var(--ms-space-5) var(--ms-space-4);
  }
}

.ad-section + .ad-section {
  border-top: 1px solid var(--ms-color-border);
}

.ad-section__intro h2 {
  font-size: var(--ms-font-size-md);
}

.ad-section__intro p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.ad-fields {
  display: grid;
  gap: var(--ms-space-5);
  max-width: 720px;
}

@media (min-width: 640px) {
  .ad-fields--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ad-field--full {
    grid-column: 1 / -1;
  }
}

.ad-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.ad-label {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
}

.ad-req {
  color: var(--ms-color-danger);
}

.ad-opt {
  color: var(--ms-color-text-tertiary);
  font-weight: var(--ms-font-weight-regular);
}

.ad-help {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-error {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ms-color-danger);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ad-error svg {
  width: 14px;
  height: 14px;
}

/* Segmented radio group */
.ad-segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  margin: 0;
  min-width: 0;
}

.ad-segmented legend {
  float: left;
  width: 100%;
  margin-bottom: 6px;
}

.ad-segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--ms-space-3);
  border-radius: 6px;
  color: var(--ms-color-text-secondary);
  font-weight: var(--ms-font-weight-medium);
  cursor: pointer;
}

.ad-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ad-segmented label:has(input:checked) {
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-sm);
}

.ad-segmented label:has(input:focus-visible) {
  box-shadow: var(--ms-ring-focus);
}

.ad-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ad-fieldset > legend {
  margin-bottom: 6px;
  padding: 0;
}

/* Switch (checkbox) */
.ad-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  cursor: pointer;
}

.ad-switch input {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: var(--ms-radius-full);
  background: var(--ms-gray-300);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ms-shadow-sm);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-switch input:checked {
  background: var(--ms-color-primary);
}

.ad-switch input:checked::after {
  transform: translateX(16px);
}

.ad-switch strong {
  display: block;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

.ad-switch span span {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

/* Sticky action bar at the bottom of a form */
.ad-formbar {
  position: sticky;
  bottom: 0;
  z-index: var(--ms-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-6);
  border-top: 1px solid var(--ms-color-border);
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ad-formbar__actions {
  display: flex;
  gap: var(--ms-space-2);
  margin-left: auto;
}

@media (max-width: 639px) {
  .ad-formbar {
    padding: var(--ms-space-3) var(--ms-space-4);
  }

  .ad-formbar__actions {
    flex: 1 1 100%;
  }

  .ad-formbar__actions .ad-btn {
    flex: 1;
  }
}

/* File / image upload area (dropzone look on a native input) */
.ad-upload {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-6);
  border: 1px dashed var(--ms-color-border-strong);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-gray-25);
  color: var(--ms-color-text-secondary);
  text-align: center;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ad-upload:hover,
.ad-upload.is-dragover {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary-subtle);
}

.ad-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ad-upload:has(input:focus-visible) {
  box-shadow: var(--ms-ring-focus);
}

/* ---------- 11. Alerts, toasts, dialogs ---------------------------------- */
.ad-alert {
  display: flex;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
}

.ad-alert svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.ad-alert strong {
  display: block;
  color: inherit;
}

/* the text column may shrink below its longest word (MAIL_ENCRYPTION, storage/logs/mail/ — 320 px overflow, V8) */
.ad-alert > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ad-alert > svg {
  flex: none;
}

.ad-alert ul {
  margin-top: var(--ms-space-1);
  padding-left: 1.1em;
  list-style: disc;
}

.ad-alert a {
  color: inherit;
  text-decoration: underline;
}

.ad-alert--danger {
  border-color: var(--ms-color-danger-border);
  background: var(--ms-color-danger-subtle);
  color: var(--ms-red-700);
}

.ad-alert--success {
  border-color: var(--ms-color-success-border);
  background: var(--ms-color-success-subtle);
  color: var(--ms-green-700);
}

.ad-alert--warning {
  border-color: var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-amber-700);
}

.ad-alert--info {
  border-color: var(--ms-color-info-border);
  background: var(--ms-color-info-subtle);
  color: var(--ms-blue-800);
}

.ad-content > .ad-alert {
  margin-bottom: var(--ms-space-4);
}

/* Top-right, under the topbar: never covers the sticky form bar or table actions at the bottom. */
.ad-toasts {
  position: fixed;
  right: var(--ms-space-5);
  top: calc(var(--ms-admin-topbar-h) + var(--ms-space-3));
  z-index: var(--ms-z-toast);
  display: grid;
  gap: var(--ms-space-2);
  width: min(380px, calc(100vw - 32px));
}

.ad-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-lg);
  color: var(--ms-color-text);
  animation: ad-toast-in var(--ms-duration-slow) var(--ms-ease-out);
}

.ad-toast > svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.ad-toast--success > svg {
  color: var(--ms-color-success);
}

.ad-toast--danger > svg {
  color: var(--ms-color-danger);
}

.ad-toast--warning > svg {
  color: var(--ms-color-warning);
}

.ad-toast--info > svg {
  color: var(--ms-color-primary);
}

.ad-toast p {
  flex: 1;
  padding-top: 1px;
}

.ad-toast button {
  margin: -4px -2px 0 0;
  width: 28px;
  height: 28px;
}

@keyframes ad-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.ad-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xl);
  color: var(--ms-color-text-body);
}

.ad-dialog::backdrop {
  background: rgb(7 10 34 / 0.45);
}

.ad-dialog[open] {
  animation: ad-toast-in var(--ms-duration-base) var(--ms-ease-out);
}

.ad-dialog__body {
  display: flex;
  gap: var(--ms-space-4);
  padding: var(--ms-space-6);
}

.ad-dialog__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--ms-color-danger-subtle);
  color: var(--ms-color-danger);
}

.ad-dialog h2 {
  font-size: var(--ms-font-size-md);
}

.ad-dialog p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
}

.ad-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--ms-space-2);
  padding: var(--ms-space-3) var(--ms-space-6);
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg);
}

/* Command search */
.ad-cmd {
  width: min(560px, calc(100vw - 32px));
  max-height: min(520px, 80vh);
  margin-top: 12vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-xl);
}

.ad-cmd::backdrop {
  background: rgb(7 10 34 / 0.35);
}

.ad-cmd__input {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: 0 var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
}

.ad-cmd__input input {
  flex: 1;
  height: 52px;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--ms-font-size-md);
}

.ad-cmd__input input:focus-visible {
  box-shadow: none;
}

.ad-cmd__list {
  max-height: 420px;
  overflow-y: auto;
  padding: var(--ms-space-2);
}

.ad-cmd__group {
  padding: var(--ms-space-2) var(--ms-space-2) var(--ms-space-1);
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
}

.ad-cmd__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 40px;
  padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text) !important;
  text-decoration: none !important;
}

.ad-cmd__item svg {
  color: var(--ms-color-text-tertiary);
}

.ad-cmd__item[aria-selected="true"],
.ad-cmd__item:hover {
  background: var(--ms-color-primary-subtle);
}

.ad-cmd__empty {
  padding: var(--ms-space-8) var(--ms-space-4);
  color: var(--ms-color-text-secondary);
  text-align: center;
}

/* ---------- 12. Empty / loading / error states --------------------------- */
.ad-empty {
  display: grid;
  justify-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-11) var(--ms-space-5);
  text-align: center;
  color: var(--ms-color-text-secondary);
}

.ad-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-sm);
  color: var(--ms-color-text-tertiary);
}

.ad-empty h2,
.ad-empty h3 {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
}

.ad-empty p {
  max-width: 420px;
}

.ad-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-3);
}

.ad-empty--compact {
  padding: var(--ms-space-8) var(--ms-space-4);
}

.ad-skeleton {
  display: block;
  height: 12px;
  border-radius: var(--ms-radius-sm);
  background: linear-gradient(90deg, var(--ms-gray-100) 25%, var(--ms-gray-50) 37%, var(--ms-gray-100) 63%);
  background-size: 400% 100%;
  animation: ad-shimmer 1.4s ease infinite;
}

@keyframes ad-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* ---------- 13. Sign-in screen ------------------------------------------- */
.ad-auth {
  display: grid;
  min-height: 100vh;
  background: var(--ms-color-bg-subtle);
}

@media (min-width: 1024px) {
  .ad-auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ad-auth__panel {
  display: grid;
  place-items: center;
  padding: var(--ms-space-8) var(--ms-space-4);
  background: var(--ms-color-surface);
}

.ad-auth__card {
  width: min(380px, 100%);
}

.ad-auth__card img {
  height: 36px;
  width: auto;
}

.ad-auth__card h1 {
  margin-top: var(--ms-space-8);
  font-size: var(--ms-font-size-2xl);
  letter-spacing: var(--ms-tracking-heading);
}

.ad-auth__card > p {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
}

.ad-auth__form {
  display: grid;
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-7);
}

.ad-auth__form .ad-btn {
  min-height: 44px;
}

.ad-auth__aside {
  position: relative;
  display: none;
  overflow: hidden;
  padding: var(--ms-space-10);
  background: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
  isolation: isolate;
}

.ad-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000, transparent 75%);
}

.ad-auth__aside::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -20% auto 30%;
  height: 80%;
  background: radial-gradient(closest-side, rgb(26 102 229 / 0.35), transparent);
}

@media (min-width: 1024px) {
  .ad-auth__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.ad-auth__aside h2 {
  max-width: 420px;
  color: #fff;
  font-size: var(--ms-font-size-3xl);
  letter-spacing: var(--ms-tracking-heading);
  line-height: 1.2;
}

.ad-auth__aside p {
  max-width: 420px;
  margin-top: var(--ms-space-3);
}

.ad-auth__note {
  margin-top: var(--ms-space-6);
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-auth__alert {
  margin-top: var(--ms-space-6);
}

/* ---------- 14. WG-14 shared module components ---------------------------
   Collapsible sidebar groups, generic list (bulk bar, thumbnails, sort links),
   form tabs, rich-text editor, image field, gallery, input groups. */

/* Sidebar groups (disclosure buttons) */
.ad-nav__group + .ad-nav__group {
  margin-top: var(--ms-space-2);
}

button.ad-nav__label {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  width: 100%;
  min-height: 30px;
  padding: 0 var(--ms-space-2);
  border: 0;
  border-radius: var(--ms-radius-sm);
  background: none;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

button.ad-nav__label:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-secondary);
}

button.ad-nav__label > span:first-child {
  flex: 1;
}

button.ad-nav__label svg {
  width: 14px;
  height: 14px;
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

button.ad-nav__label[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.ad-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-color-primary);
}

button.ad-nav__label[aria-expanded="true"] .ad-nav__dot {
  display: none;
}

.ad-nav__group ul {
  margin-top: 2px;
}

/* Page head: back link above the title */
.ad-page-head__eyebrow {
  margin: 0 0 var(--ms-space-1) !important;
  font-size: var(--ms-font-size-xs);
}

.ad-page-head__eyebrow a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ms-color-text-secondary);
}

.ad-page-head__eyebrow svg {
  width: 14px;
  height: 14px;
}

.ad-page-head__actions form {
  display: contents;
}

.ad-btn--danger-ghost {
  --_bg: var(--ms-color-surface);
  --_fg: var(--ms-color-danger);
  --_bd: var(--ms-color-danger-border);
}

.ad-btn--danger-ghost:hover {
  --_bg: var(--ms-color-danger-subtle);
  --_bd: var(--ms-color-danger);
}

/* List: selection column, bulk bar, thumbnails, sortable headers */
.ad-table .is-check {
  width: 1%;
  padding-right: 0;
}

.ad-table .is-check input,
.ad-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ms-color-primary);
  cursor: pointer;
}

.ad-table tbody tr.is-selected {
  background: var(--ms-color-primary-subtle);
}

.ad-bulkbar {
  position: sticky;
  top: var(--ms-admin-topbar-h);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  background: var(--ms-color-primary-subtle);
}

.ad-bulkbar__count {
  margin-right: auto;
  color: var(--ms-color-primary-text);
}

.ad-bulkbar .ad-select {
  width: auto;
  min-width: 150px;
}

@media (max-width: 639px) {
  .ad-bulkbar__count {
    flex: 1 1 100%;
  }

  .ad-bulkbar .ad-select {
    flex: 1;
  }
}

.ad-thumb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-25);
  object-fit: contain;
}

.ad-thumb--empty {
  color: var(--ms-color-text-placeholder);
}

.ad-thumb--empty svg {
  width: 18px;
  height: 18px;
}

.ad-th-sort {
  text-decoration: none !important;
}

.ad-table thead th[aria-sort] {
  color: var(--ms-color-text);
}

@media (max-width: 767px) {
  .ad-table--stack tr.has-check {
    padding-left: 48px;
  }

  .ad-table--stack td.is-check {
    position: absolute;
    top: 14px;
    left: var(--ms-space-4);
    width: auto;
    padding: 0;
    border: 0;
  }

  .ad-table--stack td.is-check input {
    width: 20px;
    height: 20px;
  }

  .ad-table--stack td.is-check,
  .ad-table--stack td.is-thumb {
    display: block;
  }

  .ad-table--stack td.is-thumb {
    padding-bottom: var(--ms-space-2);
    text-align: left;
  }

  .ad-table--stack td.is-thumb::before {
    display: none;
  }

  .ad-table--stack td.is-thumb > *,
  .ad-table--stack td.is-check > * {
    justify-self: start;
  }

  .ad-table--stack td.is-actions {
    display: block;
  }

  .ad-table--stack td.is-head > * {
    justify-self: start;
  }

  .ad-table--stack td.is-check::before {
    display: none !important;
  }

  .ad-table--stack thead th.is-check {
    display: none;
  }
}

/* Form tabs (long forms) */
.ad-formtabs {
  display: flex;
  gap: var(--ms-space-1);
  overflow-x: auto;
  padding: 0 var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  scrollbar-width: none;
}

.ad-formtabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 46px;
  padding: 0 var(--ms-space-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ms-color-text-secondary);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.ad-formtabs [role="tab"]:hover {
  color: var(--ms-color-text);
}

.ad-formtabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--ms-color-primary);
  color: var(--ms-color-text);
}

.ad-formtabs + .ad-section {
  border-top: 0;
}

/* Input group: prefix / suffix addon */
.ad-inputgroup {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.ad-inputgroup .ad-input {
  flex: 1;
  min-width: 0;
}

.ad-inputgroup__addon {
  display: inline-flex;
  align-items: center;
  max-width: 55%;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border-strong);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-inputgroup__addon:first-child {
  border-right: 0;
  border-radius: var(--ms-radius-md) 0 0 var(--ms-radius-md);
}

.ad-inputgroup__addon:last-child {
  border-left: 0;
  border-radius: 0 var(--ms-radius-md) var(--ms-radius-md) 0;
}

.ad-inputgroup .ad-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ad-inputgroup .ad-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ad-counter.is-over {
  color: var(--ms-color-warning);
}

.ad-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  cursor: pointer;
}

/* a link inside a checkbox label (e.g. "aç" next to a product feed) keeps a 24 px target (WCAG 2.5.8) */
.ad-check a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--ms-space-1);
}

/* Rich-text editor */
.ad-rte {
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xs);
}

.ad-rte:focus-within {
  border-color: var(--ms-color-primary);
  box-shadow: var(--ms-ring-focus);
}

.ad-rte__bar {
  position: sticky;
  top: var(--ms-admin-topbar-h);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md) var(--ms-radius-md) 0 0;
  background: var(--ms-gray-25);
}

.ad-rte__btn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--ms-radius-sm);
  background: none;
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-semibold);
  cursor: pointer;
}

.ad-rte__btn:hover {
  background: var(--ms-color-bg-muted);
}

.ad-rte__btn[aria-pressed="true"] {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
}

.ad-rte__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ad-rte__sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--ms-color-border);
}

.ad-rte__editor {
  min-height: 220px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--ms-space-3) var(--ms-space-4);
  color: var(--ms-color-text);
  line-height: 1.65;
}

.ad-rte__editor:focus {
  outline: none;
}

.ad-rte__editor :where(p, ul, ol, blockquote, h2, h3, h4) {
  margin: 0 0 0.75em;
}

.ad-rte__editor :where(ul, ol) {
  padding-left: 1.4em;
}

.ad-rte__editor ul {
  list-style: disc;
}

.ad-rte__editor ol {
  list-style: decimal;
}

.ad-rte__editor h2 {
  font-size: var(--ms-font-size-lg);
}

.ad-rte__editor h3 {
  font-size: var(--ms-font-size-md);
}

.ad-rte__editor blockquote {
  padding-left: var(--ms-space-3);
  border-left: 3px solid var(--ms-color-border-strong);
  color: var(--ms-color-text-secondary);
}

.ad-rte__editor img {
  max-width: 100%;
  height: auto;
}

.ad-rte__editor a {
  text-decoration: underline;
}

.ad-rte .ad-rte__source {
  min-height: 260px;
  border: 0;
  border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
  box-shadow: none;
  font-family: var(--ms-font-mono, ui-monospace, monospace);
  font-size: var(--ms-font-size-xs);
}

.ad-rte .ad-rte__source:focus {
  box-shadow: none;
}

/* Tag / chips input (FAZ B) */
.ad-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xs);
  cursor: text;
}

.ad-tags:focus-within {
  border-color: var(--ms-color-primary);
  box-shadow: var(--ms-ring-focus);
}

.ad-tags__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--ms-color-primary-border, var(--ms-color-border));
  border-radius: var(--ms-radius-full, 999px);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-sm);
  line-height: 1.2;
}

.ad-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-tag.is-dup {
  animation: ad-tag-dup 600ms var(--ms-ease-out);
}

@keyframes ad-tag-dup {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--ms-color-warning-border); }
}

.ad-tag__remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ad-tag__remove:hover,
.ad-tag__remove:focus-visible {
  background: var(--ms-color-bg-muted);
}

.ad-tags__input {
  flex: 1 1 160px;
  min-width: 120px;
  height: 30px;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: none;
  color: var(--ms-color-text);
  font: inherit;
}

.ad-tags__status {
  min-height: 1.2em;
  margin-top: 4px;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

@media (prefers-reduced-motion: reduce) {
  .ad-tag.is-dup {
    animation: none;
    outline: 2px solid var(--ms-color-warning-border);
  }
}

/* Rich text editor — TipTap (FAZ B) */
.ad-rte__block {
  width: auto;
  min-width: 128px;
  height: 32px;
  padding-block: 0;
  font-size: var(--ms-font-size-sm);
}

.ad-rte__btn svg {
  display: block;
}

.ad-rte__tabletools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
}

.ad-rte__tabletools[hidden] {
  display: none;
}

.ad-rte__textbtn {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-xs);
  cursor: pointer;
}

.ad-rte__textbtn:hover {
  background: var(--ms-color-bg-muted);
}

.ad-rte__notice {
  padding: var(--ms-space-2) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-amber-700);
  font-size: var(--ms-font-size-sm);
}

.ad-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--ms-font-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.ad-rte__editor h4 {
  font-size: var(--ms-font-size-base);
}

.ad-rte__editor hr {
  margin: 1em 0;
  border: 0;
  border-top: 1px solid var(--ms-color-border-strong);
}

.ad-rte__editor table {
  width: 100%;
  margin: 0 0 0.75em;
  border-collapse: collapse;
  table-layout: fixed;
}

.ad-rte__editor :where(td, th) {
  position: relative;
  padding: 6px 8px;
  border: 1px solid var(--ms-color-border-strong);
  vertical-align: top;
}

.ad-rte__editor th {
  background: var(--ms-gray-25);
  font-weight: var(--ms-font-weight-semibold);
  text-align: left;
}

.ad-rte__editor :where(td, th) > p {
  margin: 0;
}

.ad-rte__editor .selectedCell::after {
  position: absolute;
  inset: 0;
  background: var(--ms-color-primary-subtle);
  content: "";
  opacity: 0.6;
  pointer-events: none;
}

.ad-rte__editor img.ProseMirror-selectednode {
  outline: 2px solid var(--ms-color-primary);
}

.ad-rte__editor p.is-editor-empty:first-child::before {
  float: left;
  height: 0;
  color: var(--ms-color-text-muted, var(--ms-color-text-secondary));
  content: attr(data-placeholder);
  pointer-events: none;
}

.ad-rte__editor .ProseMirror-gapcursor {
  position: relative;
  display: none;
  pointer-events: none;
}

.ad-rte__editor.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.ad-rte__editor .ProseMirror-gapcursor::after {
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid currentColor;
  content: "";
}

.ad-rte__host[hidden] {
  display: none;
}

.ad-rte-dialog__body {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-6);
}

.ad-rte-dialog__body .ad-field {
  margin: 0;
}

/* Image field */
.ad-image {
  display: grid;
  gap: var(--ms-space-3);
}

@media (min-width: 640px) {
  .ad-image:has(.ad-image__preview:not([hidden])) {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
  }

  .ad-image:has(.ad-image__preview:not([hidden])) > :not(.ad-image__preview) {
    grid-column: 2;
  }

  .ad-image__preview {
    grid-row: span 3;
  }
}

.ad-image__preview {
  display: grid;
  gap: 4px;
}

.ad-image__preview img {
  width: 100%;
  max-height: 180px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: repeating-conic-gradient(var(--ms-gray-100) 0 25%, var(--ms-color-surface) 0 50%) 0 0 / 16px 16px;
  object-fit: contain;
}

.ad-image__preview.is-removed img {
  opacity: 0.35;
  filter: grayscale(1);
}

.ad-image__name {
  overflow: hidden;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ad-upload > span {
  display: grid;
  gap: 2px;
}

.ad-upload small {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-upload > svg {
  width: 22px;
  height: 22px;
  color: var(--ms-color-text-tertiary);
}

.ad-upload--compact {
  grid-auto-flow: column;
  justify-content: start;
  padding: var(--ms-space-4);
  text-align: left;
}

/* Gallery */
.ad-gallery {
  display: grid;
  gap: var(--ms-space-3);
}

.ad-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--ms-space-3);
}

.ad-gallery__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-25);
}

.ad-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-gallery__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: rgb(255 255 255 / 0.92);
  color: var(--ms-color-danger);
  cursor: pointer;
}

.ad-gallery__remove:hover {
  background: var(--ms-color-danger-subtle);
}

.ad-gallery__remove svg {
  width: 16px;
  height: 16px;
}

.ad-gallery__empty {
  grid-column: 1 / -1;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

/* Form action bar with three buttons on narrow screens */
@media (max-width: 479px) {
  .ad-formbar__actions {
    flex-wrap: wrap;
  }

  .ad-formbar__actions .ad-btn {
    flex: 1 1 calc(50% - var(--ms-space-2));
  }

  .ad-formbar__actions .ad-btn--primary {
    flex-basis: 100%;
    order: -1;
  }
}

/* Checklist (multi select with search) */
.ad-checklist {
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
}

.ad-checklist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
}

.ad-checklist__head .ad-input {
  flex: 1 1 200px;
  width: auto;
}

.ad-checklist__count {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.ad-checklist__list {
  display: grid;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--ms-space-1) 0;
}

.ad-checklist__list li {
  padding: 0 var(--ms-space-3);
}

.ad-checklist__list .ad-check {
  display: flex;
  min-height: 36px;
  color: var(--ms-color-text);
}

.ad-checklist__list .ad-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ad-checklist__empty {
  padding: var(--ms-space-3) !important;
  color: var(--ms-color-text-tertiary);
}

.ad-info {
  min-height: var(--ms-control-sm);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text);
  overflow-wrap: anywhere;
}

/* Description list (read-only facts in forms and detail pages) */
.ad-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ms-space-4) var(--ms-space-6);
  margin: 0;
  max-width: 720px;
}

.ad-dl dt {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-dl dd {
  margin: 2px 0 0;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  overflow-wrap: anywhere;
}

.ad-dl--wide {
  max-width: none;
}

/* Detail pages: main column + side card */
.ad-grid--detail {
  align-items: start;
}

@media (min-width: 1100px) {
  .ad-grid--detail {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.ad-dl--stack {
  grid-template-columns: 1fr;
  gap: var(--ms-space-3);
}

.ad-stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-4);
}

.ad-inline-form {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ad-inline-form .ad-select {
  width: auto;
  min-width: 160px;
}

.ad-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

/* Conversation thread */
.ad-thread {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
}

.ad-thread__msg {
  max-width: 760px;
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ad-thread__msg--team {
  justify-self: end;
  border-color: var(--ms-blue-100, #d6e4fb);
  background: var(--ms-color-primary-subtle);
}

.ad-thread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  font-size: var(--ms-font-size-xs);
}

.ad-thread__meta strong {
  color: var(--ms-color-text);
}

.ad-thread__del {
  margin-left: auto;
}

.ad-thread__del .ad-btn--icon {
  width: 30px;
  min-height: 30px;
  color: var(--ms-color-text-tertiary) !important;
}

.ad-thread__body {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text);
  overflow-wrap: anywhere;
}

.ad-thread__empty {
  color: var(--ms-color-text-tertiary);
}

.ad-thread__reply {
  display: grid;
  gap: 6px;
  padding: var(--ms-space-4);
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg);
}

.ad-thread__actions {
  display: flex;
  justify-content: flex-end;
}

.ad-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 420px;
}

.ad-stars {
  color: var(--ms-color-warning);
  letter-spacing: 1px;
}

.ad-subhead {
  margin: var(--ms-space-5) 0 var(--ms-space-2);
  font-size: var(--ms-font-size-sm);
}

.ad-prose-box {
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-25);
  color: var(--ms-color-text);
  overflow-wrap: anywhere;
}

.ad-stack-form {
  display: grid;
  gap: var(--ms-space-4);
}

.ad-timeline {
  display: grid;
  gap: var(--ms-space-4);
  padding: var(--ms-space-4) var(--ms-space-5);
}

.ad-timeline li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: var(--ms-space-4);
  border-left: 2px solid var(--ms-color-border);
}

.ad-timeline__meta {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-timeline__text {
  color: var(--ms-color-text);
}

.ad-timeline__note {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.ad-mono-soft {
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
}

.ad-gallery__grid--edit {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ad-gallery__card {
  display: grid;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
}

.ad-gallery__card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--ms-radius-sm);
  object-fit: cover;
}

.ad-mini-list {
  display: grid;
  gap: var(--ms-space-2);
}

.ad-mini-list li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-width: 0;
}

.ad-mini-list img,
.ad-mini-list__ph {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  object-fit: cover;
}

.ad-mini-list__ph {
  display: grid;
  place-items: center;
  color: var(--ms-color-text-placeholder);
}

.ad-mini-list__ph svg {
  width: 14px;
  height: 14px;
}

/* Order progress */
.ad-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-6);
  margin: 0 0 var(--ms-space-6);
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ad-steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-tertiary);
  font-weight: var(--ms-font-weight-medium);
}

.ad-steps__dot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ms-color-border-strong);
  border-radius: 50%;
  font-size: var(--ms-font-size-2xs);
}

.ad-steps__dot svg {
  width: 14px;
  height: 14px;
}

.ad-steps li.is-done {
  color: var(--ms-color-text-secondary);
}

.ad-steps li.is-done .ad-steps__dot {
  border-color: var(--ms-color-success);
  background: var(--ms-color-success);
  color: #fff;
}

.ad-steps li.is-current {
  color: var(--ms-color-text);
}

.ad-steps li.is-current .ad-steps__dot {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary);
  color: #fff;
}

/* Order lines and totals */
.ad-line-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-3);
  font-weight: var(--ms-font-weight-medium);
}

.ad-line-item img {
  flex: none;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  object-fit: cover;
}

.ad-totals {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0;
  padding: var(--ms-space-4) var(--ms-space-5);
  border-top: 1px solid var(--ms-color-border);
}

.ad-totals div {
  display: flex;
  justify-content: space-between;
  gap: var(--ms-space-4);
  max-width: 360px;
  margin-left: auto;
  width: 100%;
}

.ad-totals dt {
  color: var(--ms-color-text-secondary);
}

.ad-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ad-totals__sum {
  padding-top: var(--ms-space-2);
  border-top: 1px solid var(--ms-color-border);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ad-totals__sum dt {
  color: var(--ms-color-text);
}

/* Print: only the content of the page (order sheet, lists) */
@media print {
  .ad-sidebar,
  .ad-topbar,
  .ad-footer,
  .ad-scrim,
  .ad-toasts,
  .ad-page-head__actions,
  .ad-page-head__eyebrow,
  .ad-no-print,
  .ad-skip,
  .ad-toolbar,
  .ad-bulkbar,
  .ad-table-foot,
  .is-actions,
  .is-check,
  dialog {
    display: none !important;
  }

  .ad-main {
    margin: 0 !important;
  }

  .ad-content {
    padding: 0 !important;
  }

  body.ad-body {
    background: #fff;
  }

  .ad-card {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .ad-grid--detail {
    grid-template-columns: 1fr !important;
  }
}

/* Product option groups */
.ad-optgroup {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0;
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-gray-25);
  min-width: 0;
}

.ad-optgroup--new {
  border-style: dashed;
}

.ad-optgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
}

.ad-optgroup__head .ad-input {
  flex: 1 1 220px;
  width: auto;
}

.ad-optgroup > .ad-btn {
  justify-self: start;
}

.ad-opttable {
  width: 100%;
  border-collapse: collapse;
}

.ad-opttable th {
  padding: 0 var(--ms-space-2) var(--ms-space-1) 0;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  text-align: left;
}

.ad-opttable td {
  padding: 0 var(--ms-space-2) var(--ms-space-2) 0;
  vertical-align: middle;
}

.ad-opttable td:nth-child(2),
.ad-opttable td:nth-child(3) {
  width: 120px;
}

.ad-opttable td:last-child {
  width: 44px;
}

.ad-check--danger {
  color: var(--ms-color-danger);
}

.ad-check--danger svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 639px) {
  .ad-opttable td:nth-child(2),
  .ad-opttable td:nth-child(3) {
    width: 76px;
  }
}

/* Category tree */
.ad-tree__name {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding-left: calc(var(--depth, 0) * 20px);
}

.ad-tree__branch {
  color: var(--ms-color-text-placeholder);
}

.ad-bulkops td:first-child {
  width: 200px;
}

.ad-bulkops td:nth-child(2) {
  width: 180px;
}

.ad-bulkops td:last-child {
  width: auto;
}

.ad-infocard h2 {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  font-size: var(--ms-font-size-md);
}

.ad-infocard p {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
}

/* module-level action under the card text (site menu: start editing / reset); long labels wrap on phones */
.ad-infocard form {
  margin-top: var(--ms-space-4);
}

.ad-infocard form .ad-btn {
  max-width: 100%;
  height: auto;
  min-height: 40px;
  white-space: normal;
  text-align: center;
}

.ad-infocard--warning {
  border-color: var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
}

.ad-infocard--warning h2 svg {
  color: var(--ms-color-warning);
}

.ad-linklist {
  display: grid;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-3) !important;
}

.ad-linklist a {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ad-linklist svg {
  width: 14px;
  height: 14px;
}

.ad-help--info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ms-color-primary-text);
}

.ad-help--info svg {
  width: 14px;
  height: 14px;
}

/* stored select / radio value that is no longer an option (kept on save) */
.ad-help--warning {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--ms-amber-700);
}

.ad-help--warning svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.ad-empty__title {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
}

/* WG-14 audit: grid columns never wider than the card; tap targets at least 24 px (WCAG 2.5.8) */
.ad-section {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ad-section {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}

.ad-page-head__eyebrow a,
.ad-th-sort,
.ad-linklist a,
.ad-table td a.ad-num {
  min-height: 24px;
  align-items: center;
}

.ad-page-head__eyebrow a,
.ad-th-sort {
  display: inline-flex;
}

.ad-th-sort {
  min-width: 24px;
}

.ad-table td a.ad-num {
  display: inline-flex;
}

.ad-chip a {
  width: 24px;
  height: 24px;
  margin: -3px -6px -3px 0;
}

@media (max-width: 767px) {
  .ad-table--stack td a,
  .ad-filters-active > a {
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    min-height: 24px;
  }
}

/* ==========================================================================
   FAZ 2 — SEO screens
   ========================================================================== */
.ad-stack {
  display: grid;
  gap: var(--ms-space-5);
  align-content: start;
  min-width: 0;
}

.ad-seo-layout {
  display: grid;
  gap: var(--ms-space-5);
  align-items: start;
}

@media (min-width: 1200px) {
  .ad-seo-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .ad-seo-layout > .ad-stack {
    position: sticky;
    top: calc(var(--ms-admin-topbar-h) + var(--ms-space-5));
  }
}

/* Search-result preview (approximation, not Google's renderer) */
.ad-serp {
  max-width: 640px;
  margin: 0 0 var(--ms-space-6);
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  font-family: Arial, var(--ms-font-sans);
}

.ad-serp__site {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  font-size: 14px;
  line-height: 1.3;
  color: #202124;
}

.ad-serp__site > span:last-child {
  display: grid;
  min-width: 0;
}

.ad-serp__site [data-seo-serp-url] {
  overflow: hidden;
  color: #4d5156;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-serp__favicon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ms-color-primary-subtle);
  box-shadow: inset 0 0 0 1px var(--ms-color-border);
}

.ad-serp__title {
  margin: var(--ms-space-2) 0 var(--ms-space-1);
  color: #1a0dab;
  font-size: 20px;
  line-height: 1.3;
}

.ad-serp__desc {
  margin: 0;
  color: #4d5156;
  font-size: 14px;
  line-height: 1.58;
}

.ad-counter.is-over {
  color: var(--ms-color-warning);
  font-weight: var(--ms-font-weight-semibold);
}

/* Score ring */
.ad-score {
  --score: 0;
  --tone: var(--ms-color-primary);
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto var(--ms-space-3);
  border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--score) * 1%), var(--ms-gray-100) 0);
}

.ad-score::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--ms-color-surface);
}

.ad-score > span {
  position: relative;
}

.ad-score__value {
  font-size: 32px;
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ms-color-text);
}

.ad-score__max {
  position: absolute !important;
  bottom: 30px;
  font-size: var(--ms-font-size-xs);
  color: var(--ms-color-text-secondary);
}

.ad-score--success { --tone: var(--ms-color-success); }
.ad-score--warning { --tone: var(--ms-color-warning); }
.ad-score--danger { --tone: var(--ms-color-danger); }

.ad-seo-score .ad-help {
  text-align: center;
}

/* Check list */
.ad-seo-checks {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-4);
  padding: 0;
  list-style: none;
}

.ad-seo-checks li {
  display: flex;
  gap: var(--ms-space-3);
  align-items: flex-start;
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
}

.ad-seo-checks li > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.ad-seo-checks li div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ad-seo-checks li strong {
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-text);
  overflow-wrap: anywhere;
}

.ad-seo-checks li span {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  overflow-wrap: anywhere;
}

.ad-seo-checks li.is-ok > svg { color: var(--ms-color-success); }
.ad-seo-checks li.is-warn > svg { color: var(--ms-color-warning); }
.ad-seo-checks li.is-fail > svg { color: var(--ms-color-danger); }
.ad-seo-checks li.is-info > svg { color: var(--ms-color-text-secondary); }
.ad-seo-checks li.is-ok { background: var(--ms-color-success-subtle); }
.ad-seo-checks li.is-fail { background: var(--ms-color-danger-subtle); }

.ad-seo-checks li:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ms-gray-400);
}

.ad-seo-checks li.is-ok:not(:has(svg))::before { background: var(--ms-color-success); }
.ad-seo-checks li.is-warn:not(:has(svg))::before { background: var(--ms-color-warning); }
.ad-seo-checks li.is-fail:not(:has(svg))::before { background: var(--ms-color-danger); }

.ad-howto {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0;
  padding-left: var(--ms-space-6);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-body);
}

.ad-howto code {
  overflow-wrap: anywhere;
}

.ad-stat__value small {
  margin-left: 2px;
  font-size: var(--ms-font-size-md);
  color: var(--ms-color-text-secondary);
}

.ad-section__body {
  display: grid;
  gap: var(--ms-space-5);
  min-width: 0;
}

.ad-section__body .ad-serp {
  margin: 0;
}

.ad-score__inner {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.ad-score .ad-score__max {
  position: static !important;
}

/* links inside running text must not rely on colour alone (WCAG 1.4.1) */
.ad-dl--stack a,
.ad-table td > a:not([class]),
.ad-help a,
.ad-page-head p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ad-card__body p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   FAZ 3 — Analytics (palette validated with the dataviz validator: #1a66e5 / #0e9f8a on white, all checks pass)
   ========================================================================== */
.ad-content {
  --an-series-1: #1a66e5;
  --an-series-2: #0e9f8a;
}

.an-filter {
  margin-bottom: var(--ms-space-5);
}

.an-chart {
  position: relative;
  min-height: 220px;
}

.an-chart svg {
  display: block;
  max-width: 100%;
}

line.an-gridline {
  stroke: var(--ms-gray-100);
  stroke-width: 1;
}

line.an-axis {
  stroke: var(--ms-gray-300);
  stroke-width: 1;
}

.an-tick {
  fill: var(--ms-color-text-secondary);
  font-size: 11px;
  font-family: var(--ms-font-sans);
  font-variant-numeric: tabular-nums;
}

.an-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.an-line--1 { stroke: var(--an-series-1); }
.an-line--2 { stroke: var(--an-series-2); }

.an-dot {
  stroke: var(--ms-color-surface);
  stroke-width: 2;
}

.an-dot.an-line--1 { fill: var(--an-series-1); }
.an-dot.an-line--2 { fill: var(--an-series-2); }

.an-cross {
  stroke: var(--ms-gray-400);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.an-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-md);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-xs);
  pointer-events: none;
}

.an-tip[hidden] {
  display: none;
}

.an-tip strong,
.an-tip b {
  color: var(--ms-color-text);
}

.an-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  margin: 0 0 var(--ms-space-3);
  padding: 0;
  list-style: none;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.an-legend li,
.an-tip span {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.an-key {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.an-key--1 { background: var(--an-series-1); }
.an-key--2 { background: var(--an-series-2); }

.an-table {
  margin-top: var(--ms-space-4);
}

.an-table summary,
.an-defs summary {
  min-height: 24px;
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  cursor: pointer;
}

.an-defs {
  margin-top: var(--ms-space-5);
}

.an-defs summary {
  padding: var(--ms-space-4) var(--ms-space-5);
}

.an-grid {
  display: grid;
  gap: var(--ms-space-5);
  margin-top: var(--ms-space-5);
}

@media (min-width: 1100px) {
  .an-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* a short report card keeps its height instead of a tall empty box */
  }
}

/* Horizontal bars: single hue, values in text colour */
.an-bars {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0 0 var(--ms-space-3);
  padding: 0;
  list-style: none;
}

.an-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ms-space-1) var(--ms-space-3);
  align-items: center;
  font-size: var(--ms-font-size-sm);
}

.an-bars__label {
  min-width: 0;
  overflow: hidden;
  color: var(--ms-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-bars__value {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.an-bars__track {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ms-gray-100);
}

.an-bars__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: var(--an-series-1);
}

@media (forced-colors: active) {
  .an-bars__fill,
  .an-key {
    background: CanvasText;
  }
}

.an-bars__label { grid-row: 1; grid-column: 1; }
.an-bars__value { grid-row: 1; grid-column: 2; }
.an-bars__track { grid-row: 2; }

/* the chart SVG must not inherit the admin icon size rules */
.ad-content .an-chart > svg {
  width: 100%;
  height: auto;
  color: inherit;
}

/* FAZ 2–3 audit fixes (320–390 px): inline forms wrap, in-card links are 24 px targets, preformatted text wraps */
.ad-inline-form {
  flex-wrap: wrap;
}

.ad-inline-form .ad-input {
  flex: 1 1 200px;
  min-width: 0;
}

.ad-stat__meta a,
.ad-list__title {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.ad-prose-box.ad-mono {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ad-fields > .ad-field {
  min-width: 0;
}

/* PayTR compliance: documents accepted with an order (order detail) */
.ad-consents {
  display: grid;
  gap: var(--ms-space-3);
}

.ad-consents summary {
  min-height: 24px;
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  cursor: pointer;
}

.ad-consents .ad-prose-box {
  max-height: 320px;
  margin-top: var(--ms-space-2);
  overflow: auto;
  font-size: var(--ms-font-size-sm);
}

/* ---------- V5: product / solution content management (lists, preview, facts, gallery order) ---------- */
.ad-badge--muted {
  color: var(--ms-color-text-tertiary);
}

.ad-warnlist {
  margin: var(--ms-space-2) 0 0;
  padding-left: 1.1em;
  font-size: var(--ms-font-size-sm);
}

.ad-hint {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-sm);
  color: var(--ms-color-text-secondary);
}

.ad-hint > summary {
  cursor: pointer;
  color: var(--ms-color-primary-text);
  font-weight: var(--ms-font-weight-medium);
}

.ad-hint ul {
  display: grid;
  gap: 4px;
  margin: var(--ms-space-2) 0 0;
  padding-left: 1.2em;
}

.ad-listbox {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ad-listbox > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--ms-space-1);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ad-listbox > div {
  display: grid;
  gap: var(--ms-space-2);
  justify-items: start;
}

.ad-listbox > div[hidden] {
  display: none;
}

.ad-listbox > .ad-segmented {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
}

.ad-autolist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-autolist li {
  padding: 2px 10px;
  border: 1px solid var(--ms-color-border);
  border-radius: 999px;
  background: var(--ms-color-bg-subtle);
  font-size: var(--ms-font-size-xs);
}

.ad-listrows {
  display: grid;
  gap: var(--ms-space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ad-row;
}

.ad-listrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ms-space-2);
  align-items: center;
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-25);
  counter-increment: ad-row;
}

.ad-listrow__handle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-listrow__handle::before {
  content: counter(ad-row) ".";
  min-width: 1.6em;
  text-align: right;
}

.ad-listrow__handle svg {
  width: 14px;
  height: 14px;
}

.ad-listrow__fields {
  display: grid;
  gap: var(--ms-space-2);
  min-width: 0;
}

@media (min-width: 900px) {
  .ad-listrow__fields--feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 190px;
  }

  .ad-listrow__fields--module {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 180px;
    grid-auto-flow: dense;
  }

  .ad-listrow__fields--module textarea {
    grid-column: 1 / -1;
  }

  .ad-listrow__fields--pair {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  }

  .ad-listrow__fields--spec {
    grid-template-columns: 170px minmax(0, 0.8fr) minmax(0, 1.4fr);
  }

  .ad-listrow__fields--scenario {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ad-listrow__fields textarea {
  min-height: 72px;
}

.ad-listrow__tools {
  display: inline-flex;
  gap: 2px;
}

@media (max-width: 599px) {
  .ad-listrow {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-listrow__handle {
    display: none;
  }

  .ad-listrow__tools {
    justify-content: flex-end;
  }
}

.ad-factbox {
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-bg-subtle);
}

.ad-factbox__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-2);
  font-weight: var(--ms-font-weight-semibold);
}

.ad-factbox__title svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-primary);
}

.ad-factbox dl,
.ad-pv__facts {
  display: grid;
  gap: 0;
  margin: 0 0 var(--ms-space-2);
}

.ad-factbox dl > div,
.ad-pv__facts > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--ms-space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-sm);
}

.ad-factbox dt,
.ad-pv__facts dt {
  color: var(--ms-color-text-secondary);
}

.ad-factbox dd,
.ad-pv__facts dd {
  margin: 0;
  color: var(--ms-color-text);
}

@media (max-width: 599px) {
  .ad-factbox dl > div,
  .ad-pv__facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.ad-optgroup__kind {
  width: auto;
  min-width: 180px;
}

.ad-gallery__item.ad-gallery__item--ordered {
  display: grid;
  aspect-ratio: auto;
  overflow: visible;
  background: var(--ms-color-surface);
}

.ad-gallery__item--ordered img {
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--ms-radius-md) var(--ms-radius-md) 0 0;
}

.ad-gallery__no {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgb(11 16 51 / 0.75);
  color: #fff;
  font-size: var(--ms-font-size-2xs);
}

.ad-gallery__tools {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  padding: 6px;
}

.ad-gallery__alt {
  min-height: 32px;
  font-size: var(--ms-font-size-xs);
}

.ad-gallery__module {
  min-height: 32px;
  font-size: var(--ms-font-size-xs);
}

/* preview */
.ad-preview-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-4);
}

.ad-preview[aria-busy="true"] {
  opacity: 0.55;
}

.ad-pv {
  display: grid;
  gap: var(--ms-space-3);
}

.ad-pv__grid {
  display: grid;
  gap: var(--ms-space-3);
}

@media (min-width: 900px) {
  .ad-pv__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.ad-pv__block {
  min-width: 0;
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  font-size: var(--ms-font-size-sm);
}

.ad-pv__block h3 {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-2);
  font-size: var(--ms-font-size-md);
}

.ad-pv__block h3 svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-warning);
}

.ad-pv__hero {
  background: linear-gradient(135deg, var(--ms-color-primary-subtle), var(--ms-color-surface));
}

.ad-pv__title {
  margin: 4px 0;
  font-size: var(--ms-font-size-lg);
}

.ad-pv__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-pv__list,
.ad-pv__toc {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-pv__list li {
  display: flex;
  gap: var(--ms-space-2);
  align-items: flex-start;
}

.ad-pv__list svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ms-color-primary);
}

.ad-pv__toc {
  padding-left: 1.4em;
  list-style: decimal;
}

.ad-pv__toc code {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
}

.ad-pv__toc small {
  color: var(--ms-color-text-secondary);
}

.ad-pv__group {
  color: var(--ms-color-text-tertiary);
}

.ad-pv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-pv__chips li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
}

.ad-pv__warnings {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-pv__warnings li {
  padding: 8px 10px;
  border-left: 3px solid var(--ms-color-border-strong);
  border-radius: 4px;
  background: var(--ms-color-bg-subtle);
}

.ad-pv__warnings li.is-danger {
  border-left-color: var(--ms-color-danger);
  background: var(--ms-color-danger-subtle);
}

.ad-pv__warnings li.is-warning {
  border-left-color: var(--ms-color-warning);
  background: var(--ms-color-warning-subtle);
}

.ad-pv__ok {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0;
  color: var(--ms-color-success);
  font-weight: var(--ms-font-weight-medium);
}

.ad-pv__ok svg {
  width: 18px;
  height: 18px;
}

/* content audit list (Katalog → İçerik denetimi) */
.ad-audit {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-audit > li {
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ad-audit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-2);
}

.ad-audit__head h2 {
  margin: 0;
  font-size: var(--ms-font-size-md);
}

.ad-listrow--image {
  grid-template-columns: 96px minmax(0, 1fr) auto;
}

.ad-listrow__thumb {
  width: 96px;
  height: 60px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  object-fit: cover;
  object-position: top;
}

@media (max-width: 599px) {
  .ad-listrow--image {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   SEO Performans Merkezi (Search Console archive screens) — reuses the FAZ 3 chart colours
   ========================================================================== */
.sp-source {
  align-items: flex-start;
}

.sp-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-4);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.sp-summary {
  margin: 0 0 var(--ms-space-5);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-left: 3px solid var(--an-series-1);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
}

.sp-fresh {
  align-self: end;
  min-height: 40px;
}

.sp-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ms-space-5);
}

.sp-chart-box {
  margin: 0;
  min-width: 0;
}

.sp-chart-box__title {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-color-text-heading);
  font-size: var(--ms-font-size-sm);
  font-weight: 600;
}

.sp-chart {
  min-height: 180px;
}

.sp-grid .ad-card {
  min-width: 0;
}

.sp-rule {
  margin: 0 var(--ms-space-4) var(--ms-space-3);
}

.sp-url {
  max-width: 34ch;
  overflow-wrap: anywhere;
}

.sp-gain--up { color: var(--ms-green-700); font-weight: 600; }
.sp-gain--down { color: var(--ms-red-700); font-weight: 600; }
.sp-gain--flat { color: var(--ms-color-text-secondary); }

.sp-status {
  white-space: nowrap;
}

.sp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ms-space-3);
  margin: 0;
}

.sp-kpis div {
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
}

.sp-kpis dt {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.sp-kpis dd {
  margin: 2px 0 0;
  color: var(--ms-color-text-heading);
  font-size: var(--ms-font-size-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sp-provider {
  display: grid;
  gap: var(--ms-space-2);
}

@media (max-width: 599px) {
  .sp-url {
    max-width: none;
  }
}

.ad-btn--sm {
  min-height: 32px;
  padding: 0 var(--ms-space-3);
  font-size: var(--ms-font-size-xs);
}

.ad-table tr.is-muted td {
  color: var(--ms-color-text-secondary);
}

/* ==========================================================================
   FAZ E — e-mail template editor
   ========================================================================== */
.et-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: var(--ms-space-5);
  align-items: start;
}

@media (max-width: 1023px) {
  .et-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.et-vars {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0;
  padding-left: var(--ms-space-4);
  list-style: none;
}

.et-vars code {
  overflow-wrap: anywhere;
  font-size: var(--ms-font-size-sm);
}

.et-preview {
  display: block;
  width: 100%;
  min-height: 560px;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: #ffffff;
}

.et-text {
  max-height: 320px;
  overflow: auto;
  padding: var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-gray-50);
  font-size: var(--ms-font-size-xs);
  white-space: pre-wrap;
}

/* FAZ F — campaign form: the fieldset only disables the inputs once sending started */
.ek-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* FAZ F — accessibility: checklists with comfortable touch targets, underlined links in how-to lists */
.pa-checklist {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-3) 0;
}

.pa-checklist .ad-check {
  align-items: flex-start;
  min-height: 32px;
}

.pa-checklist .ad-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.ad-howto a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* V7 — Yönetici yetkileri: permission columns wrap their headings so the account table fits a tablet width */
.yp-table thead th {
  white-space: normal;
  line-height: 1.3;
  padding-block: var(--ms-space-2);
}

@media (min-width: 768px) {
  .yp-table td:not(:first-child),
  .yp-table thead th:not(:first-child) {
    padding-inline: var(--ms-space-2);
    text-align: center;
  }
}

/* V8 — İşlem geçmişi: compact filter grid, time on a second line, flagged rows (failed / denied), before/after table */
.ad-ig__filters .ad-toolbar__field .ad-input[type="date"] {
  min-width: 150px;
}

.ad-ig .ad-ig__when {
  display: inline-grid;
  justify-items: start;
  gap: 2px;
}

.ad-ig__time {
  display: block;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ad-ig__user {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .ad-ig__user {
    white-space: nowrap;
  }
}

.ad-ig tbody tr.is-flagged td:first-child {
  box-shadow: inset 3px 0 0 var(--ms-color-danger);
}

.ad-ig__summary {
  margin: 0 0 var(--ms-space-4);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
}

.ad-diff td {
  vertical-align: top;
}

.ad-diff__old,
.ad-diff__new {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: var(--ms-radius-sm);
  overflow-wrap: anywhere;
}

.ad-diff__old {
  background: var(--ms-color-danger-subtle);
  color: var(--ms-color-text-body);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ms-color-danger) 55%, transparent);
}

.ad-diff__new {
  background: var(--ms-color-success-subtle);
  color: var(--ms-color-text);
}

/* V8 — 404 raporu: long addresses wrap, active sort column, sampled User-Agent disclosure, compact day table */
.ad-s4__path {
  overflow-wrap: anywhere;
}

h1.ad-s4__path {
  font-size: var(--ms-font-size-xl, 1.375rem);
}

.ad-th-sort.is-active {
  color: var(--ms-color-text);
}

.ad-s4__ua {
  margin-top: 4px;
  font-size: var(--ms-font-size-xs);
}

.ad-s4__ua summary {
  cursor: pointer;
  color: var(--ms-color-text-secondary);
}

.ad-s4__ua code {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ad-s4__daily td,
.ad-s4__daily th {
  padding-block: 6px;
}

.ad-s4__note {
  margin: var(--ms-space-3) var(--ms-space-4) 0;
}

.ad-s4__filters .ad-toolbar__field .ad-input[type="date"] {
  min-width: 150px;
}

/* V8 — İki adımlı doğrulama: recovery codes grid, setup key */
.ad-ta__codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ms-space-2);
  margin: var(--ms-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.ad-ta__codes li {
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px dashed var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  font-size: var(--ms-font-size-md);
  text-align: center;
}

.ad-ta__key code {
  display: inline-block;
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  font-size: var(--ms-font-size-md);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.ad-ta__form {
  max-width: 420px;
  margin-top: var(--ms-space-4);
}

.ad-ta__steps {
  margin-bottom: var(--ms-space-4);
}

/* V8 — plain bullet list of facts inside a card (no scrolling region) */
.ad-factlist {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-4);
  padding-left: 1.2em;
  color: var(--ms-color-text-body);
}