/* DataMergeStudio dashboard — uses brand tokens from BRIEFING §6.4. */

:root {
    --dms-main: #1576b4;
    --dms-text: #25282a;
    --dms-bg-alt: #f4f9fe;
    --dms-gradient: linear-gradient(45deg, #193850 0%, #469ddd 100%);
    --dms-border: #e5e7eb;
    --dms-muted: #6b7280;
    --dms-radius: 12px;
    --dms-radius-sm: 6px;
    --dms-radius-pill: 999px;
}

.dms-auth-wrap,
.dms-dashboard-wrap {
    width: 100%;
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dms-text);
    box-sizing: border-box;
}

.dms-auth-wrap *,
.dms-dashboard-wrap * {
    box-sizing: border-box;
}

.dms-auth-card {
    max-width: 440px;
    margin: 0 auto;
}

/* Tab content wrapper — every tab sits inside this so width is identical */
.dms-tab-content,
.dms-tab-content > * {
    width: 100%;
    max-width: 100%;
}

.dms-card {
    width: 100%;
    box-sizing: border-box;
}

.dms-devices-table,
.dms-invoices-table {
    table-layout: auto;
    width: 100%;
}

.dms-invoices-table-action {
    text-align: right;
    white-space: nowrap;
}

.dms-muted-text {
    color: var(--dms-muted);
}

.dms-card {
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius);
    padding: 28px;
    margin-bottom: 16px;
}

.dms-auth-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-form .dms-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 6px;
}

.dms-form input[type="text"],
.dms-form input[type="email"],
.dms-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 15px;
    box-sizing: border-box;
    font-family: inherit;
}

.dms-form input[type="text"]:focus,
.dms-form input[type="email"]:focus,
.dms-form input[type="password"]:focus {
    outline: none;
    border-color: var(--dms-main);
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.15);
}

.dms-checkbox-label {
    display: block;
    margin: 14px 0;
    font-size: 14px;
}

.dms-checkbox-label input {
    margin-right: 6px;
}

.dms-hint {
    font-size: 13px;
    color: var(--dms-muted);
    margin: 4px 0 0;
}

.dms-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--dms-radius-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.dms-btn-primary,
.dms-btn-primary:link,
.dms-btn-primary:visited {
    background: var(--dms-gradient);
    color: #fff;
    margin-top: 20px;
}

.dms-btn-primary:hover,
.dms-btn-primary:focus,
.dms-btn-primary:active {
    opacity: 0.92;
    color: #fff;
}

.dms-error,
.dms-success {
    padding: 12px 14px;
    border-radius: var(--dms-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}

.dms-error {
    background: #fef2f2;
    color: #991b1b;
}

.dms-success {
    background: #ecfdf5;
    color: #065f46;
}

.dms-auth-links {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--dms-muted);
}

.dms-auth-links a {
    color: var(--dms-main);
    text-decoration: none;
}

.dms-auth-links a:hover {
    text-decoration: underline;
}

/* Dashboard */

.dms-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.dms-dashboard-greeting {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 700;
}

/* Inside subscription-detail-header the wrapper provides bottom spacing
   and the meta paragraph follows immediately, so the greeting itself
   shouldn't add extra space. */
.dms-subscription-detail-header .dms-dashboard-greeting {
    margin-bottom: 0;
}

.dms-dashboard-logout {
    color: var(--dms-muted);
    text-decoration: none;
    font-size: 14px;
}

.dms-dashboard-logout:hover {
    color: var(--dms-main);
}

.dms-dashboard-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.dms-dashboard-navlink {
    color: var(--dms-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.dms-dashboard-navlink:hover {
    color: var(--dms-text);
}

.dms-section {
    margin-bottom: 36px;
}

.dms-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-subscription-card,
.dms-seat-card {
    background: var(--dms-bg-alt);
}

.dms-card-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.dms-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dms-radius-pill);
    background: var(--dms-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dms-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dms-radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e5e7eb;
    color: var(--dms-muted);
}

.dms-status-active,
.dms-status-trialing {
    background: #d1fae5;
    color: #065f46;
}

.dms-status-past_due {
    background: #fef3c7;
    color: #92400e;
}

.dms-status-cancelled,
.dms-status-expired,
.dms-status-paused {
    background: #fee2e2;
    color: #991b1b;
}

.dms-subscription-meta {
    margin: 4px 0;
    font-size: 14px;
    color: var(--dms-muted);
}

.dms-trial-notice {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--dms-main);
    font-weight: 600;
}

