/**
 * AdminEase — Main dashboard stylesheet (PrecisionWP design system).
 *
 * The class structure mirrors the original markup so existing PHP partials and
 * jQuery selectors keep working unchanged. Visuals are rebuilt on top of the
 * shared tokens defined in PrecisionWP.css.
 */


/* ──────────────────────────────────────────────────────────────────────────
   Page chrome — dim WP admin around our app
   ──────────────────────────────────────────────────────────────────────── */
body.toplevel_page_adminease {
    background: var(--pwp-paper);
}

.toplevel_page_adminease #wpcontent {
    padding-left: 0;
}

.toplevel_page_adminease #wpbody-content {
    padding-bottom: 0;
}

.toplevel_page_adminease #wpfooter {
    display: none;
}

.toplevel_page_adminease .wrap {
    margin: 0;
}

.toplevel_page_adminease .update-nag,
.toplevel_page_adminease .notice {
    margin: var(--pwp-space-3) var(--pwp-space-5);
    border-radius: var(--pwp-radius);
}

.toplevel_page_adminease main {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--pwp-space-8) var(--pwp-space-10);
}


/* ──────────────────────────────────────────────────────────────────────────
   Root container
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page,
.adminease-admin-page * {
    box-sizing: border-box;
}

.adminease-admin-page {
    margin: 0;
    color: var(--pwp-ink);
    font-family: var(--pwp-font-sans);
    font-size: var(--pwp-text-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--pwp-paper);
}

.adminease-admin-page a {
    color: var(--pwp-moss);
    text-decoration: none;
    transition: var(--pwp-transition);
}

.adminease-admin-page a:hover,
.adminease-admin-page a:focus {
    color: var(--pwp-moss-glow);
    text-decoration: underline;
}

.adminease-admin-page p {
    margin: 0 0 var(--pwp-space-3) 0;
    color: var(--pwp-ink-2);
    font-size: var(--pwp-text-body);
}

.adminease-admin-page p.text-muted {
    color: var(--pwp-muted);
}

.adminease-admin-page h1,
.adminease-admin-page h2,
.adminease-admin-page h3,
.adminease-admin-page h4 {
    color: var(--pwp-ink);
    font-family: var(--pwp-font-sans);
    font-weight: 600;
    letter-spacing: var(--pwp-tracking-tight);
    margin: 0;
}

.adminease-admin-page h1 {
    font-size: var(--pwp-text-2xl);
    font-weight: 500;
    line-height: 1.05;
}

.adminease-admin-page h2 {
    font-size: var(--pwp-text-xl);
    font-weight: 500;
    margin: 0 0 var(--pwp-space-3) 0;
}

.adminease-admin-page .pwp-section-title {
    margin: var(--pwp-space-5) 0 var(--pwp-space-3) 0;
}

.adminease-admin-page .pwp-section-title h2 {
    margin: 0;
}

.adminease-admin-page h3 {
    font-size: var(--pwp-text-lg);
    margin: var(--pwp-space-5) 0 var(--pwp-space-3) 0;
}

.adminease-admin-page h4 {
    font-size: var(--pwp-text-body);
    margin: var(--pwp-space-4) 0 var(--pwp-space-2) 0;
}

.adminease-admin-page em {
    font-family: var(--pwp-font-sans);
    font-style: italic;
    font-weight: 400;
    color: var(--pwp-moss);
}

.adminease-admin-page strong {
    color: var(--pwp-ink);
    font-weight: 600;
}

.adminease-admin-page hr {
    border: 0;
    border-top: 1px solid var(--pwp-line-2);
    margin: var(--pwp-space-5) 0;
}

.adminease-admin-page pre {
    position: relative;
    height: 400px;
    max-height: 900px;
    overflow: auto;
    margin: 0;
    padding: var(--pwp-space-4);
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line-2);
    border-left: 3px solid var(--pwp-moss);
    border-radius: var(--pwp-radius);
    color: var(--pwp-ink-2);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-sm);
    line-height: 1.6;
    resize: vertical;
}

.adminease-admin-page ::selection {
    background: var(--pwp-moss);
    color: var(--pwp-paper);
}


/* ──────────────────────────────────────────────────────────────────────────
   Lists (panels)
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page ul {
    position: relative;
    margin: var(--pwp-space-2) 0;
    padding: 0;
    list-style-type: none;
}

.adminease-admin-page ul li {
    position: relative;
    margin: 0;
    padding: 0 0 0 var(--pwp-space-6);
    font-size: var(--pwp-text-body);
    line-height: 1.5;
    color: var(--pwp-ink-2);
}

.adminease-admin-page ul li::before {
    content: "•";
    position: absolute;
    top: -5px;
    left: 5px;
    color: var(--pwp-moss);
    font-size: var(--pwp-text-lg);
    line-height: 1.5;
}

.adminease-admin-page ul li:not(:last-child) {
    margin-bottom: var(--pwp-space-3);
}

.adminease-admin-page .form-card ul li {
    position: relative;
}

.adminease-admin-page .form-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: var(--pwp-moss-bg);
    border: 1px solid var(--pwp-moss-border);
    border-radius: var(--pwp-radius-sm);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    color: transparent;
    font-size: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   Spacing utilities (kept for backwards compatibility)
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .m-0 {
    margin: 0;
}

.adminease-admin-page .m-t-10 {
    margin-top: var(--pwp-space-3);
}

.adminease-admin-page .m-b-0 {
    margin-bottom: 0;
}

.adminease-admin-page .m-b-5 {
    margin-bottom: var(--pwp-space-1);
}

.adminease-admin-page .m-b-10 {
    margin-bottom: var(--pwp-space-3);
}

.adminease-admin-page .m-b-20 {
    margin-bottom: var(--pwp-space-5);
}

.adminease-admin-page .m-b-30 {
    margin-bottom: var(--pwp-space-7);
}

.adminease-admin-page .p-t-20 {
    padding-top: var(--pwp-space-5);
}

.adminease-admin-page .p-b-20 {
    padding-bottom: var(--pwp-space-5);
}

.adminease-admin-page .p-0 {
    padding: 0;
}

.adminease-admin-page .gap-10 {
    gap: var(--pwp-space-3);
}

.adminease-admin-page .gap-20 {
    gap: var(--pwp-space-5);
}

.adminease-admin-page .ae-col-flush {
    margin-right: -1rem;
    margin-left: -1rem;
}

.adminease-admin-page .flex {
    display: flex;
}

.adminease-admin-page .inline-flex {
    display: inline-flex;
}

.adminease-admin-page .justify-content-between {
    justify-content: space-between;
}

.adminease-admin-page .justify-content-center {
    justify-content: center;
}

.adminease-admin-page .justify-space-between {
    justify-content: space-between;
}

.adminease-admin-page .align-center {
    align-items: center;
}

.adminease-admin-page .align-items-center {
    align-items: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   Header — brand bar (row 1) + tabs bar (row 2). Mirrors the BackupEase
   reference: owl mark + plugin name + version chip on the left, status
   pill on the right; tabs sit on their own row below.
   Scoped to direct child of .adminease-admin-page so it doesn't leak into the
   <header class="section-header"> inside dashboard panels.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page > header {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: rgba(var(--pwp-paper-rgb), 0.85);
    border-bottom: 1px solid var(--pwp-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.adminease-admin-page > header.sticky {
    box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.5);
}


/* ──────────────────────────────────────────────────────────────────────────
   Version & status chips
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .version,
.adminease-admin-page .form-card-title > span.version {
    display: inline-flex;
    align-items: center;
    top: 0;
    padding: var(--pwp-space-1) var(--pwp-space-2);
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius-sm);
    color: var(--pwp-muted);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    line-height: 1;
}

.adminease-admin-page .form-card-title > span.version small {
    font-size: inherit;
}

.adminease-admin-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pwp-space-2);
    padding: var(--pwp-space-1) var(--pwp-space-3) var(--pwp-space-1) var(--pwp-space-2);
    margin-bottom: var(--pwp-space-2);
    background: var(--pwp-moss-bg);
    border: 1px solid var(--pwp-moss-border);
    border-radius: var(--pwp-radius-pill);
    color: var(--pwp-moss);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.adminease-admin-page .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pwp-moss);
}


/* ──────────────────────────────────────────────────────────────────────────
   Panels (cards)
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .form-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    margin-bottom: var(--pwp-space-6);
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius-xl);
    overflow: hidden;
    box-shadow: var(--pwp-shadow-md);
    transition: var(--pwp-transition);
}

.adminease-admin-page .form-card .form-card-head {
    padding: var(--pwp-space-4) var(--pwp-space-6);
    background: transparent;
    border-radius: var(--pwp-radius-xl) var(--pwp-radius-xl) 0 0;
    border-bottom: 1px solid var(--pwp-line);
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);;
}

.adminease-admin-page .form-card .form-card-head svg,
.adminease-admin-page .form-card .form-card-head .dashicons {
    width: 15px;
    height: 15px;
    color: var(--pwp-moss);
    flex-shrink: 0;
}

.adminease-admin-page .form-card .form-card-head h3 {
    margin: 0;
    font-size: var(--pwp-text-base);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--pwp-ink);
}

/* Welcome cards on the dashboard tab — flat, no header separator line, no
   shadow. Mirrors the BackupEase reference cards. */
.adminease-admin-page #tab-dashboard .form-card {
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius-xl);
    margin-bottom: 0;
}

.adminease-admin-page #tab-dashboard .form-card .form-card-head {
    padding: var(--pwp-space-4) var(--pwp-space-6);
    border-bottom: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-xl) var(--pwp-radius-xl) 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adminease-admin-page[data-theme="dark"] #tab-dashboard .form-card .form-card-head {
    background: transparent;
}

.adminease-admin-page[data-theme="light"] #tab-dashboard .form-card .form-card-head {
    background: rgba(var(--pwp-moss-rgb), 0.08);
}

@media (prefers-color-scheme: dark) {
    .adminease-admin-page:not([data-theme="light"]) #tab-dashboard .form-card .form-card-head {
        background: transparent;
    }
}

@media (prefers-color-scheme: light) {
    .adminease-admin-page:not([data-theme="dark"]) #tab-dashboard .form-card .form-card-head {
        background: rgba(var(--pwp-moss-rgb), 0.08);
    }
}

.adminease-admin-page #tab-dashboard .form-card .form-card-head .t-eyebrow svg {
    width: 12px;
    height: 12px;
}

.adminease-admin-page #tab-dashboard .form-card .form-card-body {
    padding: var(--pwp-space-5) var(--pwp-space-6) var(--pwp-space-5) var(--pwp-space-6);
    gap: var(--pwp-space-2);
}

