/* ==========================================================================
   page-detail.css
   Styles for /<lang>/<slug>-p<id> public page (legacy mimikara content).
   Loaded from Containers/AppSection/FrontEnd/UI/WEB/Views/pc/page/detail.blade.php.

   Sections:
     1. Furigana ruby + tables (base)
     2. Vocab cards (.boxtv / .boxnp / .boxhoithoai)
     3. Slide collapsibles (.slide / .slide-title / .slide-content)
     4. <h5> heading toggles (Script và dịch nghĩa, Đáp án, ...)
     5. Đáp án button (#btnQuestion)
     6. Click + hover translation pattern (.tudich / .candich / .kqdich)
     7. Related words (.lienquan)
     8. Hide legacy helper anchors
   ========================================================================== */


/* TTS auto-wrapped inline Japanese lines (jp-line) — mimikara pages
   often have <br>-delimited Japanese sentences with no block wrapper.
   The TTS script wraps each detected JP run in <span class="jp-line">
   so the speaker icon attaches; we just need a tiny gap before it. */
.furigana-content .jp-line { display: inline; }
.furigana-content .jp-line .jp-tts-group { margin-left: 4px; }


/* 1. Furigana ruby + tables */
.furigana-content rt,
.furigana-content rp { display: none; }
.furigana-content.show-furigana rt,
.furigana-content.show-furigana rp { display: revert; }
.furigana-content table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0.75rem 0 !important;
}
.furigana-content th,
.furigana-content td {
    border: 1px solid #d1d5db !important;
    padding: 8px 12px !important;
    vertical-align: top !important;
}
.furigana-content th {
    background: #f3f4f6 !important;
    text-align: left !important;
    font-weight: 600 !important;
}


/* 2. Legacy mimikara vocab cards (.boxtv / .boxnp / .boxhoithoai)
   Top-level cards get the orange accent. Nested boxes (Moodle exports
   wrap each example sentence in the same class as the outer card) drop
   to a calmer blue accent so the two layers are visually distinct. */