.dms-seat-licence code {
    background: #fff;
    padding: 4px 8px;
    border-radius: var(--dms-radius-sm);
    border: 1px solid var(--dms-border);
    font-family: 'DM Mono', ui-monospace, "SF Mono", monospace;
    font-size: 13px;
}

.dms-empty-state {
    text-align: center;
}

/* Card-as-link (home dashboard subscription/seat cards) */

.dms-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.dms-card-link:hover {
    border-color: var(--dms-main);
    color: inherit;
}

.dms-card-cta {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dms-main);
}

/* Subscription detail */

.dms-dashboard-back {
    color: var(--dms-muted);
    text-decoration: none;
    font-size: 14px;
}

.dms-dashboard-back:hover {
    color: var(--dms-main);
}

.dms-subscription-detail-header {
    margin-bottom: 24px;
}

.dms-subscription-detail-header .dms-card-header {
    margin-bottom: 8px;
}

/* Tabs */

.dms-tabs {
    display: flex;
    border-bottom: 1px solid var(--dms-border);
    margin-bottom: 24px;
}

.dms-tab {
    padding: 12px 20px;
    text-decoration: none;
    color: var(--dms-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.dms-tab:hover {
    color: var(--dms-main);
}

.dms-tab-active {
    color: var(--dms-main);
    border-bottom-color: var(--dms-main);
}

.dms-tab-summary {
    color: var(--dms-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

/* Tables */

.dms-devices-table,
.dms-invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dms-devices-table th,
.dms-invoices-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--dms-border);
    color: var(--dms-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dms-devices-table td,
.dms-invoices-table td {
    padding: 14px 8px;
    border-bottom: 1px solid var(--dms-border);
    vertical-align: middle;
}

.dms-devices-table tr:last-child td,
.dms-invoices-table tr:last-child td {
    border-bottom: 0;
}

.dms-device-deactivated {
    opacity: 0.55;
}

.dms-empty-state-inline {
    color: var(--dms-muted);
    font-size: 14px;
    font-style: italic;
}

.dms-seat-block + .dms-seat-block {
    margin-top: 16px;
}

.dms-seat-block-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    /* Long unbroken email strings (e.g. someverylongname@example.com)
       must wrap inside the card on mobile rather than overflow. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}
.dms-seat-block-label {
    color: var(--dms-muted);
    font-weight: 500;
    margin-right: 6px;
}
.dms-seat-block-label::after {
    content: ':';
}
.dms-seat-block-email {
    color: var(--dms-text);
}

/* Inline form / link-button */

.dms-inline-form {
    display: inline;
    margin: 0;
}

.dms-btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--dms-main);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.dms-btn-link:hover {
    color: var(--dms-text);
}

.dms-btn-danger {
    color: #b91c1c;
}

.dms-btn-danger:hover {
    color: #7f1d1d;
}

.dms-btn-danger-outline {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #b91c1c;
    border-radius: var(--dms-radius-pill);
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
}

.dms-btn-danger-outline:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Billing */

.dms-card-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.dms-card-text {
    color: var(--dms-muted);
    margin: 0 0 14px;
}

.dms-definition-list {
    margin: 0;
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 10px;
    column-gap: 16px;
}

.dms-definition-list dt {
    color: var(--dms-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dms-definition-list dd {
    margin: 0;
    font-size: 15px;
}

.dms-danger-zone {
    border-color: #fecaca;
}

/* Visually hidden but available to screen readers. Matches WP's screen-reader-text. */
.dms-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pricing page (rendered by [dms_pricing] shortcode) */
.dms-pricing-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0;
    padding: 0;
}

.dms-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Customer-type toggle above the pricing grid. Two equal-width segmented
   buttons; selected state uses the brand colour. */
.dms-pricing-customer-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-pill);
    padding: 4px;
    margin: 0 auto 24px;
    gap: 4px;
}
.dms-pricing-toggle-btn {
    border: 0;
    background: transparent;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dms-muted);
    cursor: pointer;
    border-radius: var(--dms-radius-pill);
    transition: background 0.15s, color 0.15s;
}
.dms-pricing-toggle-btn.is-active {
    background: var(--dms-main);
    color: #fff;
}
.dms-pricing-wrap {
    text-align: initial;
}
.dms-pricing-wrap > .dms-pricing-customer-toggle {
    display: flex;
    width: max-content;
}

/* Wider modal variant for the long Widerrufsbelehrung text. */
.dms-modal-wide {
    max-width: 640px;
}
.dms-modal-fields .dms-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    margin-bottom: 12px;
    font-size: 14px;
}