/* Dashboard panel content has nested .row > .col-xs-12 wrappers from the
   flexboxgrid markup. Flatten them visually so the body content reads as
   if it were directly inside .form-card-body. */
.adminease-admin-page #tab-dashboard .form-card .form-card-body > .row,
.adminease-admin-page #tab-dashboard .form-card .form-card-body > .row > [class*="col-"] {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: block;
    width: 100%;
}

.adminease-admin-page #tab-dashboard .form-card .form-card-head > .row,
.adminease-admin-page #tab-dashboard .form-card .form-card-head > .row > [class*="col-"] {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: block;
    width: 100%;
}

.adminease-admin-page #tab-dashboard .form-card .row:hover {
    background: transparent;
}

/* Vertical gap between dashboard panel rows (3-card row + 2-card row). */
.adminease-admin-page #tab-dashboard > .row {
    margin-bottom: var(--pwp-space-5);
}

.adminease-admin-page #tab-dashboard > .row:last-child {
    margin-bottom: 0;
}

/* And vertical gap between cards within a row when they wrap onto a
   second line (mobile). */
.adminease-admin-page #tab-dashboard > .row > [class*="col-"] {
    margin-bottom: var(--pwp-space-5);
}

.adminease-admin-page #tab-dashboard > .row > [class*="col-"]:last-child {
    margin-bottom: 0;
}

.pwp-app .pwp-form-card-body {
    padding: 0 22px 12px 22px;
}

@media (min-width: 1025px) {
    .adminease-admin-page #tab-dashboard > .row {
        margin-bottom: 0;
    }

    .adminease-admin-page #tab-dashboard > .row > [class*="col-"]:last-child {
        margin-bottom: var(--pwp-space-5);
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Section header — flat heading on the page background (no panel chrome).
   Used for the "Dashboard" heading on tab-dashboard so it matches the
   "Backup Overview" pattern in the BackupEase reference.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .section-head {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);
    padding: 0;
    margin: 0 0 var(--pwp-space-5) 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.adminease-admin-page .section-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--pwp-moss);
    flex-shrink: 0;
}

.adminease-admin-page .section-head-title {
    margin: 0;
    font-family: var(--pwp-font-sans);
    font-size: var(--pwp-text-2xl);
    font-weight: 500;
    letter-spacing: var(--pwp-tracking-tight);
    color: var(--pwp-ink);
    line-height: 1.1;
}

.adminease-admin-page .section-head .version {
    margin-left: var(--pwp-space-1);
}

/* Mono eyebrow label (matches the BackupEase reference) — small icon +
   uppercase mono text. Render with a <span class="t-eyebrow"><svg/>…</span>. */
.adminease-admin-page .t-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pwp-space-2);
    margin: var(--pwp-space-3) 0 0 0;
    color: var(--pwp-muted);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-xs);
    font-weight: 500;
    letter-spacing: var(--pwp-tracking-upper);
    text-transform: uppercase;
}

/* Letter-spacing pulls Hebrew and Arabic letters apart. */
[dir="rtl"] .adminease-admin-page .t-eyebrow {
    letter-spacing: normal;
}

.adminease-admin-page .t-eyebrow .ae-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.adminease-admin-page .form-card-title {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);
    margin: 0;
    font-size: var(--pwp-text-xl);
    font-weight: 600;
    letter-spacing: var(--pwp-tracking-tight);
    color: var(--pwp-ink);
}

.adminease-admin-page .form-card-title > .ae-icon {
    color: var(--pwp-moss);
    width: 20px;
    height: 20px;
}

.adminease-admin-page .form-card-title > span:not(.version) {
    position: relative;
    top: 0;
    font-size: inherit;
}

.adminease-admin-page .form-card .form-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: var(--pwp-space-3);
    padding: 0;
}

.adminease-admin-page .form-card .form-card-body > .row:first-child {
    margin-top: 0;
}

.adminease-admin-page .dashboard .form-card h2 {
    font-size: var(--pwp-text-xl);
}

/* Welcome / dashboard intro panels — softer accent */
.adminease-admin-page #tab-dashboard .form-card {
    background: linear-gradient(180deg, var(--pwp-surface), var(--pwp-paper));
}


/* ──────────────────────────────────────────────────────────────────────────
   Pro Features Grid
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .pro-features-grid {
    display: flex;
    flex-direction: column;
}

.adminease-admin-page .pro-feature-category {
    padding: var(--pwp-space-4) 0 var(--pwp-space-2) 0;
    border-bottom: 1px solid var(--pwp-line);
    margin-bottom: var(--pwp-space-2);
}

.adminease-admin-page .pro-feature-category:first-child {
    padding-top: 0;
}

.adminease-admin-page .pro-feature-category .t-eyebrow {
    gap: var(--pwp-space-2);
}

.adminease-admin-page .pro-feature-row {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);
    padding: var(--pwp-space-2) 0;
    border-bottom: 1px solid var(--pwp-line);
}

.adminease-admin-page .pro-feature-row:last-child {
    border-bottom: none;
}

.adminease-admin-page .pro-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--pwp-moss-bg);
    border: 1px solid var(--pwp-moss-border);
    border-radius: var(--pwp-radius-sm);
    color: var(--pwp-moss);
}

.adminease-admin-page .pro-feature-icon svg {
    width: 14px;
    height: 14px;
}

.adminease-admin-page .pro-feature-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.adminease-admin-page .pro-feature-info strong {
    font-size: var(--pwp-text-sm);
    font-weight: 600;
    color: var(--pwp-ink);
    line-height: 1.3;
}

.adminease-admin-page .pro-feature-info span {
    font-size: var(--pwp-text-xs);
    color: var(--pwp-muted);
    line-height: 1.3;
}


/* ──────────────────────────────────────────────────────────────────────────
   Forms
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page form {
    margin: 0;
}

.adminease-admin-page form .pwp-field-group {
    position: relative;
    margin-bottom: var(--pwp-space-4);
}

.adminease-admin-page form .pwp-field-group:last-child {
    margin-bottom: 0;
}

/* A warning inside a field description keeps the amber box but reads calmly: normal text colour and room above it. */
.adminease-admin-page form .pwp-field-desc .pwp-alert,
.adminease-admin-page .field-explanation .pwp-alert {
    margin-top: var(--pwp-space-3);
    font-weight: 400;
}

.adminease-admin-page form .pwp-field-desc .pwp-alert-warn,
.adminease-admin-page .field-explanation .pwp-alert-warn {
    color: var(--pwp-ink-2);
}

/* The bottom margin only separates a field from the next visible one. Smaller switches add their own space, and hidden ones still count as siblings. */
.adminease-admin-page form .pwp-field-group:has(+ .form-group-child) {
    margin-bottom: 0;
}

/* The first smaller switch sits a little way below the field it belongs to. */
.adminease-admin-page form .pwp-field-group:not(.form-group-child) + .pwp-field-group.form-group-child {
    margin-top: var(--pwp-space-4);
}

/* A smaller switch under a main switch hangs off it on one unbroken line, with room between each one. */
.adminease-admin-page form .pwp-field-group.form-group-child {
    margin-bottom: 0;
    padding-block: var(--pwp-space-3);
    padding-inline-start: var(--pwp-space-5);
    border-inline-start: 2px solid var(--pwp-line);
}

.adminease-admin-page form .pwp-field-group .flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pwp-space-5);
}

.adminease-admin-page form .pwp-field-group .flex > .col {
    flex: 1;
}

@media (min-width: 1024px) {
    .adminease-admin-page form .pwp-field-group.ae-color-field {
        float: left;
        box-sizing: border-box;
        width: 33.3334%;
        padding-right: 16px;
    }

    .adminease-admin-page form .pwp-field-group.ae-color-field-text {
        padding-right: 0;
    }

    .adminease-admin-page form .ae-color-field-text ~ .pwp-field-group {
        clear: both;
    }
}

/* The field rule that used to sit here (min-height: 36px, 8px/12px padding, plus
   a restatement of the design system's background/border/radius/font) has been
   removed. Every one of its declarations duplicated .pwp-app's own field rule,
   and its sizing half never applied in the first place: PrecisionWP.css carried
   a `input:not(...)x4` selector at (0,5,1) that outranked this (0,3,1) block, so
   AdminEase fields rendered at the design system's metric regardless. That
   selector is gone and the shared rule is now the single source of field height
   for AdminEase, BackupEase and Discount Master alike.

   If AdminEase ever genuinely needs a different field size, add it back as a
   sizing-only rule - do not re-copy the colours. */

.adminease-admin-page input:not([type="checkbox"]):not([type="radio"]):not(.choices__input):focus,
.adminease-admin-page textarea:focus,
.adminease-admin-page select:focus {
    border-color: var(--pwp-moss);
    box-shadow: 0 0 0 3px var(--pwp-moss-bg);
    outline: none;
}

/* Override .wp-core-ui select:focus that paints text #0a4b78 (deep blue). */
.wp-core-ui .adminease-admin-page select:focus,
.adminease-admin-page select:focus,
body.toplevel_page_adminease .adminease-admin-page select:focus,
body.wp-core-ui .adminease-admin-page select:focus {
    color: var(--pwp-ink);
    border-color: var(--pwp-moss);
    box-shadow: 0 0 0 3px var(--pwp-moss-bg);
}

/* Reset native <select> rendering so wp-admin's chevron + our chevron don't
   stack. We supply a single moss chevron via background-image. */
.adminease-admin-page select,
.adminease-admin-page select#bulk-action-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--pwp-space-8);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--pwp-space-3) center !important;
    background-size: 14px !important;
}

.adminease-admin-page select::-ms-expand {
    display: none;
}

/* in light mode make it black text */
.adminease-admin-page[data-theme="light"] select:disabled {
    color: var(--pwp-ink-2);
}

.adminease-admin-page select option {
    background: var(--pwp-surface);
    color: var(--pwp-ink);
}

.adminease-admin-page textarea {
    min-height: 96px;
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-sm);
    resize: vertical;
}

.adminease-admin-page ::placeholder {
    color: var(--pwp-muted-2);
}

.adminease-admin-page form .child-field-description {
    display: none;
}

.adminease-admin-page form p.description {
    margin: 0;
    color: var(--pwp-muted);
    font-size: var(--pwp-text-base);
    line-height: 1.6;
}

.adminease-admin-page form .adminease-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--pwp-space-2);
}

.adminease-admin-page form .adminease-switch > .adminease-switch-label {
    display: inline-flex;
    margin-bottom: 0;
    flex: 1;
}

