/**
 * QiLegal eLearning Portal - Clean Blue Theme Stylesheet
 * Optimized, Modular, DRY & Highly Reusable Architecture
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ========================================================
   1. DESIGN TOKENS (REUSABLE CSS CUSTOM PROPERTIES)
======================================================== */
:root, .qilegal-portal-wrapper {
    /* Brand Primary Colors */
    --qi-primary: #2C6AEE;
    --qi-primary-rgb: 44, 106, 238;
    --qi-primary-hover: #1D4ED8;
    --qi-primary-dark: #1E40AF;
    --qi-primary-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --qi-primary-gradient-hover: linear-gradient(135deg, #1D4ED8 0%, #173A9E 100%);

    /* Backgrounds & Light Tints */
    --qi-bg-main: #F5F8FF;
    --qi-bg-card: #FFFFFF;
    --qi-bg-surface: #F8FAFC;
    --qi-bg-accent: #EEF3FF;
    --qi-bg-accent-alt: #EEF4FF;

    /* Borders */
    --qi-border: #E2E8F0;
    --qi-border-dark: #CBD5E1;
    --qi-border-accent: #D6E3FC;
    --qi-border-blue: #BFDBFE;

    /* Text Colors */
    --qi-text-main: #0F172A;
    --qi-text-dark: #1E293B;
    --qi-text-body: #334155;
    --qi-text-muted: #475569;
    --qi-text-subtle: #64748B;

    /* Danger / Destructive */
    --qi-danger: #EF4444;
    --qi-danger-dark: #DC2626;
    --qi-danger-bg: #FEE2E2;
    --qi-danger-border: #FECACA;

    /* Radii */
    --qi-radius-sm: 8px;
    --qi-radius-md: 11px;
    --qi-radius-lg: 14px;
    --qi-radius-xl: 18px;
    --qi-radius-full: 9999px;

    /* Shadows & Transitions */
    --qi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --qi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --qi-shadow-md: 0 4px 12px rgba(44, 106, 238, 0.08);
    --qi-shadow-lg: 0 25px 60px -15px rgba(15, 23, 42, 0.45);
    --qi-shadow-btn-primary: 0 2px 6px -1px rgba(37, 99, 235, 0.35);
    --qi-shadow-btn-hover: 0 4px 10px rgba(37, 99, 235, 0.4);

    --qi-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --qi-transition-fast: all 0.18s ease;

    /* Bootstrap Bridge */
    --bs-primary: var(--qi-primary);
    --bs-primary-rgb: var(--qi-primary-rgb);
    --bs-link-color: var(--qi-primary);
    --bs-link-hover-color: #1B4299;
}

/* ========================================================
   2. GLOBAL RESETS & SHARED COMMONS (DRY CONSOLIDATION)
======================================================== */
.qilegal-portal-wrapper, .qilegal-portal-wrapper *,
.qilegal-modal-dialog, .qilegal-modal-dialog * {
    box-sizing: border-box !important;
}

/* Grouped Margin & Padding Zero Resets */
.qilegal-portal-wrapper h1, .qilegal-portal-wrapper h2,
.qilegal-portal-wrapper h3, .qilegal-portal-wrapper h4,
.qilegal-portal-wrapper p, .qilegal-cat-title,
.qilegal-topic-name, .qilegal-topic-title, .qilegal-modal-title {
    margin: 0 !important;
    padding: 0 !important;
}

.qilegal-cat-title, .qilegal-topic-name { line-height: 1.25 !important; }
.qilegal-cat-subtitle, .qilegal-topic-desc { margin: 2px 0 0 0 !important; padding: 0 !important; line-height: 1.35 !important; }

/* Grouped Inline-Flex Center Centering Utility */
.qilegal-btn-preview, .qilegal-btn-download,
.qilegal-toggle-btn, .qilegal-modal-download-btn,
.qilegal-modal-action-btn, .qilegal-modal-btn,
.qilegal-modal-doc-icon, .legal-upload-pdf.legal-whatsapp-pin,
.remove-row.legal-row-delete-btn, .legal-pdf-preview-box,
.legal-pdf-preview-box .legal-remove-file,
.qilegal-empty-icon-wrap, .qilegal-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Grouped Text Truncation */
.qilegal-modal-title, .legal-pdf-preview-box .legal-file-name,
.qilegal-topic-actions .qilegal-btn-preview span,
.qilegal-topic-actions .qilegal-btn-download span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Grouped Button Active Scale Feedback */
.qilegal-btn-preview:active, .qilegal-btn-download:active, .qilegal-mobile-btn:active {
    transform: scale(0.98);
}

/* ========================================================
   3. BASE & PORTAL CONTAINER
======================================================== */
.qilegal-portal-wrapper {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    background-color: var(--qi-bg-main); color: var(--qi-text-main);
    min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.qilegal-portal-wrapper a { text-decoration: none; }
.qilegal-main-container { width: 100%; max-width: 100%; overflow-x: hidden; }
.qilegal-card-header { min-height: unset !important; }

/* Overview Box */
.qilegal-overview-box {
    background-color: var(--qi-bg-accent) !important;
    border: 1px solid var(--qi-border-accent) !important;
    border-radius: var(--qi-radius-lg) !important;
    padding: 12px 14px !important;
    color: var(--qi-text-dark) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

/* ========================================================
   4. TOPIC CARDS & ACTIONS
======================================================== */
.qilegal-topic-card {
    background: var(--qi-bg-card) !important;
    border: 1px solid var(--qi-border) !important;
    border-radius: var(--qi-radius-lg) !important;
    padding: 14px 18px !important;
    box-shadow: var(--qi-shadow-sm) !important;
    max-width: 100% !important; overflow: hidden !important;
    transition: border-color var(--qi-transition-fast), box-shadow var(--qi-transition-fast) !important;
}
.qilegal-topic-card:hover { border-color: var(--qi-border-dark) !important; }
.qilegal-topic-title { font-size: 15px !important; font-weight: 700 !important; color: var(--qi-text-main) !important; line-height: 1.3 !important; }
.qilegal-topic-description { font-size: 12.5px !important; font-weight: 400 !important; color: var(--qi-text-muted) !important; margin: 4px 0 0 0 !important; line-height: 1.55 !important; }
.qilegal-topic-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.qilegal-subject-content { transition: all 0.25s ease-in-out; }

/* ========================================================
   5. REUSABLE BUTTON SYSTEM (SHARED BASE + VARIANTS)
======================================================== */
.qilegal-btn-preview, .qilegal-btn-download,
.qilegal-toggle-btn, .qilegal-modal-download-btn {
    gap: 7px !important; font-weight: 600 !important;
    border-radius: var(--qi-radius-md) !important;
    cursor: pointer !important; text-decoration: none !important;
    white-space: nowrap !important; transition: var(--qi-transition) !important;
    line-height: 1.4 !important; height: 38px !important;
}

/* Primary Preview Button */
.qilegal-btn-preview {
    padding: 0 18px !important; font-size: 12.5px !important;
    background: var(--qi-primary-gradient) !important; color: #FFFFFF !important;
    border: 1px solid var(--qi-primary-hover) !important;
    box-shadow: var(--qi-shadow-btn-primary) !important;
}
.qilegal-btn-preview:hover {
    background: var(--qi-primary-gradient-hover) !important; color: #FFFFFF !important;
    box-shadow: var(--qi-shadow-btn-hover) !important;
}

/* Secondary Download Button */
.qilegal-btn-download {
    padding: 0 18px !important; font-size: 12.5px !important;
    background: var(--qi-bg-accent-alt) !important; color: var(--qi-primary-hover) !important;
    border: 1.5px solid var(--qi-border-blue) !important; box-shadow: var(--qi-shadow-sm) !important;
}
.qilegal-btn-download:hover {
    background: #2563EB !important; color: #FFFFFF !important;
    border-color: #2563EB !important; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25) !important;
}

/* Category Collapse/Expand Toggle */
.qilegal-toggle-btn {
    gap: 4px !important; padding: 0 10px !important; height: 32px !important;
    width: 118px !important; min-width: 118px !important;
    text-align: center !important; justify-content: center !important;
    background-color: var(--qi-bg-accent) !important; color: var(--qi-primary) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important; font-size: 12px !important;
}
.qilegal-toggle-btn:hover { background-color: var(--qi-primary) !important; color: #FFFFFF !important; border-color: var(--qi-primary) !important; }

/* ========================================================
   6. ADMIN REPEATER & ATTACHMENT TOOLS
======================================================== */
.legal-section-block { border-left: 4px solid #173a73 !important; }
.drag-handle { cursor: move !important; }

/* Grouped Danger Actions (Remove Section & Delete Row) */
.remove-section, .remove-row.legal-row-delete-btn {
    background-color: var(--qi-danger-bg) !important; color: var(--qi-danger) !important;
    border: 1px solid var(--qi-danger-border) !important; cursor: pointer !important;
    transition: var(--qi-transition) !important;
}
.remove-section:hover, .remove-row.legal-row-delete-btn:hover {
    background-color: var(--qi-danger) !important; color: #FFFFFF !important;
    border-color: var(--qi-danger-dark) !important; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}
.remove-row.legal-row-delete-btn { width: 32px !important; height: 32px !important; border-radius: var(--qi-radius-sm) !important; padding: 0 !important; box-shadow: var(--qi-shadow-xs) !important; }
.remove-row.legal-row-delete-btn .dashicons-trash { font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 16px !important; }

/* WhatsApp Attachment Pin */
.legal-upload-pdf.legal-whatsapp-pin {
    width: 38px !important; height: 38px !important; border-radius: var(--qi-radius-full) !important;
    background-color: #f0f2f5 !important; border: 1px solid #d1d7db !important; color: #54656f !important;
    padding: 0 !important; cursor: pointer !important; box-shadow: var(--qi-shadow-sm) !important;
    transition: var(--qi-transition) !important;
}
.legal-upload-pdf.legal-whatsapp-pin:hover {
    background-color: #25D366 !important; color: #FFFFFF !important;
    border-color: #20ba5a !important; box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35) !important;
}
.legal-whatsapp-pin .dashicons-paperclip { transform: rotate(45deg); font-size: 20px !important; width: 20px !important; height: 20px !important; line-height: 20px !important; }

/* Attached File Preview Badge & Chip */
.legal-pdf-preview-box {
    gap: 6px !important; background-color: #f1f5f9 !important; border: 1px solid var(--qi-border-dark) !important;
    padding: 4px 10px !important; border-radius: 20px !important; margin-top: 6px !important; box-shadow: var(--qi-shadow-sm) !important;
}
.legal-pdf-preview-box .legal-file-name { color: var(--qi-text-main) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; max-width: 180px; }
.legal-pdf-preview-box .legal-remove-file {
    width: 18px !important; height: 18px !important; border-radius: var(--qi-radius-full) !important;
    background-color: var(--qi-border) !important; color: var(--qi-text-subtle) !important;
    cursor: pointer !important; font-size: 13px !important; line-height: 1 !important; font-weight: bold !important;
    transition: all 0.15s ease !important; margin-left: 4px;
}
.legal-pdf-preview-box .legal-remove-file:hover { background-color: var(--qi-danger) !important; color: #FFFFFF !important; }

/* ========================================================
   7. MODAL SYSTEM & PDF VIEWER
======================================================== */
#qilegalPreviewModal {
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
    background-color: rgba(15, 23, 42, 0.75) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 8px !important;
}
#qilegalPreviewModal.hidden { display: none !important; }

.qilegal-modal-dialog {
    background-color: var(--qi-bg-card) !important; border-radius: var(--qi-radius-xl) !important;
    width: 95% !important; max-width: 1050px !important; height: 88vh !important; max-height: 88vh !important;
    color: var(--qi-text-main) !important; overflow: hidden !important;
    box-shadow: var(--qi-shadow-lg) !important; border: 1px solid var(--qi-border-dark) !important;
    display: flex !important; flex-direction: column !important; position: relative !important;
}

/* Modal Header */
.qilegal-modal-header {
    background: linear-gradient(135deg, #2C6AEE 0%, #1E52D0 100%) !important;
    padding: 13px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
    color: #FFFFFF !important; flex-shrink: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; gap: 12px;
}
.qilegal-modal-header-left { display: flex !important; align-items: center !important; gap: 12px !important; overflow: hidden !important; min-width: 0 !important; flex: 1 1 auto !important; padding-right: 14px !important; }
.qilegal-modal-doc-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; color: #FFFFFF !important; flex-shrink: 0 !important; }
.qilegal-modal-doc-icon svg { width: 100% !important; height: 100% !important; display: block !important; fill: #FFFFFF !important; }
.qilegal-modal-title { font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; }
.qilegal-modal-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }

.qilegal-modal-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important;
    border-radius: var(--qi-radius-sm) !important; background-color: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important; transition: var(--qi-transition-fast) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important; cursor: pointer !important; text-decoration: none !important; padding: 0 !important;
}
.qilegal-modal-btn svg { width: 15px !important; height: 15px !important; display: block !important; stroke: #FFFFFF !important; }
.qilegal-modal-btn:hover { background-color: rgba(255, 255, 255, 0.35) !important; border-color: rgba(255, 255, 255, 0.5) !important; color: #FFFFFF !important; }
.qilegal-modal-btn:active { background-color: rgba(255, 255, 255, 0.22) !important; }

/* Modal Body & Iframes */
.qilegal-modal-body {
    flex: 1 1 0% !important; min-height: 0 !important; width: 100% !important; height: 100% !important;
    background-color: var(--qi-bg-surface) !important; overflow: hidden !important; position: relative !important;
    display: flex !important; flex-direction: column !important;
}
.qilegal-desktop-preview {
    display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important;
    min-height: 0 !important; flex: 1 1 auto !important; position: relative !important; overflow: hidden !important;
}
.qilegal-pdf-iframe { width: 100% !important; height: 100% !important; min-height: 0 !important; flex: 1 1 auto !important; display: block !important; border: none !important; }

/* ========================================================
   8. MOBILE DOCUMENT HUB (TOUCH-OPTIMIZED VIEWER)
======================================================== */
.qilegal-mobile-preview {
    display: none; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px 14px; background: var(--qi-bg-surface);
}
.qilegal-mobile-card {
    background: var(--qi-bg-card); border: 1px solid var(--qi-border); border-radius: 16px;
    padding: 18px 16px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); width: 100%;
}
.qilegal-mobile-header-badge { margin-bottom: 12px; }
.qilegal-badge-pill {
    gap: 6px; padding: 4px 10px; border-radius: 20px; background-color: #FEF2F2;
    color: var(--qi-danger-dark); border: 1px solid var(--qi-danger-border);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.qilegal-badge-pill i { font-size: 13px; }
.qilegal-mobile-doc-title { font-size: 17px; font-weight: 800; color: var(--qi-text-main); margin: 0 0 8px 0; line-height: 1.35; }
.qilegal-mobile-doc-desc { font-size: 13px; color: var(--qi-text-muted); margin: 0 0 14px 0; line-height: 1.55; }
.qilegal-mobile-tip-box {
    display: flex; align-items: flex-start; gap: 10px; background-color: var(--qi-bg-accent-alt);
    border: 1px solid var(--qi-border-blue); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
    color: var(--qi-primary-dark); font-size: 12px; line-height: 1.5;
}
.qilegal-mobile-tip-box i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.qilegal-mobile-tip-text strong { display: block; margin-bottom: 2px; color: #1E3A8A; }
.qilegal-mobile-actions-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; width: 100%; }

.qilegal-mobile-btn {
    width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
    text-decoration: none !important; transition: var(--qi-transition); letter-spacing: -0.01em; text-align: center;
}
.qilegal-mobile-btn i { font-size: 16px; }
.qilegal-mobile-btn-primary {
    background: var(--qi-primary-gradient); color: #FFFFFF !important; border: 1px solid var(--qi-primary-hover);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.qilegal-mobile-btn-primary:active { background: var(--qi-primary-hover); transform: scale(0.985); }
.qilegal-mobile-btn-secondary {
    background: var(--qi-bg-card); color: var(--qi-primary-hover) !important;
    border: 1.5px solid var(--qi-border-blue); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.qilegal-mobile-btn-secondary:active { background: var(--qi-bg-accent-alt); transform: scale(0.985); }

/* Collapsible In-Page Drawer for Mobile */
.qilegal-mobile-accordion { border-top: 1px dashed var(--qi-border); padding-top: 14px; }
.qilegal-mobile-accordion-toggle {
    width: 100%; height: 38px; background: #F1F5F9; border: 1px solid var(--qi-border-dark);
    border-radius: 10px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; font-weight: 600; color: var(--qi-text-body); cursor: pointer; transition: var(--qi-transition-fast);
}
.qilegal-mobile-accordion-toggle:hover { background: var(--qi-border); color: var(--qi-text-main); }
.qilegal-toggle-left { display: flex; align-items: center; gap: 7px; }
.qilegal-mobile-drawer { margin-top: 10px; }
.qilegal-mobile-iframe-wrap {
    width: 100%; height: 55vh; border-radius: 12px; overflow: auto; -webkit-overflow-scrolling: touch;
    background: var(--qi-bg-card); border: 1px solid var(--qi-border-dark); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}
.qilegal-mobile-embedded-iframe { width: 100%; height: 100%; border: none; min-width: 100%; }

/* Adaptive Dialog Modes (PDF Full-size vs Note Executive Card) */
.qilegal-portal-wrapper .qilegal-modal-dialog.qilegal-dialog-note-mode,
.qilegal-is-desktop .qilegal-modal-dialog.qilegal-dialog-note-mode,
.qilegal-modal-dialog.qilegal-dialog-note-mode {
    max-width: 580px !important;
    width: 92% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 85vh !important;
    margin: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.qilegal-modal-dialog.qilegal-dialog-note-mode .qilegal-modal-body {
    height: auto !important;
    flex: 1 1 auto !important;
    max-height: calc(85vh - 60px) !important;
    overflow-y: auto !important;
    background: #F8FAFC !important;
}

/* ========================================================
   9. CLEAN LEGAL NOTE VIEWER (NO-PDF MODE)
======================================================== */
.qilegal-note-viewer {
    padding: 20px 22px !important;
    background: #F8FAFC !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Legal Paper Card */
.qilegal-note-paper {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 4px solid #2563EB !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.qilegal-note-paper-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 16px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.qilegal-note-kicker {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1E40AF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.qilegal-note-kicker i {
    font-size: 12px !important;
    color: #2563EB !important;
}

.qilegal-note-copy-pill {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    border-radius: 7px !important;
    transition: all 0.15s ease !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.qilegal-note-copy-pill:hover {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #93C5FD !important;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1) !important;
}
.qilegal-note-copy-pill:active {
    transform: scale(0.97);
}

.qilegal-note-paper-content {
    padding: 20px 22px 22px 22px !important;
    background: #FFFFFF !important;
}

.qilegal-note-text {
    font-size: 15px !important;
    font-weight: 450 !important;
    color: #1E293B !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Modal Footer & Buttons */
.qilegal-modal-footer {
    flex-shrink: 0 !important;
    padding: 10px 20px !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
.qilegal-modal-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.qilegal-modal-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.01em !important;
    border-radius: 8px !important;
    gap: 6.5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.qilegal-modal-action-btn i {
    font-size: 11.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-block !important;
}

.qilegal-modal-action-btn span {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

/* Secondary Open Action (Refined Outlined Pill) */
.qilegal-modal-action-open {
    background: #F8FAFC !important;
    color: #2563EB !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.qilegal-modal-action-open:hover {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #93C5FD !important;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12) !important;
}
.qilegal-modal-action-open:active {
    background: #DBEAFE !important;
    transform: scale(0.97);
}

/* Primary Download Action (Refined Solid Royal Blue) */
.qilegal-modal-action-download {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border: 1px solid #1D4ED8 !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
}
.qilegal-modal-action-download:hover {
    background: #1D4ED8 !important;
    border-color: #1E40AF !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35) !important;
}
.qilegal-modal-action-download:active {
    background: #1E40AF !important;
    transform: scale(0.97);
}

.qilegal-modal-download-btn {
    padding: 0 16px !important;
    background-color: var(--qi-bg-accent) !important;
    color: var(--qi-primary) !important;
    border: 1px solid var(--qi-border-dark) !important;
    font-size: 12px !important;
    box-shadow: var(--qi-shadow-xs) !important;
    border-radius: 8px !important;
    height: 33px !important;
}
.qilegal-modal-download-btn:hover {
    background-color: var(--qi-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--qi-primary) !important;
}

/* ========================================================
   10. FONT AWESOME SHIELD & CUSTOM SCROLLBARS
======================================================== */
.qilegal-portal-wrapper .fa, .qilegal-portal-wrapper .fas,
.qilegal-portal-wrapper .fa-solid, .qilegal-portal-wrapper .far,
.qilegal-portal-wrapper .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
}
.qilegal-portal-wrapper ::-webkit-scrollbar, .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.qilegal-portal-wrapper ::-webkit-scrollbar-track, .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.qilegal-portal-wrapper ::-webkit-scrollbar-thumb, .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--qi-primary); border-radius: 4px; }

/* ========================================================
   11. RESPONSIVE MEDIA QUERIES (MOBILE VS DESKTOP)
======================================================== */
@media (max-width: 639px) {
    .qilegal-desktop-preview { display: none !important; }
    .qilegal-mobile-preview { display: block !important; }
    .qilegal-modal-footer { display: none !important; }

    .qilegal-topic-card { padding: 14px 15px !important; }
    .qilegal-topic-actions { width: 100% !important; flex-direction: row !important; margin-top: 10px !important; }
    .qilegal-topic-actions .qilegal-btn-preview,
    .qilegal-topic-actions .qilegal-btn-download {
        flex: 1 1 0% !important; min-width: 0 !important; padding: 0 10px !important; font-size: 12px !important; gap: 6px !important;
    }
    .qilegal-topic-actions .qilegal-btn-preview:only-child {
        flex: 0 0 auto !important; width: auto !important; min-width: 135px !important; padding: 0 18px !important; align-self: flex-start !important;
    }

    #qilegalPreviewModal { padding: 8px !important; }
    .qilegal-modal-dialog { width: 100% !important; height: 94vh !important; max-height: 94vh !important; border-radius: var(--qi-radius-lg) !important; }
    .qilegal-modal-dialog.qilegal-dialog-note-mode { width: 100% !important; height: auto !important; max-height: 90vh !important; border-radius: 16px !important; }
    .qilegal-modal-header { padding: 11px 14px !important; }
    .qilegal-modal-header-left { gap: 9px !important; padding-right: 8px !important; }
    .qilegal-modal-doc-icon { width: 17px !important; height: 17px !important; min-width: 17px !important; }
    .qilegal-modal-title { font-size: 14px !important; }
    .qilegal-modal-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; }

    .qilegal-note-viewer { padding: 16px 14px 16px 14px !important; }
}

@media (min-width: 640px) {
    .qilegal-desktop-preview { display: flex !important; }
    .qilegal-mobile-preview { display: none !important; }

    .qilegal-is-desktop .qilegal-topic-card { padding: 14px 18px !important; }
    .qilegal-is-desktop .qilegal-topic-actions { width: auto !important; margin-top: 0 !important; flex: 0 0 auto !important; }
    .qilegal-is-desktop .qilegal-topic-actions .qilegal-btn-preview,
    .qilegal-is-desktop .qilegal-topic-actions .qilegal-btn-download {
        flex: 0 0 auto !important; width: auto !important; padding: 0 16px !important; font-size: 12.5px !important; gap: 7px !important;
    }
    .qilegal-is-desktop #qilegalPreviewModal { padding: 20px !important; }
    .qilegal-is-desktop .qilegal-modal-dialog { width: 95% !important; height: 88vh !important; max-height: 88vh !important; border-radius: var(--qi-radius-xl) !important; }
    .qilegal-is-desktop .qilegal-modal-dialog.qilegal-dialog-note-mode { width: 92% !important; max-width: 640px !important; height: auto !important; max-height: 86vh !important; }
    .qilegal-is-desktop .qilegal-modal-header { padding: 13px 20px !important; }
    .qilegal-is-desktop .qilegal-modal-header-left { gap: 12px !important; padding-right: 14px !important; }
    .qilegal-is-desktop .qilegal-modal-doc-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; }
    .qilegal-is-desktop .qilegal-modal-title { font-size: 16px !important; }
}

/* ========================================================
   11b. WEB LINK URL PREVIEW STYLING
======================================================== */
.qilegal-url-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 16px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}
.qilegal-url-address {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #475569 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
.qilegal-url-open-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    background: #2C6AEE !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    border: none !important;
}
.qilegal-url-open-btn:hover {
    background: #1E52D0 !important;
    color: #FFFFFF !important;
}

/* ========================================================
   12. PRINT MEDIA RULES
======================================================== */
@media print {
    body * { visibility: hidden !important; }
    #qilegalPreviewModal, #qilegalPreviewModal * { visibility: visible !important; }
    #qilegalPreviewModal { position: absolute; top: 0; left: 0; width: 100%; background: #FFFFFF !important; }
}

/* ========================================================
   13. SCOPED PORTAL UTILITY CLASSES (ZERO EXTERNAL CONFLICTS)
======================================================== */
.qilegal-portal-wrapper .min-h-screen { min-height: 100vh; }
.qilegal-portal-wrapper .bg-\[\#F5F8FF\] { background-color: #F5F8FF; }
.qilegal-portal-wrapper .text-\[\#0F172A\] { color: #0F172A; }
.qilegal-portal-wrapper .text-\[\#475569\] { color: #475569; }
.qilegal-portal-wrapper .text-\[\#64748B\] { color: #64748B; }
.qilegal-portal-wrapper .pb-12 { padding-bottom: 3rem; }
.qilegal-portal-wrapper .w-full { width: 100%; }
.qilegal-portal-wrapper .max-w-5xl { max-width: 64rem; }
.qilegal-portal-wrapper .mx-auto { margin-left: auto; margin-right: auto; }
.qilegal-portal-wrapper .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.qilegal-portal-wrapper .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.qilegal-portal-wrapper .mb-4 { margin-bottom: 1rem; }
.qilegal-portal-wrapper .pb-2\.5 { padding-bottom: 0.625rem; }
.qilegal-portal-wrapper .border-b { border-bottom: 1px solid rgba(203, 213, 225, 0.6); }
.qilegal-portal-wrapper .border-\[\#CBD5E1\]\/60 { border-color: rgba(203, 213, 225, 0.6); }
.qilegal-portal-wrapper .border-\[\#CBD5E1\] { border-color: #CBD5E1; }
.qilegal-portal-wrapper .border-\[\#E2E8F0\] { border-color: #E2E8F0; }
.qilegal-portal-wrapper .border-t { border-top: 1px solid #E2E8F0; }
.qilegal-portal-wrapper .text-center { text-align: center; }
.qilegal-portal-wrapper .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.qilegal-portal-wrapper .text-base { font-size: 1rem; line-height: 1.5rem; }
.qilegal-portal-wrapper .text-xs { font-size: 0.75rem; line-height: 1rem; }
.qilegal-portal-wrapper .font-extrabold { font-weight: 800; }
.qilegal-portal-wrapper .font-bold { font-weight: 700; }
.qilegal-portal-wrapper .font-normal { font-weight: 400; }
.qilegal-portal-wrapper .tracking-tight { letter-spacing: -0.025em; }
.qilegal-portal-wrapper .mt-1 { margin-top: 0.25rem; }
.qilegal-portal-wrapper .space-y-4 > * + * { margin-top: 1rem; }
.qilegal-portal-wrapper .space-y-3 > * + * { margin-top: 0.75rem; }
.qilegal-portal-wrapper .bg-white { background-color: #ffffff; }
.qilegal-portal-wrapper .rounded-2xl { border-radius: 1rem; }
.qilegal-portal-wrapper .rounded-xl { border-radius: 0.75rem; }
.qilegal-portal-wrapper .border { border-width: 1px; border-style: solid; border-color: #CBD5E1; }
.qilegal-portal-wrapper .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.qilegal-portal-wrapper .overflow-hidden { overflow: hidden; }
.qilegal-portal-wrapper .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.qilegal-portal-wrapper .duration-200 { transition-duration: 200ms; }
.qilegal-portal-wrapper .p-3\.5 { padding: 0.875rem; }
.qilegal-portal-wrapper .p-3 { padding: 0.75rem; }
.qilegal-portal-wrapper .p-6 { padding: 1.5rem; }
.qilegal-portal-wrapper .flex { display: flex; }
.qilegal-portal-wrapper .flex-col { flex-direction: column; }
.qilegal-portal-wrapper .justify-between { justify-content: space-between; }
.qilegal-portal-wrapper .items-center { align-items: center; }
.qilegal-portal-wrapper .gap-3 { gap: 0.75rem; }
.qilegal-portal-wrapper .min-w-0 { min-width: 0; }
.qilegal-portal-wrapper .flex-1 { flex: 1 1 0%; }
.qilegal-portal-wrapper .leading-tight { line-height: 1.25; }
.qilegal-portal-wrapper .leading-snug { line-height: 1.375; }
.qilegal-portal-wrapper .leading-relaxed { line-height: 1.625; }
.qilegal-portal-wrapper .self-start { align-self: flex-start; }
.qilegal-portal-wrapper .truncate, #qilegalPreviewModal .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive utility helpers */
@media (min-width: 640px) {
    .qilegal-portal-wrapper .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .qilegal-portal-wrapper .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .qilegal-portal-wrapper .sm\:mb-6 { margin-bottom: 1.5rem; }
    .qilegal-portal-wrapper .sm\:pb-3 { padding-bottom: 0.75rem; }
    .qilegal-portal-wrapper .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .qilegal-portal-wrapper .sm\:p-5 { padding: 1.25rem; }
    .qilegal-portal-wrapper .sm\:flex-row { flex-direction: row; }
    .qilegal-portal-wrapper .sm\:items-center { align-items: center; }
    .qilegal-portal-wrapper .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .qilegal-portal-wrapper .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .qilegal-portal-wrapper .sm\:self-center { align-self: center; }
    .qilegal-portal-wrapper .sm\:p-4 { padding: 1rem; }
    .qilegal-portal-wrapper .sm\:gap-4 { gap: 1rem; }
    .qilegal-portal-wrapper .sm\:pr-2 { padding-right: 0.5rem; }
    .qilegal-portal-wrapper .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .qilegal-portal-wrapper .sm\:text-\[13px\] { font-size: 13px; }
    .qilegal-portal-wrapper .sm\:mt-1\.5 { margin-top: 0.375rem; }
}

/* Visibility State */
.qilegal-portal-wrapper .hidden,
#qilegalPreviewModal.hidden,
#qilegalToast.hidden {
    display: none !important;
}

/* Download Toast Notification */
#qilegalToast {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background-color: #0F172A !important;
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 9999999 !important;
    border: 1px solid #334155 !important;
    font-size: 14px !important;
}
#qilegalToast.hidden {
    display: none !important;
}

/* ========================================================
   14. ADMIN POST LIST DRAG-AND-DROP HANDLE STYLING
======================================================== */
.wp-list-table th.column-qilegal_order {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px 0 !important;
}

.wp-list-table td.column-qilegal_order {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    text-align: center !important;
    vertical-align: top !important;
    padding: 10px 0 0 0 !important;
}

.qilegal-drag-handle {
    cursor: grab !important;
    color: #94A3B8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
}

.qilegal-drag-handle svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    pointer-events: none !important;
    stroke: currentColor !important;
}

.qilegal-drag-handle:hover {
    color: #2563EB !important;
    background-color: #EEF2FF !important;
    transform: scale(1.15) !important;
}

.qilegal-drag-handle:active {
    cursor: grabbing !important;
    transform: scale(0.95) !important;
}

.wp-list-table tbody tr.qilegal-sortable-placeholder {
    height: 44px !important;
    background: #EFF6FF !important;
    border: 2px dashed #93C5FD !important;
    visibility: visible !important;
}

@media screen and (max-width: 782px) {
    .wp-list-table th.column-qilegal_order,
    .wp-list-table td.column-qilegal_order {
        display: table-cell !important;
        width: 36px !important;
        padding-top: 12px !important;
        vertical-align: top !important;
    }
}