.dms-pricing-card {
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    /* Anchor for the bestseller badge on the Studio variant. */
    position: relative;
}

.dms-pricing-card-studio {
    border-color: var(--dms-main);
    box-shadow: 0 0 0 1px var(--dms-main);
}

/* Bestseller badge on the Studio pricing card. Matches the colour
   and pill shape of the feature-table bestseller badge so the
   value signal reads consistently between pricing and comparison
   surfaces. Positioned top-right with a slight overhang above the
   card so it pops out as an applied "label". */
.dms-pricing-bestseller-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    background: #35d1ad;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.dms-pricing-tier-name {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-pricing-tier-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--dms-muted);
    min-height: 42px;
}

.dms-pricing-price {
    margin: 0 0 20px;
    padding: 14px 0;
    border-top: 1px solid var(--dms-border);
    border-bottom: 1px solid var(--dms-border);
}

.dms-pricing-price-amount {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--dms-text);
    line-height: 1.1;
}

.dms-pricing-price-vat {
    display: block;
    font-size: 12px;
    color: var(--dms-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dms-pricing-price-perseat {
    display: block;
    font-size: 13px;
    color: var(--dms-muted);
    margin-top: 4px;
}

.dms-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.dms-pricing-features li {
    padding: 6px 0 6px 22px;
    position: relative;
    font-size: 14px;
}

.dms-pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--dms-main);
    font-weight: 700;
}

.dms-pricing-quantity {
    margin: 0 0 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dms-pricing-qty-input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 14px;
}

/* Savings badge next to the Team-tier seat input. Mint-teal matches
   the feature table's bestseller badge so the "value signal" reads
   consistently across the pricing surface. */
.dms-pricing-savings-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #35d1ad;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dms-pricing-savings-note {
    margin: -10px 0 16px;
    font-size: 11px;
    color: var(--dms-muted);
    font-style: italic;
}

.dms-pricing-buy-btn {
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.dms-pricing-footnote {
    text-align: center;
    font-size: 13px;
    color: var(--dms-muted);
    margin-top: 16px;
}

/* Post-checkout "your subscription is processing" notice. Friendly tone,
   not error-style: light brand background, brand border-left bar, gentle
   loading hint via the spinner. Auto-dismisses after the page reloads. */
.dms-processing-notice {
    background: var(--dms-bg-alt);
    border: 1px solid var(--dms-border);
    border-left: 4px solid var(--dms-main);
    border-radius: var(--dms-radius-sm);
    padding: 14px 18px;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--dms-text);
    position: relative;
    padding-left: 46px;
}
.dms-processing-notice::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--dms-main);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dms-spin 0.9s linear infinite;
}
@keyframes dms-spin {
    to { transform: rotate(360deg); }
}
.dms-processing-notice strong {
    font-weight: 600;
}
.dms-processing-notice .dms-btn-link {
    margin-left: auto;
}
.dms-processing-notice .dms-processing-msg {
    flex-basis: 100%;
}

/* Subscription-card "Manage" CTA aligned to the right edge */
.dms-card-cta-right {
    text-align: right;
    margin-top: 12px;
}