.adminease-admin-page form label small,
.adminease-admin-page form .adminease-switch-label small {
    color: var(--pwp-muted);
    font-weight: 400;
}

/* Stronger specificity to win against wp-admin defaults. */
body.toplevel_page_adminease .adminease-admin-page form label,
body.toplevel_page_adminease .adminease-admin-page form .adminease-switch-label {
    color: var(--pwp-cream);
}

body.toplevel_page_adminease .adminease-admin-page form p.description {
    color: var(--pwp-ink-2);
}

body.toplevel_page_adminease .adminease-admin-page form p.description code {
    color: var(--pwp-moss);
}

.adminease-admin-page form label:not(.adminease-switch) .clear-selected-choices,
.adminease-admin-page form label:not(.adminease-switch) .select-all-choices {
    float: right;
    margin-left: var(--pwp-space-5);
    color: var(--pwp-moss);
    font-size: var(--pwp-text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.adminease-admin-page form label:not(.adminease-switch) .clear-selected-choices:hover,
.adminease-admin-page form label:not(.adminease-switch) .select-all-choices:hover {
    color: var(--pwp-moss-glow);
    text-decoration: underline;
}

.adminease-admin-page form .errors {
    margin: 0;
    padding: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   Save bar (sticky submit)
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page form #tab-dashboard.active ~ button[type="submit"] {
    display: none;
}

/* Save button sits naturally at the end of the form — no float, no sticky. */
.adminease-admin-page form > .tabs > button[type="submit"] {
    display: inline-flex;
    margin: var(--pwp-space-6) 0 var(--pwp-space-3) 0;
}

.adminease-admin-page form .pwp-field-group.is-invalid label::after {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: var(--pwp-space-2);
    background: var(--pwp-rust);
    color: var(--pwp-paper);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    animation: adminease-tilt-shaking 0.3s;
}

@keyframes adminease-tilt-shaking {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}

/* Pairs with the label badge above: the save handler puts .is-invalid on the field
   group and the field itself is outlined here. .choices__inner is listed because a
   Choices dropdown hides its real select behind that wrapper. */
.adminease-admin-page form .pwp-field-group.is-invalid input:not([type="checkbox"]):not([type="radio"]):not(.choices__input),
.adminease-admin-page form .pwp-field-group.is-invalid textarea,
.adminease-admin-page form .pwp-field-group.is-invalid select,
.adminease-admin-page form .pwp-field-group.is-invalid .choices__inner {
    border-color: var(--pwp-rust);
}


/* ──────────────────────────────────────────────────────────────────────────
   Configuration warnings: a field a warning names, saved but probably wrong.
   Separate from .is-invalid, which the save handler clears on every save.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page form .pwp-field-group.is-warned input:not([type="checkbox"]):not([type="radio"]):not(.choices__input),
.adminease-admin-page form .pwp-field-group.is-warned select,
.adminease-admin-page form .pwp-field-group.is-warned .choices__inner {
    border-color: var(--pwp-rust);
}


/* ──────────────────────────────────────────────────────────────────────────
   Buttons in field groups — every button keeps its own width instead of stretching
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .row.row-field > .field-input .pwp-btn {
    align-self: flex-start;
}


/* Loading spinner — apply .icon-spin to the SVG inside .is-loading. */
@keyframes adminease-icon-spin {
    100% {
        transform: rotate(360deg);
    }
}

.adminease-admin-page .icon-spin {
    animation: adminease-icon-spin 1s linear infinite;
}

.adminease-admin-page .loading {
    position: relative;
    padding-right: var(--pwp-space-10);
}

.adminease-admin-page .loading::after,
.adminease-orderable .loading::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 14px;
    width: 14px;
    height: 14px;
    margin-right: var(--pwp-space-1);
    border: 2px solid var(--pwp-paper);
    border-top-color: transparent;
    border-radius: 50%;
    animation: adminease-spin 0.6s linear infinite;
}

.adminease-admin-page a.loading {
    padding-right: var(--pwp-space-7);
}

.adminease-admin-page a.loading::after,
.adminease-admin-page pre.loading::after {
    border-color: var(--pwp-moss);
    border-top-color: transparent;
}

.adminease-admin-page a.loading::after {
    top: 0;
    right: 0;
}

.adminease-orderable .loading {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.adminease-orderable .loading::after {
    top: 0;
    right: auto;
    padding: 0;
    border-top-color: var(--pwp-moss);
}

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

/* ──────────────────────────────────────────────────────────────────────────
   Switch (custom toggle)
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .adminease-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--pwp-space-2);
    min-height: 28px;
    cursor: pointer;
    user-select: none;
}

.adminease-admin-page .adminease-label small,
.adminease-admin-page .adminease-switch small {
    color: var(--pwp-muted);
    font-weight: 400;
}

.adminease-admin-page .adminease-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.adminease-admin-page input[type="radio"]:focus,
.adminease-admin-page input[type="checkbox"]:focus {
    border-color: var(--pwp-moss);
    box-shadow: 0 0 0 2px var(--pwp-moss-bg);
}

.adminease-admin-page input[type="checkbox"],
.adminease-admin-page input[type="radio"] {
    position: relative;
    background: transparent;
    border: 1px solid var(--pwp-line-2);
}

.adminease-admin-page input[type="checkbox"]:checked,
.adminease-admin-page input[type="radio"]:checked {
    background: var(--pwp-moss-bg);
    border-color: var(--pwp-moss-border);
}

.adminease-admin-page input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    color: transparent;
    font-size: 0;
}

.adminease-admin-page input[type="radio"]:checked::before {
    background: var(--pwp-paper);
}

/* Switch — matches BackupEase .toggle-track / .toggle-thumb spec exactly.
   Track: 36 × 20, surface-2 bg, line border. Thumb: 14 × 14, muted-2 bg.
   On: track moss-deep bg + moss border, thumb moss + translateX(16). */
.adminease-admin-page .adminease-slider,
.adminease-admin-page .adminease-switch > .adminease-slider,
.adminease-admin-page form .adminease-switch > .adminease-slider {
    position: relative;
    display: inline-block;
    width: 36px;
    min-width: 36px;
    height: 20px;
    flex: 0 0 36px;
    margin-right: var(--pwp-space-2);
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius-full);
    box-sizing: border-box;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.adminease-admin-page .adminease-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--pwp-muted-2);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}

.adminease-admin-page .adminease-switch input[type="checkbox"]:checked ~ .adminease-slider {
    background: var(--pwp-moss-deep);
    border-color: var(--pwp-moss);
}

.adminease-admin-page .adminease-switch input[type="checkbox"]:checked ~ .adminease-slider::before {
    transform: translateX(16px);
    background: var(--pwp-moss);
}

/* Keyboard focus only — no extra ring on plain checked state. */
.adminease-admin-page .adminease-switch input[type="checkbox"]:focus-visible ~ .adminease-slider {
    box-shadow: 0 0 0 3px var(--pwp-moss-bg);
}

@media (max-width: 768px) {
    .adminease-admin-page input[type="checkbox"]:checked::before {
        left: 5px;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Choices.js overrides
   ──────────────────────────────────────────────────────────────────────── */
/* No vertical padding on the wrapper: it is not the visible control, and 4px
   top and bottom made every Choices widget occupy 8px more row height than the
   plain field beside it. The box the user sees is .choices__inner below. */
.adminease-admin-page .choices {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.adminease-admin-page .choices__inner:focus,
.adminease-admin-page .choices__inner:active,
.adminease-admin-page .choices__inner {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: auto;
    padding: var(--pwp-space-1) var(--pwp-space-3) !important;
    background: transparent;
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius) !important;
    color: var(--pwp-ink);
}

/* Single selects carry the design system's field metric by hand. Choices.js
   hides the native <select> and builds .choices__inner in its place, so the
   .pwp-app field rule in PrecisionWP.css cannot reach it - left to the rule
   above (4px/12px) plus the vendor's own 4px on .choices__list--single, the
   visible box came out ~34px against a 41px plain field, which is why
   AdminEase's selects read as short next to BackupEase's.

   These numbers must stay in step with the field rule in PrecisionWP.css:
   10px/14px padding on a 14px/1.4 line box, and 34px on the right to clear the
   chevron the ::after rule below draws 8px from the edge. Multi-selects are
   deliberately excluded - they grow with their chips and keep the compact
   padding above.

   The vendor padding on .choices__list--single is zeroed rather than
   compensated for: two nested paddings stacking is what made this box an
   unpredictable height in the first place. */
.adminease-admin-page .choices[data-type*="select-one"] .choices__inner {
    padding: 10px 34px 10px 14px !important;
    font-family: var(--pwp-font-sans);
    font-size: var(--pwp-text-base);
    line-height: 1.4;
}

.adminease-admin-page .choices[data-type*="select-one"] .choices__list--single {
    padding: 0;
    line-height: 1.4;
}

/* Multi-selects (disable-gutenberg-disable-post-types and the ~10 other Pro
   fields with 'multiple' => 'multiple') get the same 41px floor as a plain
   field, then grow a row at a time as chips are added.

   They were ~26px: the compact 4px/12px padding on .choices__inner above, plus
   an inline search input whose vendor padding and 5px bottom margin are zeroed
   further down so the caret sits flush, left almost nothing holding the box
   open. The single-select rule above deliberately skipped this branch.

   Flex rather than the vendor's inline-block flow, for two reasons: a part-full
   row centres against the 41px floor instead of hanging from the top, and chip
   spacing comes from one gap instead of per-chip margins that then have to be
   subtracted back out of the container's padding. Horizontal padding is 14px to
   match the field rule in PrecisionWP.css; the vertical value only has to stay
   under the floor, since align-items does the centring. */
.adminease-admin-page .choices[data-type*="select-multiple"] .choices__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 41px;
    padding: 4px 14px !important;
    line-height: 1.4;
}

.adminease-admin-page .choices[data-type*="select-multiple"] .choices__list--multiple {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pwp-space-1);
    margin: 0;
}

.adminease-admin-page .choices.is-focused .choices__inner,
.adminease-admin-page .choices.is-open .choices__inner {
    border-color: var(--pwp-moss);
    box-shadow: 0 0 0 3px var(--pwp-moss-bg);
}

.adminease-admin-page .choices__list--dropdown,
.adminease-admin-page .choices__list[aria-expanded] {
    background: var(--pwp-surface) !important;
    border: 1px solid var(--pwp-line-2) !important;
    border-radius: var(--pwp-radius);
    box-shadow: var(--pwp-shadow-md);
    color: var(--pwp-ink-2) !important;
    z-index: 1000;
}

