/*
 * 50 Page Dental Practice Management Comparison.
 * Load order: ...css/10-table.css -> ...style.css -> css/pages/50-page-*.css.
 * Purpose: PM Comparison page-only overrides for sticky headers,
 *          vertical category labels, CSS tooltips, mobile stacking.
 * Scope: .page-id-11238
 * Reuses: dmax-guide-table + dg-* classes from 10-table.css / 50-page-xray-comparison.css
 */

.dmax-pm-intro-copy {
    margin: auto;
    max-width: 750px;
}

/* ── Sticky table header ────────────────────────────────── */
.dmax-pm-comparison-table th,
.dmax-pm-comparison-table thead tr th,
.dmax-pm-comparison-table tr th {
    position: sticky;
    top: 90px;
    z-index: 10;
    /* background-color: #ffffff; */
    text-align: center;
}

.dmax-guide-table.dmax-pm-comparison-table thead tr th,
.entry-content table.dmax-guide-table.dmax-pm-comparison-table tbody tr th,
.dmax-guide-table.dmax-pm-comparison-table tr th {
    /* background-color: #ffffff; */
    color: var(--global-palette6, #08263c);
}

.dmax-pm-comparison-table th img,
.dmax-pm-mobile-table img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

/* Override row overflow so sticky table headers can escape the row wrapper. Add visual breathing room below H1 page title */
.page-id-11238 .kb-row-layout-idxpmcompdesk,
.page-id-11238 .dmax-pm-desktop-row {
    overflow: visible !important;
    padding: clamp(60px, 6vw, 90px) 0;
}

.page-id-11238 .dmax-pm-mobile-row {
    padding: clamp(40px, 4vw, 60px) 0;
}



/* ── Vertical category labels ───────────────────────────── */
.page-id-11238 .dmax-pm-comparison-table td.dg-cat-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-align: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: #272a63;
    vertical-align: middle;
    background-color: #ffffff !important;
    border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    padding-right: 15px;
    width: 20px !important;
}

.page-id-11238 .dmax-pm-comparison-table td.dg-cat-vertical h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #272a63 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}


/* ── CSS-only tooltips ──────────────────────────────────── */
.page-id-11238 .dmax-pm-tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
    font-style: normal;
    font-size: 0;
    /* Hide tiny Unicode ⓘ character */
    color: inherit;
    opacity: 0.8;
    transition: opacity 0.15s;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23155492'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    vertical-align: middle;
}

/* White contrast variant of the premium SVG info icon for dark navy/blue columns (columns 3+) */
.page-id-11238 .dmax-pm-comparison-table td:nth-child(n+3) .dmax-pm-tooltip,
.page-id-11238 [style*="background:#272a63"] .dmax-pm-tooltip,
.page-id-11238 .dmax-pm-dark-bg .dmax-pm-tooltip,
.page-id-11238 .dg-bg-primary .dmax-pm-tooltip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}


.page-id-11238 .dmax-pm-tooltip:hover,
.page-id-11238 .dmax-pm-tooltip:focus {
    opacity: 1;
}

.page-id-11238 .dmax-pm-tooltip::after {
    content: attr(data-text);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0b1f33;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 4px;
    min-width: 120px;
    min-width: 190px;
    max-width: 420px;
    white-space: normal;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.28), 0 2px 8px rgba(255, 255, 255, 0.18);
}

.page-id-11238 .dmax-pm-tooltip:hover::after,
.page-id-11238 .dmax-pm-tooltip:focus::after {
    opacity: 1;}

/* Arrow */
.page-id-11238 .dmax-pm-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0b1f33;
    z-index: 21;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.page-id-11238 .dmax-pm-tooltip:hover::before,
.page-id-11238 .dmax-pm-tooltip:focus::before {
    opacity: 1;
}

/* Dynamically elevate stacking context on hover/focus to render tooltip bubbles above the sticky table headers */
.page-id-11238 .dmax-pm-comparison-table td:hover,
.page-id-11238 .dmax-pm-comparison-table td:focus-within {
    position: relative;
    z-index: 13;
}


/* ── PM-specific table overrides ────────────────────────── */
/* Ensure td is standard table cell, and make the direct child wrapper a relative box holding the content */
.page-id-11238 .dmax-pm-cell-with-tip,
.page-id-11238 .dmax-pm-comparison-table td {
    vertical-align: middle;
    text-align: center;
}

/* Condense table cells for high-density practice management dataset */
.page-id-11238 .dmax-pm-comparison-table tr th,
.page-id-11238 .dmax-pm-comparison-table td {
    /* padding: 10px 12px; */
    padding: .5625rem .75rem;
}

/* .page-id-11238 .dmax-pm-comparison-table tr th, */
.page-id-11238 .dmax-pm-comparison-table td {
    /* font-size: 0.825rem; */
}