/* Confirm modal (Add/Remove seat). Backdrop covers the viewport; the
   inner panel is centered, max ~520px wide, with comfortable padding. */
.dms-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.dms-modal-backdrop[hidden] {
    display: none;
}
.dms-modal {
    background: #fff;
    border-radius: var(--dms-radius);
    max-width: 520px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.dms-modal-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--dms-text);
}
.dms-modal-body {
    margin: 0 0 16px;
    color: var(--dms-muted);
    font-size: 14px;
}
.dms-modal-error {
    margin: 0 0 16px;
}
.dms-modal-confirm-row {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--dms-bg-alt);
    border-radius: var(--dms-radius-sm);
}
.dms-modal-confirm-row .dms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}
.dms-modal-checkbox {
    margin-top: 2px;
    flex: 0 0 auto;
}
.dms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.dms-modal-actions .dms-btn,
.dms-modal-actions .dms-btn-primary {
    margin-top: 0;
}

/* Adjust seat count card: keep + Add seat and − Remove seat on the same
   baseline. .dms-btn-primary has a global margin-top:20px that pushes
   the Add button below the Remove button — neutralise it inside this
   wrapper so they align. */
.dms-seat-quantity-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}
.dms-seat-quantity-controls .dms-btn,
.dms-seat-quantity-controls .dms-btn-primary {
    margin-top: 0;
}

/* Icon-only button (e.g. licence key copy). Square hit target, subtle
   hover, picks up the brand colour on focus / hover. */
.dms-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: #fff;
    color: var(--dms-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1;
}
.dms-icon-btn:hover,
.dms-icon-btn:focus {
    color: var(--dms-main);
    border-color: var(--dms-main);
}
.dms-icon-btn svg {
    display: block;
}

/* Licence key + copy button row layout */
.dms-seat-licence {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dms-licence-key {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---------- Mobile-only responsive layout ---------- */
@media (max-width: 640px) {
    /* Tabs scroll horizontally only when they don't fit. Setting
       overflow-y:hidden explicitly stops browsers from auto-promoting
       overflow-y to auto (which it does whenever overflow-x is set),
       which would otherwise show a permanent vertical scrollbar. */
    .dms-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .dms-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Licence key truncates so it doesn't blow out the card width */
    .dms-licence-key {
        max-width: 60%;
    }

    /* Billing definition-list: stack each dt above its dd. The whole card
       already has a border (.dms-card), and there's only one dl per
       subscription, so per-pair borders would be visual noise. */
    .dms-definition-list {
        display: block;
    }
    .dms-definition-list dt {
        display: block;
        margin-top: 14px;
    }
    .dms-definition-list dd {
        display: block;
        margin: 2px 0 0 0;
    }
    .dms-definition-list dt:first-child {
        margin-top: 0;
    }

    /* Tables collapse into stacked, bordered cards. Hide the <thead> and
       use each cell's data-label attribute as the in-row caption. Applies
       to invoices, devices, seats — anywhere a .dms-devices-table or
       .dms-invoices-table is rendered. */
    .dms-invoices-table thead,
    .dms-devices-table thead {
        display: none;
    }
    .dms-invoices-table,
    .dms-invoices-table tbody,
    .dms-invoices-table tr,
    .dms-invoices-table td,
    .dms-devices-table,
    .dms-devices-table tbody,
    .dms-devices-table tr,
    .dms-devices-table td {
        display: block;
        width: 100%;
    }
    .dms-invoices-table tr,
    .dms-devices-table tr {
        border: 1px solid var(--dms-border);
        border-radius: var(--dms-radius-sm);
        margin-bottom: 12px;
        padding: 8px 12px;
    }
    .dms-invoices-table td,
    .dms-devices-table td {
        padding: 6px 0;
        border: 0;
    }
    .dms-invoices-table td[data-label]::before,
    .dms-devices-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: var(--dms-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
}

/* ---------- AI tab chart filter ----------
   Compact form (date inputs, pill preset link, Apply button) sitting in
   the top-right of the Usage card. Native <input type="date"> is heavily
   browser-styled by default; this matches the rest of the dashboard's
   border / radius / focus tokens without trying to fully restyle the
   calendar dropdown itself (which Chrome and Safari render natively). */
.dms-ai-chart-filter {
    font-family: inherit;
}
.dms-ai-chart-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dms-muted);
    margin: 0;
}
.dms-ai-chart-filter input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--dms-text);
    background: #fff;
    line-height: 1.3;
    /* Reset Safari's default native chrome around the field. */
    -webkit-appearance: none;
    appearance: none;
    min-width: 140px;
    box-sizing: border-box;
}
.dms-ai-chart-filter input[type="date"]:focus {
    outline: none;
    border-color: var(--dms-main);
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.15);
}
/* Tint the WebKit native calendar picker icon to the brand colour
   instead of the default black — keeps it visible on the white field
   and ties it into the rest of the chrome. */