.adminease-admin-page .choices__list--dropdown .choices__item,
.adminease-admin-page .choices__list--dropdown .choices__item--selectable,
.adminease-admin-page .choices__list[aria-expanded] .choices__item,
.adminease-admin-page .choices__list[aria-expanded] .choices__item--selectable {
    background: transparent !important;
    color: var(--pwp-ink-2) !important;
    padding: var(--pwp-space-2) var(--pwp-space-3);
}

.adminease-admin-page .choices__list--dropdown .choices__item--selectable.is-highlighted,
.adminease-admin-page .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.adminease-admin-page .choices__list--dropdown .choices__item--selectable:hover,
.adminease-admin-page .choices__list[aria-expanded] .choices__item--selectable:hover {
    background: var(--pwp-moss-bg) !important;
    color: var(--pwp-moss) !important;
}

.adminease-admin-page .choices__list--dropdown .choices__item.is-selected,
.adminease-admin-page .choices__list[aria-expanded] .choices__item.is-selected {
    color: var(--pwp-moss) !important;
    font-weight: 600;
}

.adminease-admin-page .choices__list--dropdown .has-no-results,
.adminease-admin-page .choices__list--dropdown .has-no-choices {
    color: var(--pwp-muted) !important;
    background: transparent !important;
}

/* Allow dropdowns to escape the sub-tab content / panel container so
   they aren't clipped by min-width:0 + grid layout. */
.adminease-admin-page .pwp-form-card,
.adminease-admin-page .form-card-body > .row,
.adminease-admin-page .row.row-field,
.adminease-admin-page .row.row-field > .field-input {
    overflow: visible;
}

.adminease-admin-page .choices {
    position: relative;
}

.pwp-app .adminease-admin-page .choices__inner input[type="search"] {
    margin: 0;
    padding: 0 !important;
    background: transparent;
    border: none !important;
    box-shadow: none;
    color: var(--pwp-ink);
}

.adminease-admin-page .choices__list--dropdown .choices__input {
    background: var(--pwp-surface-2);
    color: var(--pwp-ink);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius);
}

.adminease-admin-page .choices__list--dropdown .choices__item.is-selected {
    color: var(--pwp-moss);
    font-weight: 600;
}

/* Chip spacing is the flex `gap` on .choices__list--multiple now. The per-chip
   margins these used to set would stack on top of it, and the bottom one also
   left an unbalanced 4px under a single row of chips. The vendor sets its own
   margin-right/-left/-bottom, so this has to zero rather than simply omit. */
.adminease-admin-page .choices__list--multiple .choices__item {
    margin: 0;
}

.adminease-admin-page .choices__list--multiple .choices__item.choices__item--selectable {
    background: var(--pwp-moss-bg);
    border-color: var(--pwp-moss-border);
    border-radius: var(--pwp-radius-pill);
    color: var(--pwp-moss);
    font-weight: 600;
}

.adminease-admin-page .choices[data-type*="select-multiple"] .choices__button,
.adminease-admin-page .choices[data-type*="text"] .choices__button {
    border-left-color: var(--pwp-moss-border);
}

.adminease-admin-page .choices[data-type*=select-one] .choices__button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2.77 2.77 18.46 18.46' fill='none' stroke='%23e8f0ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    opacity: 0.8;
}

/* Choices.js hides the native <select> and builds a div widget in its place, so
   the .pwp-app.pwp-app select chevron in PrecisionWP.css can never reach it -
   there is no <select> in the rendered DOM to match. It drew the library's own
   filled CSS triangle instead, which is why AdminEase's 25 Choices-enhanced
   selects looked unlike its plain ones. Repaint it as the same moss chevron,
   positioned to the same 4px / 14px as the native rule.

   The border resets are load-bearing: the vendor rule builds its triangle out of
   5px borders on a 0x0 box, so leaving them in would draw a square around the
   chevron. Keep the SVG in step with PrecisionWP.css if that chevron changes -
   a data-URI cannot hold a var(), so neither copy follows the theme. */
.adminease-admin-page .choices[data-type*=select-one]::after {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    right: var(--pwp-space-2);
    border: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    transition: transform 0.2s;
}

/* Open state: the vendor rule flips its triangle by swapping which border edge
   is coloured and nudging margin-top. With one chevron glyph there is nothing to
   swap, so both of those are overridden and the glyph is simply rotated. */
.adminease-admin-page .choices[data-type*=select-one].is-open::after {
    margin-top: -7px;
    border: 0;
    transform: rotate(180deg);
}


/* ──────────────────────────────────────────────────────────────────────────
   Rows / fields layout
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .row.row-field {
    display: flex;
    flex-direction: column;
    gap: var(--pwp-space-3);
    padding: var(--pwp-space-5);
    background: transparent;
    border-bottom: 1px solid var(--pwp-line);
    border-radius: 0;
    transition: var(--pwp-transition);
}

.adminease-admin-page .row.row-field:last-child {
    border-bottom: none;
}

.adminease-admin-page .row.row-field > .field-input {
    width: 100%;
    padding: 0;
}

.adminease-admin-page .row.row-field > .field-explanation {
    padding: 0;
    color: var(--pwp-muted);
    font-size: var(--pwp-text-sm);
    line-height: 1.6;
}

.adminease-admin-page .row.row-field > .field-explanation p {
    margin: 0 0 var(--pwp-space-2) 0;
}

.adminease-admin-page .row.row-field > .field-explanation p:last-child {
    margin-bottom: 0;
}

.adminease-admin-page .row.row-field > .field-explanation > .col-xs-12 {
    padding: 0;
}

@media ( max-width: 768px ) {
    .adminease-admin-page .row.row-field {
        flex-direction: row;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Tables
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius);
}

.adminease-admin-page table th,
.adminease-admin-page table td {
    padding: var(--pwp-space-2) var(--pwp-space-4);
    border: 1px solid var(--pwp-line-2) !important;
    font-size: var(--pwp-text-sm);
}

/* The wrapper draws the outer frame in the same line as the fields. Its table keeps its
   cells apart, so each cell draws only its end and bottom edge to keep every line single. */
.adminease-admin-page .pwp-table-wrap {
    border-color: var(--pwp-line-2);
}

.adminease-admin-page .pwp-table-wrap table {
    border: 0;
}

.adminease-admin-page .pwp-table-wrap table th,
.adminease-admin-page .pwp-table-wrap table td {
    border: 0 !important;
    border-inline-end: 1px solid var(--pwp-line-2) !important;
    border-bottom: 1px solid var(--pwp-line-2) !important;
}

.adminease-admin-page .pwp-table-wrap table tr > :last-child {
    border-inline-end: 0 !important;
}

.adminease-admin-page .pwp-table-wrap table tbody tr:last-child > td {
    border-bottom: 0 !important;
}

/* With no rows yet, the header is the bottom row and the wrapper already closes it. */
.adminease-admin-page .pwp-table-wrap table:not(:has(tbody tr)) thead th {
    border-bottom: 0 !important;
}

.adminease-admin-page table th {
    background: rgba(var(--pwp-moss-rgb), 0.08);
    color: var(--pwp-muted);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-xs);
    font-weight: 500;
    letter-spacing: var(--pwp-tracking-upper);
    text-transform: uppercase;
    text-align: left;
}

.adminease-admin-page table td {
    background: var(--pwp-surface);
    color: var(--pwp-ink-2);
}


/* ──────────────────────────────────────────────────────────────────────────
   Analytics dashboard (Pro feature) — defensive overrides for chart cards.
   Repaints any white card containing a <canvas> using token surfaces.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page[data-theme="dark"] .ae-dark-card,
.adminease-admin-page[data-theme="dark"] .ae-dark-card > * {
    background: var(--pwp-surface) !important;
    color: var(--pwp-ink) !important;
}

.adminease-admin-page[data-theme="dark"] .ae-dark-card {
    border: 1px solid var(--pwp-line-2) !important;
    border-radius: var(--pwp-radius-md) !important;
    box-shadow: none !important;
}

.adminease-admin-page[data-theme="dark"] .ae-dark-card *[class*="muted"],
.adminease-admin-page[data-theme="dark"] .ae-dark-card small,
.adminease-admin-page[data-theme="dark"] .ae-dark-card .description {
    color: var(--pwp-muted) !important;
}

.adminease-admin-page div:has(> canvas),
.adminease-admin-page div:has(> div > canvas),
.adminease-admin-page div:has(> div > div > canvas) {
    background: var(--pwp-surface) !important;
    border: 1px solid var(--pwp-line-2) !important;
    border-radius: var(--pwp-radius-md) !important;
    box-shadow: none !important;
    color: var(--pwp-ink) !important;
}

.adminease-admin-page canvas {
    background: transparent !important;
}

.adminease-admin-page div[style*="background:#fff"],
.adminease-admin-page div[style*="background: #fff"],
.adminease-admin-page div[style*="background:white"],
.adminease-admin-page div[style*="background: white"],
.adminease-admin-page div[style*="background-color:#fff"],
.adminease-admin-page div[style*="background-color: #fff"],
.adminease-admin-page div[style*="background-color:white"],
.adminease-admin-page div[style*="background-color: white"] {
    background: var(--pwp-surface) !important;
    color: var(--pwp-ink) !important;
}

.adminease-admin-page .chartjs-legend,
.adminease-admin-page .chartjs-legend li,
.adminease-admin-page .chart-legend,
.adminease-admin-page .chart-legend li {
    color: var(--pwp-ink-2) !important;
    font-family: var(--pwp-font-sans);
    font-size: var(--pwp-text-sm);
}


/* ──────────────────────────────────────────────────────────────────────────
   Custom scrollbars on dark surfaces.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page,
.adminease-admin-page pre,
.adminease-admin-page textarea,
.adminease-admin-page .pwp-modal-content,
.adminease-admin-page .pwp-modal-body,
.adminease-admin-page .choices__list--dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--pwp-line-2) transparent;
}

.adminease-admin-page ::-webkit-scrollbar,
.adminease-admin-page pre::-webkit-scrollbar,
.adminease-admin-page textarea::-webkit-scrollbar,
.adminease-admin-page .pwp-modal-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.adminease-admin-page ::-webkit-scrollbar-track,
.adminease-admin-page pre::-webkit-scrollbar-track,
.adminease-admin-page textarea::-webkit-scrollbar-track {
    background: var(--pwp-surface);
    border-radius: var(--pwp-radius-sm);
}

.adminease-admin-page ::-webkit-scrollbar-thumb,
.adminease-admin-page pre::-webkit-scrollbar-thumb,
.adminease-admin-page textarea::-webkit-scrollbar-thumb {
    background: var(--pwp-line-2);
    border: 2px solid var(--pwp-surface);
    border-radius: var(--pwp-radius-sm);
}

.adminease-admin-page ::-webkit-scrollbar-thumb:hover {
    background: var(--pwp-moss-border);
}

.adminease-admin-page ::-webkit-scrollbar-corner {
    background: var(--pwp-surface);
}


/* ──────────────────────────────────────────────────────────────────────────
   Responsive — BackupEase-style horizontal-scrolling tab nav on small
   screens, sidebar already collapses to a horizontal rail at 1024px.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .toplevel_page_adminease .adminease-admin-page main {
        width: 100%;
        max-width: 100%;
        padding: var(--pwp-space-8) var(--pwp-space-5);
    }
}

@media (max-width: 1024px) {
    .adminease-admin-page table th,
    .adminease-admin-page table td {
        font-size: var(--pwp-text-xs);
    }
}

@media (max-width: 786px) {
    .adminease-admin-page > header {
        top: 0;
    }

    /* Version chip on mobile — small font + narrow width so the
       "(free: v1.9.3) (pro: v1.3.3)" Pro injection stacks onto two
       lines (one per parenthetical group) instead of overflowing. */
    .adminease-admin-page > header .version,
    .adminease-admin-page .version {
        max-width: 100px;
        padding: 4px 8px;
        font-size: 9px;
        line-height: 1.3;
    }

    .adminease-admin-page #debug-log-container .actions .col-xs-12.end-xs {
        justify-content: flex-start;
        margin: var(--pwp-space-3) 0;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   AdminEase: Lucide icons, copy button, notice & destructive button.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .ae-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2;
    vertical-align: middle;
}

