/**
 * BCE ERP - Centralized Custom Extension & Component Stylesheet
 * 
 * 說明：
 * 本樣式檔為 BCE ERP 全系統專屬擴充樣式層，置於 vendor 預編譯 app.min.css 之後載入。
 * 1. 補齊 Tailwind CSS 於 Purge/Tree-shaking 時被剔除之負向定位與 Transform Utility Class。
 * 2. 集中收納全系統 HTML 模板原本分散內嵌的 <style> 區塊（消除 Code Smell）。
 * 3. 包含頂部即時通知中心、蘋果級彈窗動畫、防偽浮水印、薪資單列印、儀表板迷你月曆與考勤時間軸。
 */

/* ==========================================================================
   1. Tailwind CSS 缺失 Utility Classes 補全層
   ========================================================================== */

/* 負向 Top 位移 */
.-top-0\.5, .\\-top-0\\.5 { top: -0.125rem !important; }
.-top-1,   .\\-top-1   { top: -0.25rem !important; }
.-top-1\.5, .\\-top-1\\.5 { top: -0.375rem !important; }
.-top-2,   .\\-top-2   { top: -0.5rem !important; }
.-top-2\.5, .\\-top-2\\.5 { top: -0.625rem !important; }
.-top-3,   .\\-top-3   { top: -0.75rem !important; }

/* 負向 End / Right 位移 (相容 LTR 與 RTL) */
.-end-0\.5, .\\-end-0\\.5 { inset-inline-end: -0.125rem !important; }
.-end-1,   .\\-end-1   { inset-inline-end: -0.25rem !important; }
.-end-1\.5, .\\-end-1\\.5 { inset-inline-end: -0.375rem !important; }
.-end-2,   .\\-end-2   { inset-inline-end: -0.5rem !important; }
.-end-2\.5, .\\-end-2\\.5 { inset-inline-end: -0.625rem !important; }
.-end-3,   .\\-end-3   { inset-inline-end: -0.75rem !important; }

.-right-0\.5, .\\-right-0\\.5 { right: -0.125rem !important; }
.-right-1,   .\\-right-1   { right: -0.25rem !important; }
.-right-1\.5, .\\-right-1\\.5 { right: -0.375rem !important; }
.-right-2,   .\\-right-2   { right: -0.5rem !important; }
.-right-2\.5, .\\-right-2\\.5 { right: -0.625rem !important; }
.-right-3,   .\\-right-3   { right: -0.75rem !important; }

/* 2D 平移 Transform (相容雙重轉義與原生名稱) */
.-translate-y-1\/2, .\\-translate-y-1\\/2 { transform: translateY(-50%) !important; }
.-translate-x-1\/2, .\\-translate-x-1\\/2 { transform: translateX(-50%) !important; }
.translate-y-1\/2,  .\\translate-y-1\\/2  { transform: translateY(50%) !important; }
.translate-x-1\/2,  .\\translate-x-1\\/2  { transform: translateX(50%) !important; }

/* 常用小字體與寬度補強 */
.text-\[10px\], .text-10px { font-size: 10px !important; line-height: 14px !important; }
.text-\[11px\], .text-11px { font-size: 11px !important; line-height: 15px !important; }
.min-w-\[16px\] { min-width: 16px !important; }
.min-w-\[18px\] { min-width: 18px !important; }
.min-w-\[20px\] { min-width: 20px !important; }


/* ==========================================================================
   2. 頂部導航列樣式與響應式規則 (_topbar.html)
   ========================================================================== */

/* 角色身分快速切換條響應式顯隱 */
.topbar-role-switcher {
    display: none;
}
@media (min-width: 1200px) {
    .topbar-role-switcher {
        display: flex;
    }
}

/* 行動端打卡動作按鈕微縮 */
@media (max-width: 639px) {
    .topbar-clock-actions {
        margin-inline-start: 0;
        gap: 0.25rem;
    }
    .topbar-clock-actions .btn {
        padding-inline: 0.55rem;
    }
    .topbar-clock-label {
        display: none;
    }
}

/* 即時通知中心 — 鈴鐺圖示與懸浮數量徽章 (SYS-01) */
.bce-bell-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
}

.bce-bell-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
}

#notification-badge {
    position: absolute !important;
    top: -5px !important;
    right: -9px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 9999px !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.45) !important;
    border: 2px solid #ffffff !important;
    z-index: 20 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