.dms-ai-chart-filter input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(35%) sepia(75%) saturate(800%) hue-rotate(180deg);
}
.dms-ai-chart-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Apply button — match the rest of the filter's compact sizing
   (the global .dms-btn pill is 12px×28px which is too big alongside
   13px form fields). */
.dms-ai-chart-filter .dms-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* ---------- Filter popover (used by the AI usage chart) ----------
   The toggle button is a compact pill; the popover anchors to its
   right edge and opens below. Closes on outside click + ESC (via the
   shared dms-popover.js handler inlined per template). */
.dms-filter-wrap {
    position: relative;
    display: inline-block;
}
.dms-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-pill);
    background: #fff;
    color: var(--dms-text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
    transition: border-color .15s, background .15s;
}
.dms-filter-toggle:hover,
.dms-filter-toggle:focus {
    outline: none;
    border-color: var(--dms-main);
    background: var(--dms-bg-alt);
}
.dms-filter-toggle svg {
    flex: 0 0 auto;
    color: var(--dms-muted);
}
.dms-filter-toggle-active {
    border-color: var(--dms-main);
    color: var(--dms-main);
}
.dms-filter-toggle-active svg {
    color: var(--dms-main);
}
.dms-filter-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dms-main);
    margin-left: 2px;
}
.dms-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 260px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.dms-popover[hidden] {
    display: none;
}
.dms-popover-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}
.dms-popover-row:last-of-type {
    margin-bottom: 0;
}
.dms-popover-row label {
    display: flex;
    flex-direction: column;
    flex: 1 1 110px;
    gap: 4px;
    font-size: 13px;
    color: var(--dms-muted);
}
/* Apply (left) + preset link (right) on the same row, vertical-
   centered so the link sits on the button's text baseline. */
.dms-popover-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dms-popover-actions .dms-btn {
    padding: 8px 18px;
    font-size: 13px;
    margin: 0;
}
/* "Reset" link rendered as a plain text link in brand colour, not a
   button — keeps the popover's primary action visually unambiguous
   (the Apply button) while still letting the user wipe a custom date
   range with one click. Only rendered when a custom range is active;
   the no-op state (already on the default) is suppressed in markup
   rather than disabled-styled. */