.adminease-admin-page .ae-icon-stack {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.adminease-admin-page .ae-icon-stack .ae-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.adminease-admin-page .ae-icon-stack .ae-icon[data-state="success"],
.adminease-admin-page .ae-icon-stack .ae-icon[data-state="error"] {
    display: none;
}

.adminease-admin-page .debug-log-copy-btn.copied .ae-icon-stack .ae-icon[data-state="default"] {
    display: none;
}

.adminease-admin-page .debug-log-copy-btn.copied .ae-icon-stack .ae-icon[data-state="success"] {
    display: inline-block;
    color: var(--pwp-moss);
}

.adminease-admin-page .debug-log-copy-btn.is-error .ae-icon-stack .ae-icon[data-state="default"] {
    display: none;
}

.adminease-admin-page .debug-log-copy-btn.is-error .ae-icon-stack .ae-icon[data-state="error"] {
    display: inline-block;
    color: var(--pwp-rust);
}


/* Floating copy button + tooltip inside the debug log <pre> container. */
.adminease-admin-page .debug-log-pre-container {
    position: relative;
}

/* A short one-line block, such as the server cron line: fit the content instead of the 400px log height. */
.adminease-admin-page .debug-log-pre-container pre.adminease-pre-compact {
    height: auto;
    padding-right: 60px;
    resize: none;
}

/* The copy button and its message sit in the middle of the short block, not at the top of a tall one. */
.adminease-admin-page .debug-log-pre-container.adminease-copy-inline .debug-log-copy-btn,
.adminease-admin-page .debug-log-pre-container.adminease-copy-inline .debug-log-copy-tooltip {
    top: 50%;
    translate: 0 -50%;
}

.adminease-admin-page .debug-log-copy-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius);
    color: var(--pwp-ink-2);
    cursor: pointer;
    transition: var(--pwp-transition);
}

.adminease-admin-page .debug-log-copy-btn:hover,
.adminease-admin-page .debug-log-copy-btn:focus {
    border-color: var(--pwp-moss-border);
    color: var(--pwp-moss);
    outline: none;
}

.adminease-admin-page .debug-log-copy-tooltip {
    position: absolute;
    top: 21px;
    right: 55px;
    z-index: 6;
    padding: 4px 10px;
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line-2);
    border-radius: var(--pwp-radius-sm);
    color: var(--pwp-ink-2);
    font-size: var(--pwp-text-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.adminease-admin-page .debug-log-copy-btn:hover ~ .debug-log-copy-tooltip,
.adminease-admin-page .debug-log-copy-btn:focus ~ .debug-log-copy-tooltip,
.adminease-admin-page .debug-log-copy-btn.copied ~ .debug-log-copy-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 600px) {
    .adminease-admin-page .debug-log-copy-btn {
        top: 8px;
        right: 8px;
    }

    .adminease-admin-page .debug-log-copy-tooltip {
        top: 14px;
        right: 48px;
    }
}


/* Re-themed inline notices (info / error) used for debug log truncation. */
.adminease-admin-page .notice.notice-info.inline,
.adminease-admin-page .notice.notice-error.inline,
.adminease-admin-page .notice.notice-warning.inline {
    margin: var(--pwp-space-3) 0;
    padding: var(--pwp-space-3) var(--pwp-space-4);
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line-2);
    border-left: 4px solid var(--pwp-info);
    border-radius: var(--pwp-radius);
    color: var(--pwp-ink-2);
    box-shadow: none;
}

.adminease-admin-page .notice.notice-error.inline {
    border-left-color: var(--pwp-danger);
}

.adminease-admin-page .notice.notice-warning.inline {
    border-left-color: var(--pwp-warning);
}

.adminease-admin-page .notice.inline > p,
.adminease-admin-page .notice.inline > p.ae-notice-line {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pwp-space-2);
    line-height: 1.5;
}

.adminease-admin-page .notice.inline > p > .ae-icon {
    color: var(--pwp-moss);
    flex-shrink: 0;
}

.adminease-admin-page .notice.notice-error.inline > p > .ae-icon {
    color: var(--pwp-rust);
}

/* Defensive: ensure SVG icons never inherit dark backgrounds inside disabled
   buttons or .ae-dark-card surfaces, preventing the previous dashicon-on-dark
   black-square artifact. */
.adminease-admin-page .button[disabled] .ae-icon,
.adminease-admin-page[data-theme="dark"] .ae-dark-card .ae-icon {
    background: transparent !important;
    color: currentColor;
}


/* Password protection log table — empty / status / wide cells. */
.adminease-admin-page .password-protection-log-empty {
    text-align: center;
    padding: var(--pwp-space-5) var(--pwp-space-4);
    color: var(--pwp-muted);
}

.adminease-admin-page .password-protection-log-empty.password-protection-log-error {
    color: var(--pwp-rust);
}


.adminease-admin-page .password-protection-log-table .col-user-agent {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.adminease-admin-page #download-debug-log a,
.adminease-admin-page #download-debug-log a:visited {
    color: var(--pwp-ink-2);
    text-decoration: none;
}

.adminease-admin-page #download-debug-log:hover a,
.adminease-admin-page #download-debug-log:focus a,
.adminease-admin-page #download-debug-log a:hover,
.adminease-admin-page #download-debug-log a:focus {
    color: var(--pwp-moss);
    text-decoration: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   Light theme — component overrides
   The token flip in PrecisionWP.css handles most surfaces automatically.
   These rules cover the documented exceptions: the grey page canvas, the
   wp-admin chrome behind the app, pure-white form fields, the toggle switch,
   the zebra table stripe, and the data-URI icon fills (which can't read vars).
   Dark mode is untouched — every rule is scoped to [data-theme="light"] or the
   .adminease-theme-light body class.
   ──────────────────────────────────────────────────────────────────────── */

/* Grey page backdrop so white cards float (the wrapper paints the page area). */
.adminease-admin-page[data-theme="light"] {
    background: var(--pwp-canvas);
}

/* Outer wp-admin chrome sits above the themed wrapper in the DOM and can't read
   the flipped token, so flip it from a body class (server-rendered + mirrored by JS).
   Hardcoded to match --pwp-paper's dark/light values directly — <body> intentionally
   does not carry .pwp-app (see admin_body_class in Plugin.php), so --pwp-* tokens
   are not available at this scope. */
body.adminease-theme-light,
body.adminease-theme-light #wpcontent,
body.adminease-theme-light #wpbody-content {
    background: #f0f0f1;
    min-height: 100vh;
}

body.adminease-theme-dark,
body.adminease-theme-dark #wpcontent,
body.adminease-theme-dark #wpbody-content {
    background: #0d1411;
    min-height: 100vh;
}

/* Pure-white inputs/textarea (base uses --pwp-surface-2, a tinted grey in light).
   The base is .pwp-app input[type="..."] in PrecisionWP.css at (0,2,1); the
   per-type selectors below sit at (0,4,1) and win outright. Background shorthand
   is safe here since inputs/textarea carry no background-image. Selects are kept
   out of this list for that reason and are handled separately below. */
.adminease-admin-page[data-theme="light"] input[type="text"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="number"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="email"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="password"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="url"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="tel"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="search"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="date"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] input[type="time"]:not(.choices__input),
.adminease-admin-page[data-theme="light"] textarea,
.adminease-admin-page[data-theme="light"] .choices__inner {
    background: transparent;
    border-color: var(--pwp-line-2);
}

.adminease-admin-page[data-theme="light"] .choices__inner {
    min-height: auto;
    height: auto;
    padding: 5px 25px 5px 5px;
    line-height: 1;
}

/* Select: background-color only so the chevron background-image survives.
   The base is .pwp-app.wp-core-ui select in PrecisionWP.css at (0,2,1) and the
   selector below ties it at (0,2,1). Source order breaks the tie, and that order
   is guaranteed: Plugin.php enqueues AdminEase.css with the PrecisionWP handle as
   a dependency, so it is always printed second. */
.adminease-admin-page[data-theme="light"] select {
    background-color: #ffffff;
}

/* Toggle switch on-state: --pwp-moss-deep is pale in light, so a white thumb on it
   reads low-contrast. Use saturated moss for the track + a white thumb. */
.adminease-admin-page[data-theme="light"] .adminease-switch input[type="checkbox"]:checked ~ .adminease-slider {
    background: var(--pwp-moss);
    border-color: var(--pwp-moss);
}

.adminease-admin-page[data-theme="light"] .adminease-switch input[type="checkbox"]:checked ~ .adminease-slider::before {
    background: var(--pwp-surface);
}

/* Data-URI icon fills can't read CSS vars, so duplicate the background-image with
   light-palette hex (moss #15803d → %2315803d, ink #0b0f0d → %230b0f0d). */
.adminease-admin-page[data-theme="light"] .form-card ul li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.adminease-admin-page[data-theme="light"] select,
.adminease-admin-page[data-theme="light"] select#bulk-action-selector {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--pwp-space-2) center !important;
    background-size: 14px !important;
}