html.dark #notification-badge,
[data-mode="dark"] #notification-badge {
    border-color: #1e293b !important;
}

#notification-badge.hidden {
    display: none !important;
}


/* ==========================================================================
   3. 蘋果級 macOS / iOS 彈窗動畫與通用審核卡片 (Apple System Easing)
   ========================================================================== */

.reject-modal-backdrop,
.approval-modal-backdrop {
    background-color: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reject-modal-card,
.approval-modal-card {
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-pop-hidden {
    transform: scale(0.92) translateY(10px) !important;
    opacity: 0 !important;
}

.modal-pop-visible {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}


/* ==========================================================================
   4. 薪資管理與通用毛玻璃卡片 (Payroll & Glassmorphism)
   ========================================================================== */

.bce-glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}
:is([data-mode="dark"] .bce-glass-card),
html.dark .bce-glass-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(51, 65, 85, 0.8);
}

.bce-payslip-hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #3730a3 50%, #0284c7 100%) !important;
    color: #ffffff !important;
}

.bce-payroll-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;
    color: #ffffff !important;
}

.bce-record-hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #3730a3 100%) !important;
    color: #ffffff !important;
}

.bce-table-th {
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.75rem;
}


/* ==========================================================================
   5. 通用按鈕樣式 (BCE Theme Buttons)
   ========================================================================== */

.btn-bce-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
}
.btn-bce-primary:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.btn-bce-secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-bce-secondary:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html.dark .btn-bce-secondary,
[data-mode="dark"] .btn-bce-secondary {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
html.dark .btn-bce-secondary:hover,
[data-mode="dark"] .btn-bce-secondary:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

.btn-bce-success {
    background-color: #059669 !important;
    color: #ffffff !important;
}
.btn-bce-success:hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}

.btn-bce-dark {
    background-color: #0f172a !important;
    color: #ffffff !important;
}
.btn-bce-dark:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

.bce-btn-excel,
.btn-bce-excel {
    background-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}
.bce-btn-excel:hover,
.btn-bce-excel:hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}

.bce-btn-csv {
    background-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(51, 65, 85, 0.25) !important;
}
.bce-btn-csv:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}


/* ==========================================================================
   6. 儀表板迷你月曆與狀態點 (Dashboard Calendar Widget - ATT-05)
   ========================================================================== */

.bce-cal-grid-7 {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
}

.bce-cal-cell {
    aspect-ratio: 1 / 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 2px !important;
    transition: all 0.15s ease;
}

.bce-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.bce-dot-clockin {
    background-color: #10b981 !important; /* Emerald */
}
.bce-dot-leave {
    background-color: #8b5cf6 !important; /* Purple */
}
.bce-dot-m365 {
    background-color: #0284c7 !important; /* Outlook Blue */
    box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.3) !important;
}
.bce-dot-holiday {
    background-color: #ef4444 !important; /* Rose Red */
}
.bce-dot-white {
    background-color: #ffffff !important;
}


/* ==========================================================================
   7. 考勤垂直時間軸與結算標籤 (Attendance Components)
   ========================================================================== */

/* 垂直簽核時間軸連接線 */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: -16px;
    left: 17px;
    width: 2px;
    background: #e2e8f0;
}
.dark .timeline-item::before,
html.dark .timeline-item::before {
    background: #334155;
}
.timeline-item:last-child::before {
    display: none;
}

/* HR 考勤月度結算中心徽章 */
.bce-badge-perfect {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}
.bce-badge-anomaly {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}
.bce-badge-normal {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

.bce-anomaly-toggle-active {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25) !important;
}


/* ==========================================================================
   8. 防偽浮水印與列印匯出規範 (Watermark & Print Layout)
   ========================================================================== */