/* Maintain vertical text padding and width constraints on rotated category headings */
.page-id-11238 .dmax-pm-comparison-table td.dg-cat-vertical {
    padding: 15px 5px !important;
    width: 20px !important;
}

/* Keep desktop section dividers visible even when the global table last-row rule removes borders. */
.page-id-11238 .dmax-pm-comparison-table td[colspan="6"][style*="border-bottom-color:black"] {
    /* border-bottom: 1px solid #000000 !important; */
}

/* Some imported dark cells only set border-right-color, so restore the missing vertical dividers. */
.page-id-11238 .dmax-pm-comparison-table td[style*="border-right-color:white"] {
    border-right: 1px solid #ffffff !important;
}

.page-id-11238 .dmax-pm-comparison-table td[style*="border-right-color:black"] {
    border-right: 1px solid #000000 !important;
}


.dmax-pm-comparison-table td>div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 24px;
    padding: 0 22px;
    /* Ensures centered checks/texts don't overlap absolute right tooltip */
}

/* Disable legacy absolute layout and float hacks on the centered element */
.dmax-pm-comparison-table td>div>div:first-child {
    position: static;
    width: auto;
    float: none;
    display: inline-block;
}

/* Absolute position the tooltip wrapper container to the far right of the cell, vertically centered */
.page-id-11238 .dmax-pm-comparison-table td>div div[style*="float:right"],
.page-id-11238 .dmax-pm-comparison-table td>div>div:last-child {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

.dmax-pm-comparison-table td>div .infobox {
    display: inline-block;
    vertical-align: middle;
}


/* Check images centered in cells - sized exactly like production (15px x 15px) */
.dmax-pm-comparison-table td img.dmax-pm-check,
.dmax-guide-table td img.dmax-pm-check,
.dmax-pm-mobile-table td img.dmax-pm-check {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    max-width: 15px;
    margin: 0 auto;
}


/* Category separator rows */
.page-id-11238 .dmax-guide-table tr.dg-separator td {
    border-bottom: 2px solid #000000;
    padding: 0;
    height: 4px;
}

/* ── Legend Table Styling (Desktop) ───────────────────────── */
.page-id-11238 .dmax-pm-legend-table {
    width: auto !important;
    max-width: 100% !important;
    margin: 1.5rem auto 2.5rem auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(16, 84, 146, 0.12) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

.page-id-11238 .dmax-pm-legend-table tr,
.page-id-11238 .dmax-pm-legend-table td {
    border: none !important;
    padding: 10px 22px !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.page-id-11238 .dmax-pm-legend-table td:first-child {
    background: #0b1f33 !important;
    color: #ffffff !important;
    padding-left: 28px !important;
    text-transform: uppercase !important;
    font-size: 0.775rem !important;
    letter-spacing: 1.2px !important;
}

.page-id-11238 .dmax-pm-legend-table td img.dmax-pm-check {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    margin-top: -3px !important;
}

/* ── Legend Table Styling (Mobile) ────────────────────────── */
.page-id-11238 .dmax-pm-mobile-legend {
    width: 100% !important;
    margin: 1rem 0 2rem 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(16, 84, 146, 0.1) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.page-id-11238 .dmax-pm-mobile-legend tr,
.page-id-11238 .dmax-pm-mobile-legend td {
    border: none !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.page-id-11238 .dmax-pm-mobile-legend td:first-child {
    background: #0b1f33 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 0.675rem !important;
    letter-spacing: 0.8px !important;
    padding-left: 14px !important;
}

.page-id-11238 .dmax-pm-mobile-legend td img.dmax-pm-check {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 2px !important;
}

/* ── Software competitor breakdown sections ────────────────── */
.page-id-11238 .software-section {
    padding: 1em 0;
}

/* ── Mobile stacked table & overrides ─────────────────────── */
@media (max-width: 767px) {
    .dmax-pm-mobile-table {
        width: 100%;
        border-collapse: collapse;
    }

    .dmax-pm-mobile-table td,
    .entry-content table.dmax-pm-mobile-table td {
        /* padding: 0.75rem 1rem; */
        padding: 0.725rem 0;
        font-size: 0.8125rem;
        border-bottom: 1px solid rgba(11, 31, 51, 0.06);
        /* border-left: 0; */
        /* border-top: 0; */
        border: 0;
    }

    .dmax-pm-mobile-table .dmax-pm-mob-cat,
    .dmax-pm-mobile-table strong[id^="pm-mob-"] {
        display: block;
        background: var(--global-palette6, #08263c);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .dmax-pm-mobile-table strong[id^="pm-mob-"] span {
        font-size: inherit !important;
        color: inherit !important;
    }
}