.adminease-admin-page[data-theme="light"] select#bulk-action-selector {
    width: auto;
}

.adminease-admin-page[data-theme="light"] input[type="checkbox"]:checked::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.adminease-admin-page[data-theme="light"] .choices[data-type*=select-one] .choices__button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2.77 2.77 18.46 18.46' fill='none' stroke='%230b0f0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* Light mode: dark X icon for multi-select / text chip remove buttons. */
.adminease-admin-page[data-theme="light"] .choices[data-type*="select-multiple"] .choices__button,
.adminease-admin-page[data-theme="light"] .choices[data-type*="text"] .choices__button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2.77 2.77 18.46 18.46' fill='none' stroke='%230b0f0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* Light mode: card header moss-tinted background + monospace uppercase title. */
.adminease-admin-page[data-theme="light"] .form-card .form-card-head h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: var(--pwp-text-base);
    font-weight: 600;
    color: var(--pwp-ink);
    letter-spacing: -0.015em;
    margin: 0;
    padding: 0;
}

/* Light mode: switch label and form label readable ink colour. */
.adminease-admin-page[data-theme="light"] form label,
.adminease-admin-page[data-theme="light"] form .adminease-switch > .adminease-switch-label,
body.adminease-theme-light .adminease-admin-page form label,
body.adminease-theme-light .adminease-admin-page form .adminease-switch-label {
    color: var(--pwp-ink);
    font-weight: 500;
}

/* Light mode: general descriptive / body text. */
.adminease-admin-page[data-theme="light"] form p.description,
.adminease-admin-page[data-theme="light"] form p.field-desc,
.adminease-admin-page[data-theme="light"] p,
.adminease-admin-page[data-theme="light"] .form-card-body p {
    color: var(--pwp-ink);
}

/* Light mode: sticky header uses the WordPress canvas grey. */
.adminease-admin-page[data-theme="light"] > header {
    background: var(--pwp-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Light mode: form cards float on canvas via shadow; hard border removed. */
.adminease-admin-page[data-theme="light"] .form-card {
    border-color: transparent;
}

/* Light mode: the default divider is too faint against the white card, so the line between fields is a little darker. */
.adminease-admin-page[data-theme="light"] .row.row-field {
    border-bottom-color: #d8dedb;
}


/* ──────────────────────────────────────────────────────────────────────────
   Header / brand bar — matches BackupEase header styling.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .adminease-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.adminease-admin-page .adminease-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.adminease-admin-page .adminease-logo img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.adminease-admin-page .adminease-logo h1 {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--pwp-ink);
    line-height: 1.2;
}

.adminease-admin-page .adminease-version {
    font-family: var(--pwp-font-mono), monospace;
    font-size: 12px;
    color: var(--pwp-muted-2);
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line);
    border-radius: 6px;
    padding: 4px 7px;
    letter-spacing: 0.04em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    top: 0;
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line);
    color: var(--pwp-muted-2);
    font-family: var(--pwp-font-mono), monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: lowercase;
    line-height: 1;
}

.adminease-admin-page .adminease-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media ( max-width: 640px ) {

    .adminease-admin-page .adminease-logo h1 {
        font-size: 15px;
    }

    .adminease-admin-page .adminease-version {
        display: none;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Header badge (Pro Active / Free) — matches BackupEase's pwp-badge usage.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .adminease-badge-dot {
    width: 5px;
    height: 5px;
    background: var(--pwp-moss);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--pwp-moss);
    animation: adminease-badge-pulse 2s ease-in-out infinite;
}

@keyframes adminease-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--pwp-moss-rgb), .5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--pwp-moss-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--pwp-moss-rgb), 0);
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Theme toggle button (header). Sun shows in dark (click → light); moon in light.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-admin-page .adminease-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: var(--pwp-space-2);
    padding: 0;
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line-2);
    border-radius: 50%;
    color: var(--pwp-muted);
    cursor: pointer;
    transition: var(--pwp-transition);
}

.adminease-admin-page .adminease-theme-toggle:hover,
.adminease-admin-page .adminease-theme-toggle:focus {
    color: var(--pwp-moss);
    border-color: var(--pwp-moss-border);
    background: rgba(var(--pwp-moss-rgb), 0.1);
    outline: none;
}

.adminease-admin-page .adminease-theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--pwp-moss-bg);
}

.adminease-admin-page .adminease-theme-toggle .ae-theme-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.adminease-admin-page .adminease-theme-toggle .ae-theme-icon-moon {
    display: none;
}

.adminease-admin-page[data-theme="light"] .adminease-theme-toggle .ae-theme-icon-sun {
    display: none;
}

.adminease-admin-page[data-theme="light"] .adminease-theme-toggle .ae-theme-icon-moon {
    display: inline-flex;
}


/* ──────────────────────────────────────────────────────────────────────────
   Review request notice (rendered directly inside .adminease-header.pwp-header
   from partials/dashboard.php, not via admin_notices, as the first child
   before .adminease-header-content). This keys off the <body> classes
   Plugin::admin_body_class() adds — dark is the default (body.pwp-app always
   defines --pwp-*), light is a literal override gated on
   body.adminease-theme-light. flex: 1 1 100% makes it take its own full-width
   row above the logo/actions row within the header's flex layout.
   ──────────────────────────────────────────────────────────────────────── */
.adminease-review-notice {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: var(--pwp-space-4);
    padding: var(--pwp-space-5) 22px;
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line);
    border-left-width: 4px;
    border-radius: var(--pwp-radius-card);
    box-shadow: var(--pwp-shadow-sm);
    color: var(--pwp-ink);
}

.adminease-review-notice .ae-rr-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pwp-space-2);
    margin-top: var(--pwp-space-3) !important;
}

.adminease-review-notice .ae-rr-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pwp-space-2);
    padding: 6px 14px;
    font-family: var(--pwp-font-sans);
    font-size: var(--pwp-text-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--pwp-radius-full);
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.adminease-review-notice .ae-rr-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.adminease-review-notice .ae-rr-btn-primary {
    background: var(--pwp-moss);
    color: var(--pwp-paper);
    box-shadow: var(--pwp-shadow-btn-primary);
}

.adminease-review-notice .ae-rr-btn-primary:hover,
.adminease-review-notice .ae-rr-btn-primary:focus {
    background: var(--pwp-moss-glow);
    color: var(--pwp-paper);
    transform: translateY(-1px);
    box-shadow: var(--pwp-shadow-btn-hover);
    outline: none;
    border-radius: var(--pwp-radius-full);
}

.adminease-review-notice .ae-rr-btn-secondary {
    background: transparent;
    border-color: var(--pwp-line-2);
    color: var(--pwp-ink-2);
    box-shadow: none;
}

.adminease-review-notice .ae-rr-btn-secondary:hover,
.adminease-review-notice .ae-rr-btn-secondary:focus {
    background: var(--pwp-surface-2);
    border-color: var(--pwp-line-2);
    color: var(--pwp-ink);
    outline: none;
    border-radius: var(--pwp-radius-full);
    box-shadow: none;
}

.adminease-review-notice .ae-rr-btn-text {
    padding: 6px 8px;
    background: none;
    border-color: transparent;
    color: var(--pwp-rust);
    text-decoration: underline;
}

.adminease-review-notice .ae-rr-btn-text:hover,
.adminease-review-notice .ae-rr-btn-text:focus {
    color: var(--pwp-danger);
    outline: none;
    border-radius: var(--pwp-radius-full);
    box-shadow: none;
}

body.adminease-theme-light .adminease-review-notice {
    background: #fff;
    border-color: #e6eae8;
    box-shadow: 0 1px 2px rgba(16, 40, 28, 0.06);
    color: #0b0f0d;
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-primary {
    background: #15803d;
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(21, 128, 61, 0.42);
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-primary:hover,
body.adminease-theme-light .adminease-review-notice .ae-rr-btn-primary:focus {
    background: #166534;
    color: #fff;
    box-shadow: 0 10px 26px -8px rgba(21, 128, 61, 0.5);
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-secondary {
    border-color: #8a988f;
    color: #2c3531;
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-secondary:hover,
body.adminease-theme-light .adminease-review-notice .ae-rr-btn-secondary:focus {
    background: #f5f7f6;
    border-color: #8a988f;
    color: #0b0f0d;
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-text {
    color: #c2410c;
}

body.adminease-theme-light .adminease-review-notice .ae-rr-btn-text:hover,
body.adminease-theme-light .adminease-review-notice .ae-rr-btn-text:focus {
    color: #dc2626;
}


/* ──────────────────────────────────────────────────────────────────────────
   Batched-tool progress bar — shared by Bulk Delete Posts, Bulk Delete Terms
   and Taxonomy Switcher, all driven by assets/js/AdminEaseProgressBar.js.
   The counter sits under the track rather than on top of the fill, so the label
   never has to fight the fill colour for contrast in either theme.
   ────────────────────────────────────────────────────────────────────────── */

.pwp-app .adminease-progress-bar-wrapper {
    overflow: hidden;
    height: 10px;
    background: var(--pwp-surface-3);
    border: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-pill);
}

.pwp-app .adminease-progress-bar-fill {
    width: 0;
    height: 100%;
    background: var(--pwp-moss);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.pwp-app .adminease-progress-bar-text {
    margin-top: var(--pwp-space-2);
    color: var(--pwp-muted);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-xs);
    font-weight: 500;
    letter-spacing: var(--pwp-tracking-cta);
}


/* ──────────────────────────────────────────────────────────────────────────
   Batched-tool result logs — shared by the same three tools. Follows the design
   system's <pre> recipe (surface-2 + line + mono) so the logs track the active
   theme instead of the hardcoded light greys they used to carry inline.

   .adminease-log-panel  — the scrolling run log
   .adminease-log-inline — a log rendered inside a .pwp-alert (no own surface)
   ────────────────────────────────────────────────────────────────────────── */

.pwp-app .adminease-log-panel {
    height: 400px;
    padding: var(--pwp-space-4);
    overflow-y: auto;
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line);
    border-left: 3px solid var(--pwp-moss);
    border-radius: var(--pwp-radius-md);
    color: var(--pwp-ink-2);
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-sm);
    line-height: 1.8;
    word-break: break-word;
}

.pwp-app .adminease-log-inline {
    font-family: var(--pwp-font-mono);
    font-size: var(--pwp-text-sm);
    font-weight: 400;
    line-height: 1.8;
    word-break: break-word;
}

/* Rows built in JS by AdminEaseTaxonomySwitcher.js. */
.pwp-app .adminease-log-row {
    padding: var(--pwp-space-1) 0;
    border-bottom: 1px solid var(--pwp-line);
}

.pwp-app .adminease-log-row:last-child {
    border-bottom: 0;
}

.pwp-app .adminease-log-meta {
    color: var(--pwp-muted);
}

.pwp-app .adminease-log-error {
    display: inline-block;
    margin-left: var(--pwp-space-5);
    color: var(--pwp-error);
}

/* .pwp-alert is display:flex, so a heading plus a log would sit side by side. */
.pwp-app .adminease-bulk-delete-terms-errors,
.pwp-app .adminease-taxonomy-switcher-errors {
    flex-direction: column;
}

.pwp-app .adminease-bulk-delete-terms-wrapper h4,
.pwp-app .adminease-bulk-delete-wrapper h4,
.pwp-app .adminease-taxonomy-switcher-wrapper h4 {
    margin: 0 0 var(--pwp-space-2);
}


/* ──────────────────────────────────────────────────────────────────────────
   Collapsible blocks — long reference text and tool output that would
   otherwise push whatever follows it off the screen. Native <details>, so it
   stays keyboard reachable and works with JavaScript off.
   ────────────────────────────────────────────────────────────────────────── */

.pwp-app .adminease-collapsible {
    border-bottom: 1px solid var(--pwp-line);
}

.pwp-app .adminease-collapsible > summary {
    padding: var(--pwp-space-2) 0;
    cursor: pointer;
    color: var(--pwp-ink);
    font-size: var(--pwp-text-base);
    font-weight: 600;
    list-style: none;
}

.pwp-app .adminease-collapsible > summary::-webkit-details-marker {
    display: none;
}

.pwp-app .adminease-collapsible > summary::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    color: var(--pwp-muted);
    font-family: var(--pwp-font-mono);
}

.pwp-app .adminease-collapsible[open] > summary::before {
    content: "\2212";
}

.pwp-app .adminease-collapsible > summary:hover {
    color: var(--pwp-moss);
}

.pwp-app .adminease-collapsible[open] > summary {
    margin-bottom: var(--pwp-space-2);
}

.pwp-app #smtp-test-submit {
    margin-top: var(--pwp-space-4);
}