.bce-watermark-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    mix-blend-mode: multiply;
    padding: 3rem 0;
}
.bce-watermark-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160%;
    transform: rotate(-28deg);
    transform-origin: center center;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    gap: 6rem;
}
.bce-watermark-row:nth-child(even) {
    transform: rotate(-28deg) translateX(-6rem);
}
.bce-watermark-text {
    font-size: 4.8rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    color: rgba(148, 163, 184, 0.16) !important;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

:is([data-mode="dark"] .bce-watermark-layer),
html.dark .bce-watermark-layer {
    mix-blend-mode: screen;
}
:is([data-mode="dark"] .bce-watermark-text),
html.dark .bce-watermark-text {
    color: rgba(255, 255, 255, 0.05) !important;
}

/* 列印專屬模式 */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
    }
    .bce-no-print {
        display: none !important;
    }
    .bce-print-container {
        border: 1px solid #000000 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .bce-print-th {
        background-color: #f1f5f9 !important;
        color: #000000 !important;
        border-bottom: 2px solid #000000 !important;
    }
    .bce-print-border {
        border: 1px solid #cbd5e1 !important;
    }
    .bce-watermark-layer {
        mix-blend-mode: multiply !important;
        padding: 1.5cm 0 !important;
    }
    .bce-watermark-row {
        width: 150% !important;
        gap: 4cm !important;
    }
    .bce-watermark-text {
        font-size: 4rem !important;
        color: rgba(0, 0, 0, 0.06) !important;
    }
    @page {
        size: A4 portrait;
        margin: 1.2cm;
    }
}


/* ==========================================================================
   9. 新進員工建檔精靈步驟條 (Onboarding Stepper - HR-01)
   ========================================================================== */

#onboarding-form [hidden] {
    display: none !important;
}
.stepper-item.active .stepper-circle {
    background-color: rgb(var(--color-primary, 59 130 246));
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--color-primary, 59 130 246), 0.2);
}
.stepper-item.active .stepper-title {
    color: rgb(var(--color-primary, 59 130 246));
    font-weight: 700;
}
.stepper-item.completed .stepper-circle {
    background-color: #10b981;
    color: #ffffff;
}
.stepper-item.completed .stepper-title {
    color: #10b981;
}


/* ==========================================================================
   10. FullCalendar 行事曆客製主題樣式 (FullCalendar Modern Skin & Event Blocks)
   ========================================================================== */

