/* ============================================================
   tw-document-preview.css
   Word-document-style live preview in a slide-out drawer (RHS).
   Typography/colour values extracted from the IPP assessment
   report template (Segoe UI; teal #1FB5BE; ink #323B42).
   Depends on: nothing (Bootstrap-compatible, no overrides).
   ============================================================ */

:root {
    --tw-doc-teal: #1FB5BE;
    --tw-doc-ink: #323B42;
    --tw-doc-orange: #F05A29;
    --tw-doc-rule: #BEBFBE;
    --tw-doc-red: #D2212C;
    --tw-doc-amber: #FFBE00;
    --tw-doc-green: #228722;
    --tw-doc-neutral: #DDDCDA;
    --tw-doc-page-width: 794px; /* A4 @ 96dpi */
}

/* ------------------------------------------------------------
   The drawer
   ------------------------------------------------------------ */
.tw-doc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 620px; /* default; JS resizes + persists */
    max-width: 100vw;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    visibility: hidden; /* keep out of tab order when closed */
}

    .tw-doc-drawer.open {
        transform: none;
        visibility: visible;
    }

    .tw-doc-drawer.no-transition {
        transition: none;
    }

/* body push while the drawer is open — value set by JS */
body {
    transition: padding-right .28s ease;
}

    body.tw-doc-no-transition {
        transition: none;
    }

/* ------------------------------------------------------------
   The toggle tab: protrudes from the drawer's left edge so it
   travels with the drawer (visible when closed, moves when open)
   ------------------------------------------------------------ */
.tw-doc-drawer-tab {
    position: absolute;
    left: -2.6rem;
    top: 40%;
    width: 2.6rem;
    padding: .85rem 0;
    border: 0;
    border-radius: .375rem 0 0 .375rem;
    background: var(--tw-doc-teal);
    color: #fff;
    box-shadow: -3px 2px 8px rgba(0, 0, 0, .22);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: .8rem;
    letter-spacing: .04em;
    cursor: pointer;
    visibility: visible; /* stays visible even when drawer is hidden */
}

    .tw-doc-drawer-tab:hover {
        filter: brightness(1.07);
    }

    .tw-doc-drawer-tab .fa-solid,
    .tw-doc-drawer-tab .fa-regular {
        margin-bottom: .45rem;
    }

/* ------------------------------------------------------------
   The resize handle on the drawer's left edge
   ------------------------------------------------------------ */
.tw-doc-drawer-resize {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 2;
}

    .tw-doc-drawer-resize::after {
        content: "";
        position: absolute;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 44px;
        border-radius: 2px;
        background: #adb5bd;
        opacity: 0;
        transition: opacity .15s;
    }

    .tw-doc-drawer-resize:hover::after,
    .tw-doc-drawer.resizing .tw-doc-drawer-resize::after {
        opacity: 1;
    }

body.tw-is-resizing {
    cursor: col-resize;
    user-select: none;
}

    body.tw-is-resizing iframe {
        pointer-events: none;
    }
/* TinyMCE iframes */

/* ------------------------------------------------------------
   Drawer toolbar + the "desk"
   ------------------------------------------------------------ */
.tw-doc-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .5rem 1rem;
    font-size: .8rem;
    color: #5b6570;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

.tw-doc-preview-panel {
    background: #e9e9ed;
    padding: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* ------------------------------------------------------------
   The sheet
   ------------------------------------------------------------ */
.tw-doc-page-wrapper {
    overflow: hidden;
}

.tw-doc-page {
    width: var(--tw-doc-page-width);
    min-height: 1123px; /* A4 min-height; grows with content */
    padding: 96px; /* 2.54cm margins, per the template */
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    transform-origin: top left;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 10pt;
    line-height: 1.33; /* 13.3pt leading, measured */
    color: var(--tw-doc-ink);
}

    /* ------------------------------------------------------------
   Document typography (matches the Word template styles)
   ------------------------------------------------------------ */
    .tw-doc-page p {
        margin: 0 0 8pt;
    }

    .tw-doc-page h1 { /* document-level heading */
        font-size: 16pt;
        font-weight: 600; /* Segoe UI Semibold */
        color: var(--tw-doc-teal);
        margin: 0 0 10pt;
        line-height: 1.2;
    }

    .tw-doc-page h2 { /* numbered section headings */
        font-size: 14pt;
        font-weight: 600;
        color: var(--tw-doc-teal);
        margin: 14pt 0 6pt;
        line-height: 1.2;
    }

    .tw-doc-page h3 { /* sub-headings, ink not teal */
        font-size: 14pt;
        font-weight: 600;
        color: var(--tw-doc-ink);
        margin: 12pt 0 6pt;
        line-height: 1.2;
    }

    .tw-doc-page strong {
        font-weight: 700;
    }

    /* orange bullet glyphs, ink text */
    .tw-doc-page ul {
        margin: 0 0 8pt;
        padding-left: 22pt;
        list-style: none;
    }

        .tw-doc-page ul li {
            position: relative;
            margin-bottom: 2pt;
        }

            .tw-doc-page ul li::before {
                content: "\2022";
                color: var(--tw-doc-orange);
                position: absolute;
                left: -12pt;
                font-weight: 700;
            }

    /* ------------------------------------------------------------
   Tables: 0.5pt hairline borders
   ------------------------------------------------------------ */
    .tw-doc-page table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 10pt;
        font-size: 10pt;
    }

        .tw-doc-page table td,
        .tw-doc-page table th {
            border: 0.5pt solid var(--tw-doc-rule);
            padding: 6pt 9pt;
            text-align: left;
            vertical-align: top;
            font-weight: 400;
        }

        .tw-doc-page table th {
            font-weight: 700;
        }

    /* traffic-light rating cells */
    .tw-doc-page td.rating-red {
        background: var(--tw-doc-red);
        color: #fff;
    }

    .tw-doc-page td.rating-amber {
        background: var(--tw-doc-amber);
    }

    .tw-doc-page td.rating-green {
        background: var(--tw-doc-green);
        color: #fff;
    }

    .tw-doc-page td.rating-noted {
        background: var(--tw-doc-neutral);
    }

    /* ------------------------------------------------------------
   Merge tokens
   ------------------------------------------------------------ */
    .tw-doc-page .doc-token-empty {
        color: #9aa2a9;
        font-style: italic;
        background: #f2f4f5;
        border-radius: 2px;
        padding: 0 2px;
    }

    /* conditional sections hidden until their trigger value matches */
    .tw-doc-page .doc-section-hidden {
        display: none;
    }

/* ------------------------------------------------------------
   Small screens: full-width overlay, no push
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .tw-doc-drawer {
        width: 100vw !important;
    }

    .tw-doc-drawer-resize {
        display: none;
    }
}

/* ------------------------------------------------------------
   Admin editor: token chips (non-editable islands in TinyMCE)
   ------------------------------------------------------------ */
.tw-doc-page .doc-token-chip {
    display: inline-block;
    background: rgba(31, 181, 190, .10);
    border: 1px solid var(--tw-doc-teal);
    border-radius: 3px;
    color: #0E7C83;
    padding: 0 4px;
    font-size: 9pt;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}