.pwp-app .adminease-smtp-test-wrapper .pwp-alert {
    margin-bottom: var(--pwp-space-3);
}

/* The shared log panel is a fixed 400px, which is more room than a short
   handshake needs and more scrolling than a long one deserves. */
.pwp-app .adminease-smtp-transcript {
    height: auto;
    max-height: 300px;
}


/* ──────────────────────────────────────────────────────────────────────────
   RTL

   Keyed on [dir="rtl"] from <html>, matching PrecisionWP.css, so the two
   files use one convention. Every selector is one step more specific than
   the LTR rule it flips, so load order never decides the outcome.

   Only physical properties appear here. Anything that flows with the text
   (the <details> marker, flex order, list content) mirrors on its own and is
   deliberately left alone.
   ────────────────────────────────────────────────────────────────────────── */

/* Mirrors the padding-left reset at the top of this file. Core's RTL build
   moves the admin content gutter to the right edge, so the property the LTR
   rule zeroes is no longer the one that is set. */
[dir="rtl"] .toplevel_page_adminease #wpcontent {
    padding-right: 0;
}

[dir="rtl"] .adminease-admin-page pre {
    border-right: 3px solid var(--pwp-moss);
    border-left: 1px solid var(--pwp-line-2);
}

/* Bullets are drawn as an absolutely positioned ::before, not a list marker,
   so they stay pinned to the left edge unless moved by hand. The li padding
   that reserves room for them has to move with them. */
[dir="rtl"] .adminease-admin-page ul li {
    padding: 0 var(--pwp-space-6) 0 0;
}

[dir="rtl"] .adminease-admin-page ul li::before {
    right: 5px;
    left: auto;
}

[dir="rtl"] .adminease-admin-page .form-card ul li::before {
    right: 0;
    left: auto;
}

[dir="rtl"] .adminease-admin-page .section-head .version {
    margin-right: var(--pwp-space-1);
    margin-left: 0;
}

@media (min-width: 1024px) {
    [dir="rtl"] .adminease-admin-page form .pwp-field-group.ae-color-field {
        float: right;
        padding-right: 0;
        padding-left: 16px;
    }

    [dir="rtl"] .adminease-admin-page form .pwp-field-group.ae-color-field-text {
        padding-left: 0;
    }
}

/* The LTR rule only widens the arrow side, leaving the text side to the 14px
   that PrecisionWP.css gives every field. Zeroing padding-right here therefore
   removed the text padding rather than flipping it, and the #bulk-action-selector
   half of the pair carries an ID, so nothing further down could put it back. */
[dir="rtl"] .adminease-admin-page select,
[dir="rtl"] .adminease-admin-page select#bulk-action-selector {
    padding-right: 14px;
    padding-left: var(--pwp-space-8);
    background-position: left var(--pwp-space-3) center !important;
}

[dir="rtl"] .adminease-admin-page form label:not(.adminease-switch) .clear-selected-choices,
[dir="rtl"] .adminease-admin-page form label:not(.adminease-switch) .select-all-choices {
    float: left;
    margin-right: var(--pwp-space-5);
    margin-left: 0;
}

[dir="rtl"] .adminease-admin-page form .pwp-field-group.is-invalid label::after {
    margin-right: var(--pwp-space-2);
    margin-left: 0;
}

[dir="rtl"] .adminease-admin-page .loading {
    padding-right: 0;
    padding-left: var(--pwp-space-10);
}

[dir="rtl"] .adminease-admin-page .loading::after,
[dir="rtl"] .adminease-orderable .loading::after {
    right: auto;
    left: 14px;
    margin-right: 0;
    margin-left: var(--pwp-space-1);
}

[dir="rtl"] .adminease-admin-page a.loading {
    padding-right: 0;
    padding-left: var(--pwp-space-7);
}

[dir="rtl"] .adminease-admin-page a.loading::after {
    left: 0;
}

/* The orderable spinner is its own 14px box, so it undoes the offset the
   shared rule above applies. Mirror of the LTR `right: auto`. */
[dir="rtl"] .adminease-orderable .loading::after {
    left: auto;
}

[dir="rtl"] .adminease-admin-page input[type="checkbox"]:checked::before {
    right: 4px;
    left: auto;
}

[dir="rtl"] .adminease-admin-page .adminease-slider,
[dir="rtl"] .adminease-admin-page .adminease-switch > .adminease-slider,
[dir="rtl"] .adminease-admin-page form .adminease-switch > .adminease-slider {
    margin-right: 0;
    margin-left: var(--pwp-space-2);
}

[dir="rtl"] .adminease-admin-page .adminease-slider::before {
    right: 2px;
    left: auto;
}

[dir="rtl"] .adminease-admin-page .adminease-switch input[type="checkbox"]:checked ~ .adminease-slider::before {
    transform: translateX(-16px);
}

@media (max-width: 768px) {
    [dir="rtl"] .adminease-admin-page input[type="checkbox"]:checked::before {
        right: 5px;
    }
}

/* Choices.js ships its own RTL rules, but they are keyed on a dir attribute
   the library writes onto the .choices container, and they tie on
   specificity with the overrides above — so the LTR override wins on load
   order and the chevron and clear button stay on the right. These restate
   the flip against the document direction instead, which does not depend on
   the library having set that attribute. */
[dir="rtl"] .adminease-admin-page .choices[data-type*="select-one"] .choices__inner {
    padding: 10px 14px 10px 34px !important;
}

[dir="rtl"] .adminease-admin-page .choices[data-type*=select-one]::after {
    right: auto;
    left: var(--pwp-space-2);
}

[dir="rtl"] .adminease-admin-page .choices[data-type*=select-one] .choices__button {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: 25px;
}

/* The vendor has no RTL rule for the multi-select chip button at all: its
   divider border and the 16px of padding that separates the icon from the
   label both stay on the left, which in RTL puts them on the far side of the
   icon from the text they are meant to divide. */
[dir="rtl"] .adminease-admin-page .choices[data-type*="select-multiple"] .choices__button,
[dir="rtl"] .adminease-admin-page .choices[data-type*="text"] .choices__button {
    margin: 0 8px 0 -4px;
    padding-right: 16px;
    padding-left: 0;
    border-right: 1px solid var(--pwp-moss-border);
    border-left: none;
}

[dir="rtl"] .adminease-admin-page .choices__list--multiple .choices__item[data-deletable] {
    padding-right: 10px;
    padding-left: 5px;
}

[dir="rtl"] .adminease-admin-page table th {
    text-align: right;
}

[dir="rtl"] .adminease-admin-page .debug-log-copy-btn {
    right: auto;
    left: 15px;
}

[dir="rtl"] .adminease-admin-page .debug-log-copy-tooltip {
    right: auto;
    left: 55px;
    transform: translateX(-4px);
}

[dir="rtl"] .adminease-admin-page .debug-log-copy-btn:hover ~ .debug-log-copy-tooltip,
[dir="rtl"] .adminease-admin-page .debug-log-copy-btn:focus ~ .debug-log-copy-tooltip,
[dir="rtl"] .adminease-admin-page .debug-log-copy-btn.copied ~ .debug-log-copy-tooltip {
    transform: translateX(0);
}

@media (max-width: 600px) {
    [dir="rtl"] .adminease-admin-page .debug-log-copy-btn {
        left: 8px;
    }

    [dir="rtl"] .adminease-admin-page .debug-log-copy-tooltip {
        left: 48px;
    }
}

[dir="rtl"] .adminease-admin-page .notice.notice-info.inline,
[dir="rtl"] .adminease-admin-page .notice.notice-error.inline,
[dir="rtl"] .adminease-admin-page .notice.notice-warning.inline {
    border-right: 4px solid var(--pwp-info);
    border-left: 1px solid var(--pwp-line-2);
}

[dir="rtl"] .adminease-admin-page .adminease-theme-toggle {
    margin-right: 0;
    margin-left: var(--pwp-space-2);
}

[dir="rtl"] .pwp-app .adminease-log-panel {
    border-right: 3px solid var(--pwp-moss);
    border-left: 1px solid var(--pwp-line);
}

[dir="rtl"] .pwp-app .adminease-log-error {
    margin-right: var(--pwp-space-5);
    margin-left: 0;
}

/* ==========================================================================
   Dashboard overview, notices and settings search
   ========================================================================== */