.furigana-content .boxtv,
.furigana-content .boxnp,
.furigana-content .boxhoithoai {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #f97316; /* orange-500 — outer */
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dark .furigana-content .boxtv,
.dark .furigana-content .boxnp,
.dark .furigana-content .boxhoithoai {
    background: #1f2937;
    border-color: #374151;
    border-left-color: #fb923c;
}

/* Nested cards (example sentences re-wrapped with .boxnp/.boxtv) */
.furigana-content .boxtv .boxtv,
.furigana-content .boxnp .boxnp,
.furigana-content .boxhoithoai .boxhoithoai,
.furigana-content .boxtv .boxnp,
.furigana-content .boxnp .boxtv {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b82f6; /* blue-500 — inner */
    padding: 8px 12px;
    margin: 6px 0;
    box-shadow: none;
    font-size: 0.95rem;
}
.dark .furigana-content .boxtv .boxtv,
.dark .furigana-content .boxnp .boxnp,
.dark .furigana-content .boxhoithoai .boxhoithoai,
.dark .furigana-content .boxtv .boxnp,
.dark .furigana-content .boxnp .boxtv {
    background: #111827;
    border-color: #1f2937;
    border-left-color: #60a5fa;
}

/* Word headline (1. 男性) */
.furigana-content .boxtv > .tuvung,
.furigana-content .boxnp > .tuvung,
.furigana-content .boxhoithoai > .tuvung {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.5;
}
.dark .furigana-content .boxtv > .tuvung,
.dark .furigana-content .boxnp > .tuvung,
.dark .furigana-content .boxhoithoai > .tuvung { color: #f3f4f6; }

/* Hán Việt reading */
.furigana-content .hanviet,
.furigana-content .hanviet1,
.furigana-content .hanviet2 {
    font-style: italic;
    color: #6b7280;
    font-size: 0.875rem;
    margin: 2px 0 6px;
}
.dark .furigana-content .hanviet,
.dark .furigana-content .hanviet1,
.dark .furigana-content .hanviet2 { color: #9ca3af; }

/* Vietnamese meaning */
.furigana-content .nghia,
.furigana-content .nghia1,
.furigana-content .nghia2 {
    color: #1f2937;
    font-size: 0.95rem;
    margin: 0 0 6px;
}
.dark .furigana-content .nghia,
.dark .furigana-content .nghia1,
.dark .furigana-content .nghia2 { color: #e5e7eb; }

/* Example sentence box */
.furigana-content .vidubox,
.furigana-content .vidubox1,
.furigana-content .vidubox2 {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-left: 2px solid #d1d5db;
    border-radius: 6px;
}
.dark .furigana-content .vidubox,
.dark .furigana-content .vidubox1,
.dark .furigana-content .vidubox2 {
    background: #111827;
    border-color: #374151;
    border-left-color: #4b5563;
}
/* Inner Japanese example sentence */
.furigana-content .vidubox .tuvung,
.furigana-content .vidubox1 .tuvung,
.furigana-content .vidubox2 .tuvung {
    display: flex;
    gap: 6px;
    font-weight: normal;
    font-size: 1rem;
    margin-bottom: 4px;
    color: #1f2937;
}
.dark .furigana-content .vidubox .tuvung,
.dark .furigana-content .vidubox1 .tuvung,
.dark .furigana-content .vidubox2 .tuvung { color: #e5e7eb; }
.furigana-content .viduseq {
    color: #f97316;
    font-weight: 600;
    flex-shrink: 0;
}
.furigana-content .nghiavidu {
    color: #4b5563;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 2px;
}
.dark .furigana-content .nghiavidu { color: #9ca3af; }

/* Underline-style choice markers Moodle wraps with <u> */
.furigana-content .vidubox u,
.furigana-content .vidubox1 u,
.furigana-content .vidubox2 u {
    text-decoration-color: #f97316;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}


/* 3. Legacy mimikara slides (Dịch & Giải thích collapsible) */
.furigana-content .slide {
    margin: 12px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.dark .furigana-content .slide { border-color: #374151; }
.furigana-content .slide-title {
    cursor: pointer;
    user-select: none;
    padding: 10px 14px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}
.furigana-content .slide-title::before {
    content: "▶";
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    display: inline-block;
}
.furigana-content .slide-title.is-open::before { transform: rotate(90deg); }
.furigana-content .slide-title:hover { background: #dbeafe; }
.dark .furigana-content .slide-title {
    background: rgba(30, 64, 175, 0.2);
    color: #93c5fd;
}
.dark .furigana-content .slide-title:hover { background: rgba(30, 64, 175, 0.3); }
.furigana-content .slide-content {
    padding: 14px;
    background: #fff;
}
.dark .furigana-content .slide-content { background: #1f2937; }


/* 4. Collapsible h5 headings (Script và dịch nghĩa, Hướng dẫn trả lời, ...) */
.furigana-content h5.h5-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.furigana-content h5.h5-toggle:hover { background: #dbeafe; }
.furigana-content h5.h5-toggle::before {
    content: "▶";
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    display: inline-block;
}
.furigana-content h5.h5-toggle.is-open::before { transform: rotate(90deg); }
.dark .furigana-content h5.h5-toggle {
    background: rgba(30, 64, 175, 0.2);
    color: #93c5fd;
}
.dark .furigana-content h5.h5-toggle:hover { background: rgba(30, 64, 175, 0.3); }


/* 5. Đáp án button styling */
.furigana-content #btnQuestion,
.furigana-content input[id="btnQuestion"] {
    cursor: pointer;
    padding: 6px 14px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.15s ease;
}
.furigana-content #btnQuestion:hover,
.furigana-content input[id="btnQuestion"]:hover { background: #ea580c; }


/* 6. Mimikara translate-on-click pattern (.tudich / .candich / .kqdich)
   Each Japanese sentence (.candich) has a hidden Vietnamese translation
   (.kqdich/.nddich) that originally appeared on click. We replicate the
   click-to-reveal behaviour and add desktop hover preview. */
.furigana-content .tudich { margin: 8px 0; }
.furigana-content .candich {
    cursor: pointer;
    padding: 8px 12px;
    border-left: 3px solid #d1d5db;
    background: #fafafa;
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.furigana-content .candich:hover {
    background: #f3f4f6;
    border-left-color: #f97316;
}
.furigana-content .candich.is-open {
    border-left-color: #10b981;
    background: #ecfdf5;
}
.dark .furigana-content .candich {
    background: #111827;
    border-left-color: #4b5563;
}
.dark .furigana-content .candich:hover {
    background: #1f2937;
    border-left-color: #fb923c;
}
.dark .furigana-content .candich.is-open {
    background: rgba(16, 185, 129, 0.15);
    border-left-color: #34d399;
}
.furigana-content .kqdich {
    display: none !important;
    margin: 4px 0 8px;
    padding: 8px 12px;
    background: #ecfdf5;
    border-left: 3px solid #10b981;
    border-radius: 4px;
    color: #065f46;
    font-size: 0.95rem;
}
.furigana-content .kqdich.is-open {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}
/* Hover preview on devices with a real pointer (desktop). Renders
   the translation as an absolute-positioned tooltip overlay so the
   Japanese text underneath doesn't reflow when the mouse moves over.
   Touch devices skip this rule via @media so click toggle still works. */
@media (hover: hover) and (pointer: fine) {
    .furigana-content .tudich { position: relative; }
    .furigana-content .tudich:hover .kqdich {
        display: block !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 30;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 4px !important;
        max-width: min(640px, 100%);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border: 1px solid #d1fae5;
        pointer-events: none;
    }
    .dark .furigana-content .tudich:hover .kqdich {
        border-color: #064e3b;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    .furigana-content .tudich:hover .candich {
        background: #ecfdf5;
        border-left-color: #10b981;
    }
    /* When the user has clicked to pin a translation, render it inline
       (non-absolute) so it stays put even after the cursor leaves. */
    .furigana-content .tudich .kqdich.is-open {
        position: static !important;
        box-shadow: none !important;
        max-width: none;
        pointer-events: auto;
    }
}
.dark .furigana-content .tudich:hover .candich {
    background: rgba(16, 185, 129, 0.15);
    border-left-color: #34d399;
}
.dark .furigana-content .kqdich {
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    border-left-color: #34d399;
}
.furigana-content .nddich { font-style: italic; }


/* 7. Related words section */
.furigana-content .lienquan {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef3c7;
    border-left: 2px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #78350f;
}
.dark .furigana-content .lienquan {
    background: #422006;
    color: #fde68a;
    border-left-color: #b45309;
}
.furigana-content .lienquan_nd { font-style: italic; }


/* 8. Hide legacy mimikara helper buttons (Bật/Tắt PHIÊN ÂM KANJI, etc.)
   The new site has its own furigana toggle in the header, so these
   inline anchors stored inside Moodle content are noise. */
.furigana-content a[onclick*="show_block"],
.furigana-content a[onclick*="show_phienam"],
.furigana-content a[onclick*="hideShowFuriganaCol"] { display: none !important; }