/* ================================================
   BOSOKU Vocabulary List — Custom Styles
   ================================================ */

body {
    font-family: 'Inter', sans-serif;
}
.mandarin-font {
    font-family: 'Noto Serif SC', serif !important;
}
.pinyin-font {
    font-family: 'Noto Serif Display', serif !important;
    letter-spacing: 0.01em;
}
.mandarin-font { font-weight: 600; }

/* Flashcard 3D Perspective */
.perspective-1000 {
    perspective: 1000px;
}
.transform-style-3d {
    transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.rotate-y-180 {
    transform: rotateY(180deg);
}
.flashcard-animate {
    transition: transform 0.5s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

/* Tone Colors */
/* Tone colors - !important agar menimpa Tailwind text colors */
.t1 { color: #ef4444 !important; font-weight: 600 !important; }
.t2 { color: #10b981 !important; font-weight: 600 !important; }
.t3 { color: #3b82f6 !important; font-weight: 600 !important; }
.t4 { color: #8b5cf6 !important; font-weight: 600 !important; }
.t0 { color: #6b7280 !important; font-weight: 500 !important; }

/* BOSOKU modal motion */
.modal-overlay-enter { opacity: 0; }
.modal-overlay-enter.is-open { opacity: 1; }
.modal-panel-enter { opacity: 0; transform: translateY(10px) scale(.97); }
.modal-panel-enter.is-open { opacity: 1; transform: translateY(0) scale(1); transition: opacity .18s ease, transform .22s ease; }
.modal-panel-enter.is-closing { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .14s ease, transform .14s ease; }
.modal-overlay-enter.is-closing { opacity: 0; transition: opacity .14s ease; }
.flashcard-hint { transition: opacity .2s ease, transform .2s ease; }
.flashcard-hint.is-hidden { opacity: 0; transform: translateY(3px); pointer-events: none; }

/* Dropdown styling - custom arrow */
select {
    color-scheme: light;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    padding-right: 1.4rem;
}
select option { color: #111827 !important; background-color: #ffffff !important; }
.dark select { color-scheme: dark; }
.dark select option { color: #f8fafc !important; background-color: #0f172a !important; }
.dark select optgroup { color: #f8fafc !important; background-color: #0f172a !important; }

/* Responsive vocabulary table: no horizontal scrolling on mobile */
.vocab-table-wrap { overflow-x: auto; }
.vocab-table { table-layout: fixed; width: 100%; }
.vocab-table th, .vocab-table td { overflow: visible; text-overflow: clip; }
.mobile-hide-col { display: table-cell; }
@media (max-width: 639px) {
    .vocab-table { font-size: .78rem; }
    .vocab-table th, .vocab-table td { padding-left: .45rem !important; padding-right: .45rem !important; }
    .mobile-hide-col { display: none !important; }

    .vocab-table th:nth-child(1), .vocab-table td:nth-child(1) { width: 12%; }
    .vocab-table th:nth-child(3), .vocab-table td:nth-child(3) { width: 24%; }
    .vocab-table th:nth-child(4), .vocab-table td:nth-child(4) { width: 25%; }
    .vocab-table th:nth-child(6), .vocab-table td:nth-child(6) { width: 29%; }
    .vocab-table th:nth-child(7), .vocab-table td:nth-child(7) { width: 10%; }
    .vocab-table .mandarin-font { font-size: 1.15rem; }
    .vocab-table .pinyin-font { font-size: .78rem; white-space: nowrap; }
    .vocab-table .audio-cell button { width: 2rem; height: 2rem; }
}

/* Compact responsive header */
.app-header-inner { flex-wrap: nowrap; align-items: center; }
.brand-block { flex: 1 1 auto; min-width: 0; }
.brand-logo-wrap { width: 160px !important; height: 44px !important; }
.brand-title { font-size: 1.25rem !important; }
.header-controls { flex-wrap: nowrap; gap: .35rem !important; }
.header-control { font-size: .68rem !important; padding: .35rem .5rem !important; }
@media (max-width: 639px) {
    .app-header-inner { gap: .4rem; padding-top: .35rem; padding-bottom: .35rem; }
    .brand-logo-wrap:not(.logo-size-fix) { width: 110px !important; height: 36px !important; }
    .brand-logo-wrap.logo-size-fix { width: 135px !important; height: 42px !important; }
    .brand-title { font-size: 1rem !important; }
}

/* Enhanced responsive layout */
.vocab-table-wrap { width: 100%; overflow-x: auto; }
.vocab-table { width: 100%; table-layout: fixed; }
.vocab-table th, .vocab-table td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
.vocab-table .mandarin-font,
.vocab-table .pinyin-font {
    white-space: nowrap;
    overflow: visible;
}
.tab-btn { flex: 0 0 auto; }
@media (max-width: 1023px) {
    main { padding-left: .75rem; padding-right: .75rem; }
    .vocab-table th, .vocab-table td {
        padding-top: .7rem !important;
        padding-bottom: .7rem !important;
    }
}
@media (max-width: 767px) {
    .brand-logo-wrap:not(.logo-size-fix) { width: 120px !important; height: 40px !important; }
    .brand-logo-wrap.logo-size-fix { width: 150px !important; height: 46px !important; }
    .brand-title { font-size: 1.1rem !important; }
    .vocab-table th, .vocab-table td {
        padding-left: .3rem !important;
        padding-right: .3rem !important;
    }
    .vocab-table .mandarin-font { font-size: 1rem; }
    .vocab-table .pinyin-font { font-size: .72rem; white-space: nowrap; }
    .vocab-table .audio-cell button { width: 1.9rem; height: 1.9rem; }
    .pagination-controls { gap: .5rem !important; }
    .pagination-nav-btn { padding-left: .55rem !important; padding-right: .55rem !important; }
    .pagination-nav-btn span { display: inline !important; }
}
@media (max-width: 420px) {
    .brand-logo-wrap:not(.logo-size-fix) { width: 88px !important; }
    .brand-logo-wrap.logo-size-fix { width: 120px !important; height: 42px !important; }
    .header-control select { width: 100%; max-width: none !important; }
    .vocab-table { font-size: .72rem; }
    .vocab-table th, .vocab-table td {
        padding-left: .2rem !important;
        padding-right: .2rem !important;
    }
    .vocab-table .pinyin-font { font-size: .68rem; }
}

/* Phase A: example sentence pinyin */
.example-pinyin { color:#111827 !important; font-family:'Noto Serif Display',serif !important; }
.dark .example-pinyin { color:#fff !important; }

/* Phase A: responsive tabs */
.main-tab-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
.main-tab-nav .tab-btn{min-width:0;width:100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal;}

/* Phase A: stable vocabulary columns */
.vocab-table th,.vocab-table td{vertical-align:middle;}
.vocab-table th{white-space:nowrap!important;}
.vocab-table .no-col{width:4.25rem;min-width:4.25rem;max-width:4.25rem;white-space:nowrap!important;}
.vocab-table .fav-col{width:4.5rem;min-width:4.5rem;max-width:4.5rem;white-space:nowrap!important;}
.vocab-table .audio-col{width:5.5rem;min-width:5.5rem;max-width:5.5rem;white-space:nowrap!important;}

/* Phase A: BOSOKU hover */
.vocab-table tbody tr.vocab-row{transition:background-color .18s ease,box-shadow .18s ease;}
.vocab-table tbody tr.vocab-row:hover{background-color:rgba(103,69,248,.07)!important;box-shadow:inset 3px 0 0 #6745F8;}
.dark .vocab-table tbody tr.vocab-row:hover{background-color:rgba(103,69,248,.16)!important;box-shadow:inset 3px 0 0 #8b73ff;}
.vocab-table tbody tr.vocab-row:hover .mandarin-font{color:#6745F8!important;}
.dark .vocab-table tbody tr.vocab-row:hover .mandarin-font{color:#b7a8ff!important;}
.vocab-table tbody tr.vocab-row:hover .meaning-cell{color:#4c3bb3!important;}
.dark .vocab-table tbody tr.vocab-row:hover .meaning-cell{color:#e9e5ff!important;}

/* Phase A: full viewport */
html,body{width:100%;min-width:0;overflow-x:hidden;}
#app,main,.app-shell,.page-container{width:100%;max-width:none!important;}
main{min-width:0;}
@media (min-width:1280px){
  main{padding-left:clamp(3rem,6vw,8rem)!important;padding-right:clamp(3rem,6vw,8rem)!important;}
  .app-header-inner{padding-left:clamp(3rem,6vw,8rem)!important;padding-right:clamp(3rem,6vw,8rem)!important;}
  .stats-section{padding-left:clamp(3rem,6vw,8rem)!important;padding-right:clamp(3rem,6vw,8rem)!important;}
}

/* Desktop 125% zoom */
@media (min-width:1280px){
  body{zoom:1.25;}
  header{position:sticky;top:0;z-index:40;}
}

@media (max-width:767px){
  body{overflow-x:hidden!important;}
  .main-tab-nav .tab-btn{padding-left:.5rem!important;padding-right:.5rem!important;font-size:.72rem!important;line-height:1.2!important;}
  .main-tab-nav .tab-btn i{margin-right:.25rem!important;}
  .vocab-table-wrap{overflow-x:auto!important;}
  .vocab-table{width:100%!important;table-layout:fixed!important;}
  .vocab-table th,.vocab-table td{min-width:0!important;}
  .vocab-table .no-col{width:2.7rem!important;min-width:2.7rem!important;max-width:2.7rem!important;}
  .vocab-table .fav-col{width:2.8rem!important;min-width:2.8rem!important;max-width:2.8rem!important;}
  .vocab-table .audio-col{width:4.4rem!important;min-width:4.4rem!important;max-width:4.4rem!important;}
  .vocab-table .mandarin-font{font-size:.95rem!important;}
  .vocab-table .pinyin-font{font-size:.68rem!important;}
}
@media (max-width:420px){.main-tab-nav .tab-btn{font-size:.65rem!important;}.main-tab-nav .tab-btn i{display:none;}}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Pagination */
.pagination-btn { min-width: 2.25rem; height: 2.25rem; }
.pagination-btn.active { background: #6440FB; color: white; border-color: #6440FB; }

/* Tutorial / confirmation dialogs */
.guide-overlay { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.guide-overlay.is-open { opacity: 1; pointer-events: auto; }
.guide-panel { transform: translateY(12px) scale(.97); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.guide-overlay.is-open .guide-panel { transform: translateY(0) scale(1); opacity: 1; }
.guide-step { display: none; }
.guide-step.active { display: block; }
@media (max-width: 639px) { .guide-panel { max-height: 90vh; overflow-y: auto; } }