.dms-filter-preset-link {
    color: var(--dms-main);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dms-filter-preset-link:hover {
    text-decoration: none;
}

/* Quick-select chips at the top of the filter popover. Each chip
   is just an anchor to the same tab URL with ?from/?to query
   args set, so picking a preset round-trips through a normal
   page load — no JS needed and the URL stays bookmarkable. */
.dms-popover-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.dms-popover-preset {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: #f4f9fe;
    color: var(--dms-main);
    border: 1px solid #d8e5f0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.dms-popover-preset:hover,
.dms-popover-preset:focus {
    /* Soft hover: just tighten the border to brand blue and deepen
       the existing tint slightly. The previous full-inverse hover
       (brand-blue fill, white text) read as a *selected* state,
       which confused customers into thinking they had to click
       again to confirm. Border-only is the gentlest interactive
       affordance that still signals clickability. */
    background: #e6f1fb;
    border-color: var(--dms-main);
    color: var(--dms-main);
    text-decoration: none;
    outline: none;
}

/* =========================================================
 * Public [dms_feature_table] comparison-table styling.
 * Embedded with the rest of the dashboard CSS so the shortcode
 * doesn't need a separate stylesheet enqueue — same enqueue
 * already loads on every page that uses any DMS shortcode.
 * ========================================================= */
.dms-feature-table {
    width: 100%;
    /* `separate` (not `collapse`) is required for sticky thead to work
       cleanly — collapsed borders aren't repainted while a row sticks,
       leaving artefacts as the body scrolls underneath. Use
       border-bottom on cells instead and 0 spacing to mimic collapsed
       look. */
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
    font-family: inherit;
}
.dms-feature-table th,
.dms-feature-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--dms-border);
    vertical-align: middle;
}
.dms-feature-table thead th {
    font-weight: 600;
    color: var(--dms-text);
    /* Solid white background (was the pale bg-alt) ensures the sticky
       header completely masks body rows scrolling underneath — the
       previous tint was too light, so check/cross icons in body cells
       could appear to "bleed through" while scrolling. */
    background: #ffffff;
    background-clip: padding-box;
    border-bottom: 2px solid var(--dms-border);
    /* Header sticks to viewport top so customers keep their bearings
       while scrolling a long feature list. The badge above the
       highlighted tier rides along because it's positioned inside
       the sticky th. */
    position: sticky;
    top: 0;
    z-index: 5;
}
.dms-feature-table .dms-ft-tier-col {
    width: 110px;
    text-align: center;
}
.dms-feature-table .dms-ft-feature-name {
    font-weight: 500;
    color: var(--dms-text);
}
.dms-feature-table .dms-ft-cell {
    text-align: center;
}
.dms-feature-table .dms-ft-category-row th {
    background: linear-gradient(45deg, #f4f9fe 0%, #e6f1fb 100%);
    color: var(--dms-main);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 14px;
}
.dms-feature-table .dms-ft-cell-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dms-main);
}
.dms-feature-table .dms-ft-cell-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff3c61;
}
.dms-feature-table .dms-ft-text {
    font-weight: 500;
    color: var(--dms-text);
}
.dms-feature-table .dms-ft-missing {
    color: #d1d5db;
}

/* ---------- Help text icon + hover popover ---------- */
.dms-feature-table .dms-ft-help-wrap {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: baseline;
}
.dms-feature-table .dms-ft-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: var(--dms-main);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
}
.dms-feature-table .dms-ft-help-trigger:focus {
    outline: 2px solid var(--dms-main);
    outline-offset: 2px;
}
.dms-feature-table .dms-ft-help-popover {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    /* Anchored to the trigger's left edge rather than centered so the
       popover never overflows past the table's leftmost column when
       the feature name is short. Always extends rightward into the
       wider tier columns. */
    left: -4px;
    z-index: 20;
    width: 260px;
    padding: 10px 12px;
    background: #ffffff;
    color: var(--dms-text);
    border: 1px solid var(--dms-border);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    transition: opacity 120ms ease;
    pointer-events: none;
}
/* Tiny arrow pointing down at the trigger (which sits roughly 4–14px
   in from the popover's left edge given the left:-4px anchor + the
   18px trigger width). */
.dms-feature-table .dms-ft-help-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 10px;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 var(--dms-border));
}
.dms-feature-table .dms-ft-help-popover p {
    margin: 0 0 6px 0;
}
.dms-feature-table .dms-ft-help-popover p:last-child {
    margin-bottom: 0;
}
.dms-feature-table .dms-ft-help-popover a {
    color: var(--dms-main);
}
.dms-feature-table .dms-ft-help-wrap:hover .dms-ft-help-popover,
.dms-feature-table .dms-ft-help-wrap:focus-within .dms-ft-help-popover {
    visibility: visible;
    opacity: 1;
}

/* ---------- Highlighted tier column + Bestseller badge ---------- */
/* The whole column is wrapped in a continuous 1px badge-coloured
   outline: every cell gets left + right borders so they stack
   into vertical rails, the header cell adds the top border, and
   the CTA row cell adds the bottom border. With
   border-collapse: separate the per-cell borders meet without
   overlap and read as one box around the entire column. */