.adminease-admin-page .ae-search {
    position: relative;
    width: 260px;
    max-width: 100%;
}

.adminease-admin-page .ae-search-icon {
    position: absolute;
    inset-inline-start: var(--pwp-space-3);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--pwp-muted);
    pointer-events: none;
}

.adminease-admin-page .ae-search-input,
.adminease-admin-page input.ae-search-input[type="search"] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-block: var(--pwp-space-2);
    padding-inline: calc(var(--pwp-space-3) + 26px) var(--pwp-space-3);
    background: var(--pwp-surface-2);
    color: var(--pwp-ink);
    border: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-md);
    box-shadow: none;
}

.adminease-admin-page .ae-search-input:focus {
    border-color: var(--pwp-moss);
    outline: 2px solid var(--pwp-moss);
    outline-offset: 0;
}

.adminease-admin-page .ae-search-results {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--pwp-space-2));
    z-index: 60;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: var(--pwp-space-1);
    list-style: none;
    background: var(--pwp-surface);
    border: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.adminease-admin-page .ae-search-results[hidden] {
    display: none;
}

.adminease-admin-page .ae-search-result,
.adminease-admin-page .ae-search-empty {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: var(--pwp-space-2) var(--pwp-space-3);
    border-radius: var(--pwp-radius-sm);
    color: var(--pwp-ink);
}

.adminease-admin-page .ae-search-result {
    cursor: pointer;
}

.adminease-admin-page .ae-search-result span,
.adminease-admin-page .ae-search-empty {
    color: var(--pwp-muted);
    font-size: 12px;
}

.adminease-admin-page .ae-search-result:hover,
.adminease-admin-page .ae-search-result.active {
    background: var(--pwp-surface-2);
}

.adminease-admin-page .ae-notice-list {
    display: flex;
    flex-direction: column;
    gap: var(--pwp-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.adminease-admin-page .ae-notice-list li::before {
    content: none;
}

.adminease-admin-page .ae-notice {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);
    margin: 0;
    padding: var(--pwp-space-3) var(--pwp-space-4);
    border: 1px solid var(--pwp-info-border);
    border-radius: var(--pwp-radius-md);
    background: var(--pwp-info-bg);
    color: var(--pwp-ink);
}

.adminease-admin-page .ae-notice-warning {
    border-color: var(--pwp-warning-border);
    background: var(--pwp-warning-bg);
}

.adminease-admin-page .ae-notice > svg {
    flex: 0 0 auto;
    color: var(--pwp-info);
}

.adminease-admin-page .ae-notice-warning > svg {
    color: var(--pwp-warning);
}

.adminease-admin-page .ae-notice-text {
    flex: 1 1 auto;
}

/* The button keeps its size and one line however long the message is. */
.adminease-admin-page .ae-notice .ae-goto {
    flex: 0 0 auto;
    white-space: nowrap;
}

.adminease-admin-page .ae-all-clear {
    margin: 0;
    color: var(--pwp-muted);
}

.adminease-admin-page .ae-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--pwp-space-3);
    margin-block: var(--pwp-space-4);
}

.adminease-admin-page .ae-overview-card {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-3);
    padding: var(--pwp-space-3) var(--pwp-space-4);
    text-align: start;
    font: inherit;
    color: var(--pwp-ink);
    background: var(--pwp-surface-2);
    border: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-md);
    cursor: pointer;
}

.adminease-admin-page .ae-overview-card:hover,
.adminease-admin-page .ae-overview-card:focus-visible {
    border-color: var(--pwp-moss);
}

.adminease-admin-page .ae-overview-card.has-active .ae-overview-icon {
    color: var(--pwp-moss);
}

.adminease-admin-page .ae-overview-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--pwp-muted);
}

.adminease-admin-page .ae-overview-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adminease-admin-page .ae-overview-info span {
    color: var(--pwp-muted);
    font-size: 12px;
}

.adminease-admin-page .ae-caution {
    margin-block-start: var(--pwp-space-4);
}

.adminease-admin-page .ae-help-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pwp-space-2) var(--pwp-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.adminease-admin-page .ae-help-links li {
    margin: 0;
}

.adminease-admin-page .ae-help-links li::before {
    content: none;
}

@keyframes ae-flash {
    0%, 60% {
        box-shadow: 0 0 0 3px var(--pwp-moss);
    }
    100% {
        box-shadow: 0 0 0 3px transparent;
    }
}

.adminease-admin-page .ae-flash {
    border-radius: var(--pwp-radius-md);
    animation: ae-flash 2s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .adminease-admin-page .ae-flash {
        animation: none;
        box-shadow: 0 0 0 3px var(--pwp-moss);
    }
}

@media (max-width: 782px) {
    .adminease-admin-page .ae-search {
        width: 100%;
        order: 3;
    }

    .adminease-admin-page .ae-notice {
        flex-wrap: wrap;
    }
}

/* Dashboard cards: even padding, tighter rhythm between text and content. */
.adminease-admin-page #tab-dashboard .pwp-form-card-body {
    gap: var(--pwp-space-4);
    padding: var(--pwp-space-5) 22px;
}

.adminease-admin-page .ae-overview-grid {
    margin-block: 0;
}

.adminease-admin-page .ae-caution {
    margin-block-start: 0;
}

.adminease-admin-page .ae-all-clear {
    display: flex;
    align-items: center;
    gap: var(--pwp-space-2);
}

.adminease-admin-page .ae-all-clear::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pwp-moss);
}

.adminease-admin-page .ae-help-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--pwp-space-2) var(--pwp-space-4);
    border: 1px solid var(--pwp-line);
    border-radius: var(--pwp-radius-md);
    background: var(--pwp-surface-2);
    text-decoration: none;
}

.adminease-admin-page .ae-help-links a:hover,
.adminease-admin-page .ae-help-links a:focus-visible {
    border-color: var(--pwp-moss);
}

/* The generic dashboard list rule (bullet indent) must not reach these lists. */
.adminease-admin-page ul.ae-help-links li,
[dir="rtl"] .adminease-admin-page ul.ae-help-links li {
    padding: 0;
}

.adminease-admin-page ul.ae-notice-list li.ae-notice,
[dir="rtl"] .adminease-admin-page ul.ae-notice-list li.ae-notice {
    padding: var(--pwp-space-3) var(--pwp-space-4);
}

@media (max-width: 782px) {
    /* Logo, theme toggle and badge share the first row; the search gets its own full-width row. */
    .adminease-admin-page .adminease-header-content {
        flex-wrap: wrap;
        gap: var(--pwp-space-3);
    }

    .adminease-admin-page .adminease-logo {
        gap: var(--pwp-space-2);
        margin-inline-end: auto;
    }

    .adminease-admin-page .adminease-logo img {
        width: 48px;
        height: 48px;
    }

    .adminease-admin-page .adminease-header-actions {
        display: contents;
    }

    .adminease-admin-page .ae-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }

    .adminease-admin-page .ae-search-results {
        inset-inline: 0;
        width: auto;
        max-width: none;
    }
}

/* No bullet and no list indent on the search results. */
.adminease-admin-page ul.ae-search-results li::before,
[dir="rtl"] .adminease-admin-page ul.ae-search-results li::before {
    content: none;
}

.adminease-admin-page ul.ae-search-results li,
[dir="rtl"] .adminease-admin-page ul.ae-search-results li {
    padding: var(--pwp-space-2) var(--pwp-space-3);
}

.adminease-admin-page .ae-overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pwp-space-3);
}

.adminease-admin-page .ae-overview-filter[aria-pressed="true"] {
    border-color: var(--pwp-moss);
    color: var(--pwp-moss);
}

.adminease-admin-page .ae-overview-grid.ae-only-active .ae-overview-card:not(.has-active) {
    display: none;
}

.adminease-admin-page .ae-search-result mark {
    padding: 0;
    background: transparent;
    color: var(--pwp-moss);
    font-weight: 700;
}

.adminease-admin-page .ae-search-result .ae-search-snippet {
    color: var(--pwp-ink-2);
}


/* Dismissing info notices and bringing them back. */
.adminease-admin-page .ae-notice-dismiss {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--pwp-radius-sm);
    background: transparent;
    color: var(--pwp-muted);
    cursor: pointer;
}

.adminease-admin-page .ae-notice-dismiss:hover,
.adminease-admin-page .ae-notice-dismiss:focus-visible {
    background: rgba(var(--pwp-moss-rgb), 0.12);
    color: var(--pwp-ink);
}

.adminease-admin-page .ae-notice-dismiss > svg {
    width: 16px;
    height: 16px;
}

.adminease-admin-page .ae-show-hidden {
    margin: var(--pwp-space-3) 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pwp-muted);
    font-size: var(--pwp-text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.adminease-admin-page .ae-show-hidden:hover {
    color: var(--pwp-ink);
}

.adminease-admin-page .ae-all-clear + .ae-show-hidden {
    margin-top: var(--pwp-space-2);
}

/* A dismissed notice collapses the moment it is clicked. JS pins its height first so this can transition. */
.adminease-admin-page .ae-notice.is-leaving {
    height: 0;
    margin-block-end: calc(var(--pwp-space-2) * -1);
    padding-block: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(12px);
    transition: height 0.26s ease, margin 0.26s ease, padding 0.26s ease, border-width 0.26s ease, opacity 0.18s ease, transform 0.26s ease;
}

[dir="rtl"] .adminease-admin-page .ae-notice.is-leaving {
    transform: translateX(-12px);
}

/* Spinner while the server is saving: replaces the X, trails the "Show hidden notices" text. */
.adminease-admin-page .ae-show-hidden.is-busy,
.adminease-admin-page .ae-notice-dismiss.is-busy {
    cursor: progress;
}

.adminease-admin-page .ae-show-hidden.is-busy {
    opacity: 0.7;
}

.adminease-admin-page .ae-notice-dismiss.is-busy > svg {
    display: none;
}

.adminease-admin-page .ae-notice-dismiss.is-busy::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: adminease-spin 0.7s linear infinite;
}

.adminease-admin-page .ae-show-hidden.is-busy::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-inline-start: var(--pwp-space-2);
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: adminease-spin 0.7s linear infinite;
}

/* Things that appear after a redraw ease in instead of popping. */
@keyframes ae-enter {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.adminease-admin-page .ae-enter {
    animation: ae-enter 0.3s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .adminease-admin-page .ae-notice.is-leaving {
        transition: none;
    }

    .adminease-admin-page .ae-enter,
    .adminease-admin-page .ae-notice-dismiss.is-busy::after,
    .adminease-admin-page .ae-show-hidden.is-busy::after {
        animation: none;
    }
}