.fc {
    font-family: inherit;
    --fc-border-color: rgba(226, 232, 240, 0.8);
    --fc-today-bg-color: rgba(59, 130, 246, 0.05);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: transparent;
}
.dark .fc,
html.dark .fc,
[data-mode="dark"] .fc {
    --fc-border-color: rgba(51, 65, 85, 0.8);
    --fc-today-bg-color: rgba(59, 130, 246, 0.1);
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #1e293b;
}
.dark .fc .fc-toolbar-title,
html.dark .fc .fc-toolbar-title,
[data-mode="dark"] .fc .fc-toolbar-title {
    color: #f1f5f9;
}
.fc .fc-button {
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}
.dark .fc .fc-button,
html.dark .fc .fc-button,
[data-mode="dark"] .fc .fc-button {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
.fc .fc-button:hover {
    background-color: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}
.dark .fc .fc-button:hover,
html.dark .fc .fc-button:hover,
[data-mode="dark"] .fc .fc-button:hover {
    background-color: #334155;
    color: #f8fafc;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
    background-color: #3073F1 !important;
    border-color: #3073F1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(48, 115, 241, 0.3) !important;
}
.fc .fc-col-header-cell {
    padding: 0.75rem 0;
    background-color: #f8fafc;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dark .fc .fc-col-header-cell,
html.dark .fc .fc-col-header-cell,
[data-mode="dark"] .fc .fc-col-header-cell {
    background-color: #0f172a;
    color: #94a3b8;
}
.fc .fc-daygrid-day-number {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    color: #475569;
    font-family: monospace;
}
.dark .fc .fc-daygrid-day-number,
html.dark .fc .fc-daygrid-day-number,
[data-mode="dark"] .fc .fc-daygrid-day-number {
    color: #cbd5e1;
}
.fc-day-today .fc-daygrid-day-number {
    background-color: #3073F1;
    color: #ffffff !important;
    border-radius: 0.5rem;
    display: inline-block;
    margin: 0.2rem;
    box-shadow: 0 2px 6px rgba(48, 115, 241, 0.4);
}
/* Konrix FullCalendar Solid Block Event Styling (防止白底白字) */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event,
.fc-daygrid-block-event,
.fc-daygrid-dot-event {
    display: block !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer;
    transition: all 0.15s ease;
    background-color: var(--fc-event-bg-color, #3073F1) !important;
}
.fc-event:hover,
.fc-daygrid-event:hover,
.fc-timegrid-event:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}
.fc-event .fc-event-main,
.fc-event .fc-event-title,
.fc-event .fc-event-time,
.fc-daygrid-event .fc-event-main,
.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-time {
    color: #ffffff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* 隱藏預設點點，全面改以 Konrix 原廠彩色膠囊塊呈現 */
.fc-daygrid-event-dot {
    display: none !important;
}
.holiday-badge {
    background-color: #dc2626 !important;
}


/* ==========================================================================
   11. 智慧文件連續閱讀器與表格排版 (Document Reader Layout & Tables)
   ========================================================================== */

.document-reader-page {
    width: 100%;
    max-width: 64rem;
    min-width: 0;
    margin-inline: auto;
}
.document-reader-page > * {
    min-width: 0;
    max-width: 100%;
}
.document-reader-page > * + * {
    margin-top: 1rem;
}
.document-reader-toolbar,
.document-reader-paper {
    min-width: 0;
    max-width: 100%;
    border-radius: 1rem;
}
.document-reader-title-wrap {
    min-width: 0;
    flex: 1 1 18rem;
}
.document-reader-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.document-reader-actions {
    min-width: 0;
    max-width: 100%;
}
.document-reader-paper {
    overflow: hidden;
}
.document-reader-copy {
    width: 100%;
    max-width: 56rem;
    min-width: 0;
    margin-inline: auto;
    padding: 2rem 2.5rem 2.5rem;
}
.document-reader-flow,
.document-reader-block {
    min-width: 0;
    max-width: 100%;
}
.document-page-marker {
    margin: 2rem 0 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.document-reader-flow > .document-page-marker:first-child {
    margin-top: 0;
}
.document-reader-block {
    scroll-margin-top: 6rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.document-reader-block + .document-reader-block {
    margin-top: 1rem;
}
.document-reader-paragraph,
.document-reader-layout-segment {
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.document-reader-layout-segment + .document-reader-layout-segment {
    margin-top: 0.75rem;
}
.document-reader-heading-block {
    margin-top: 1.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.6;
}
.document-reader-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 1rem 0;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    -webkit-overflow-scrolling: touch;
}
.document-reader-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.6;
}
.document-reader-table th,
.document-reader-table td {
    padding: 0.65rem 0.7rem;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}
.document-reader-table th:last-child,
.document-reader-table td:last-child {
    border-right: 0;
}
.document-reader-table tr:last-child > * {
    border-bottom: 0;
}
.document-reader-table th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 800;
}
.document-reader-block:target,
.document-reader-layout-segment:target {
    border-radius: 0.5rem;
    outline: 3px solid rgba(59, 130, 246, 0.22);
    background: rgba(59, 130, 246, 0.07);
}
.document-reader-table tr:target > * {
    background: #eff6ff;
}
.document-source-anchor {
    display: block;
    scroll-margin-top: 6rem;
}
html[data-mode='dark'] .document-page-marker,
html.dark .document-page-marker,
html[data-mode='dark'] .document-reader-heading-block,
html.dark .document-reader-heading-block {
    border-color: #334155;
}
html[data-mode='dark'] .document-reader-paragraph,
html.dark .document-reader-paragraph,
html[data-mode='dark'] .document-reader-layout-segment,
html.dark .document-reader-layout-segment,
html[data-mode='dark'] .document-reader-table,
html.dark .document-reader-table {
    color: #cbd5e1;
}
html[data-mode='dark'] .document-reader-heading-block,
html.dark .document-reader-heading-block {
    color: #f1f5f9;
}
html[data-mode='dark'] .document-reader-table-wrap,
html.dark .document-reader-table-wrap,
html[data-mode='dark'] .document-reader-table th,
html.dark .document-reader-table th,
html[data-mode='dark'] .document-reader-table td,
html.dark .document-reader-table td {
    border-color: #334155;
}
html[data-mode='dark'] .document-reader-table th,
html.dark .document-reader-table th {
    background: #1e293b;
    color: #f1f5f9;
}
html[data-mode='dark'] .document-reader-table tr:target > *,
html.dark .document-reader-table tr:target > * {
    background: rgba(30, 64, 175, 0.24);
}
@media (max-width: 767px) {
    .document-reader-copy {
        padding: 1.25rem 1rem 1.5rem;
    }
    .document-reader-table {
        width: 40rem;
        min-width: 40rem;
        table-layout: auto;
    }
    .document-reader-actions {
        width: 100%;
    }
}