.dms-feature-table .dms-ft-col-highlight {
    background: #e5f0fa;
    /* No `position: relative` here — it would override
       `position: sticky` on the header cell (higher selector
       specificity). The bestseller badge is `position: absolute`
       and anchors against the sticky thead th just fine because
       sticky also establishes a containing block for absolutely
       positioned descendants. */
    border-left: 1px solid #35d1ad;
    border-right: 1px solid #35d1ad;
}
.dms-feature-table thead th.dms-ft-col-highlight {
    /* Solid, opaque background on the sticky highlighted header so
       icons in body cells can't visually bleed through during
       scroll. Brand-tinted and a touch deeper than body cells to
       reinforce the column identity. Rounded top corners close the
       outline into a card silhouette at the column's top. */
    background: #cfe4f5;
    color: var(--dms-main);
    border-top: 1px solid #35d1ad;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.dms-feature-table .dms-ft-bestseller-badge {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #35d1ad;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 6; /* above the sticky header it sits on. */
}
.dms-feature-table thead th .dms-ft-tier-label {
    display: inline-block;
}

/* ---------- CTA row ---------- */
.dms-feature-table .dms-ft-cta-row td {
    text-align: center;
    padding: 22px 14px;
    border-bottom: none;
    background: transparent;
}
.dms-feature-table .dms-ft-cta-row .dms-ft-col-highlight {
    /* Match the rest of the highlighted column so the bottom of the
       "card" stays continuous with the rows above. Without this the
       transparent CTA-row tds would punch through the column
       highlight at the very bottom. The bottom border + rounded
       bottom corners close the outline into a card silhouette. */
    background: #e5f0fa;
    border-bottom: 1px solid #35d1ad;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dms-feature-table .dms-ft-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--dms-main);
    border: 1px solid var(--dms-main);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.dms-feature-table .dms-ft-cta-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
}
.dms-feature-table .dms-ft-cta-btn:hover,
.dms-feature-table .dms-ft-cta-btn:focus {
    background: var(--dms-main);
    color: #fff;
}
.dms-feature-table .dms-ft-cta-btn-primary {
    background: var(--dms-main);
    color: #fff;
}
.dms-feature-table .dms-ft-cta-btn-primary:hover,
.dms-feature-table .dms-ft-cta-btn-primary:focus {
    background: #11618f;
    color: #fff;
}

/* Wrapper around the table. Only activates horizontal scrolling
   on mobile, so the sticky thead behavior on desktop isn't broken
   by the wrapper becoming a scroll container (any non-visible
   overflow on an ancestor turns it into the sticky scrollport,
   even when no scrollbar appears). On narrow viewports the table
   gets a min-width that keeps the columns readable rather than
   letting the browser crush them to fit. */
.dms-feature-table-scroll {
    /* No-op on desktop. */
}

@media (max-width: 640px) {
    .dms-feature-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Explicit touch-action: themes or sliders sometimes set
           touch-action: pan-y on body/wrappers, which silently kills
           horizontal swipe on descendants. pan-x pan-y explicitly
           re-allows the horizontal swipe gesture; pinch-zoom is
           already excluded (which is correct for a scroll container). */
        touch-action: pan-x pan-y;
        /* Subtle thin scrollbar so the swipe affordance is visible to
           customers who don't try a swipe gesture first. Firefox uses
           scrollbar-width, WebKit/Blink need the pseudo-elements. */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    }
    .dms-feature-table-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .dms-feature-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .dms-feature-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 3px;
    }
    .dms-feature-table {
        min-width: 560px;
    }
    .dms-feature-table th,
    .dms-feature-table td {
        padding: 10px 8px;
        font-size: 14px;
    }
    .dms-feature-table .dms-ft-tier-col {
        width: auto;
    }
    .dms-feature-table .dms-ft-bestseller-badge {
        font-size: 10px;
        padding: 2px 8px;
        top: -10px;
    }
}