/* ==========================================================================
   modern-ui.css — design refresh layer
   Loaded last from layout.pug so it overrides legacy rules without touching
   element ids/classes that the (obfuscated) client JS depends on.
   Scope rules to #overlogin / #popupspanel / menu surfaces; never change
   display values that JS toggles inline.
   ========================================================================== */

:root {
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --surface-0: #171a2e;      /* page backdrop                  */
    --surface-1: #20243d;      /* card body                      */
    --surface-2: #262b47;      /* card header / raised           */
    --surface-3: #2e3354;      /* hover raised                   */
    --field-bg: #161a30;
    --border-soft: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text-1: #eef1f8;
    --text-2: #b9c0d4;
    --text-3: #90a3bb;
    --accent: #3d8bfd;
    --accent-hover: #5f9ffd;
    --accent-press: #2f74d8;
    --warn: #ffb38a;
    --ring: 0 0 0 3px rgba(61, 139, 253, 0.35);
    --radius-card: 14px;
    --radius-control: 8px;
    --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

/* menutab.css forces "Roboto Slab", serif on every heading — undo globally */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ui-font);
}

/* --------------------------------------------------------------------------
   1. AUTH OVERLAY (login / register / forgot password) — scoped #overlogin
   -------------------------------------------------------------------------- */

#overlogin {
    font-family: var(--ui-font);
    background-image: linear-gradient(rgba(12, 14, 28, 0.72), rgba(12, 14, 28, 0.72)),
        url("../../assets/Textures/Background.jpg");
    background-size: cover;
    background-position: center;
    cursor: default;
}

#overlogin *,
#overlogin *::before,
#overlogin *::after {
    box-sizing: border-box;
}

/* Card shells */
#overlogin .popuplogin,
#overlogin .popupregister,
#overlogin .popupverify {
    width: min(420px, calc(100vw - 32px));
    margin: 9vh auto 0;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Card header */
#overlogin .bar_setting {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 20px;
    background: var(--surface-2);
    border: none;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
}

#overlogin .name_login {
    background-image: none;     /* drop low-res header icons      */
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-1);
    overflow: visible;
    white-space: nowrap;
}

/* Card body */
#overlogin .tabcontentfull {
    float: none;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 22px 26px 26px;
}

/* Field labels (h4 wraps the input) */
#overlogin .indented_login,
#overlogin .indented_lv2 {
    margin: 0 0 16px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    text-align: left;
    overflow: visible;
    white-space: normal;
    line-height: 1.4;
}

/* Inputs */
#overlogin .popupinput {
    display: block;
    width: 100%;
    height: 42px;
    margin: 6px 0 0;
    padding: 0 12px;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--text-1);
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#overlogin .popupinput::placeholder {
    color: #6b7390;
}

#overlogin .popupinput:focus {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

/* Status / error message */
#overlogin .loginstatusnotification {
    margin: 4px 0 0;
    min-height: 18px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--warn);
}

/* Primary action */
#overlogin .loginbutton {
    display: block;
    width: 100%;
    height: 44px;
    margin: 14px 0 0;
    padding: 0 16px;
    font-family: var(--ui-font);
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--accent);
    background-image: none;
    border: none;
    border-radius: var(--radius-control);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
    overflow: visible;
    white-space: nowrap;
}

#overlogin .loginbutton:hover {
    background-color: var(--accent-hover);
    background-image: none;
}

#overlogin .loginbutton:active {
    background-color: var(--accent-press);
    transform: translateY(1px);
}

#overlogin .loginbutton:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

#overlogin .forgotpass {
    margin-top: 14px !important;
}

/* Secondary actions row (sign up / forgot password) */
#overlogin .tabButtomrigister {
    display: flex !important;       /* legacy inline style removed in pug   */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border: none;
    border-bottom: none !important;   /* legacy rule uses !important */
    border-top: 1px solid var(--border-soft);
    transform: none;
}

/* Single secondary action → center it */
#overlogin .tabButtomrigister:has(> :only-child) {
    justify-content: center;
}

#overlogin .registerbutton,
#overlogin .forgotpasswordbutton {
    position: static;
    width: auto;
    height: auto;
    padding: 4px 2px;
    font-family: var(--ui-font);
    font-size: 13.5px;
    font-weight: 500;
    color: #9fc3ff;
    background: transparent;
    background-image: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: color 0.15s ease;
}

#overlogin .registerbutton:hover,
#overlogin .forgotpasswordbutton:hover {
    color: #cfe2ff;
    text-decoration: underline;
    background-image: none;
}

/* Terms-of-service row in register form */
#overlogin .containerLogin {
    position: relative;
    left: 0;                    /* legacy .text_policy_private shifts 7%   */
    margin: 4px 0 0;
    padding-left: 26px;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
    color: var(--text-2);
}

#overlogin .containerLogin a {
    color: #9fc3ff;
}

#overlogin .containerLogin input[type="checkbox"] {
    display: inline-block;      /* button.css hides all checkboxes globally */
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

#overlogin .containerLogin .checkmark {
    display: none;                  /* native checkbox + accent-color instead */
}

/* Dead third-party blocks (scripts are commented out in layout) */
#overlogin .g-recaptcha,
#overlogin .g-signin2 {
    display: none;
}

/* Version stamp */
.versioninput {
    font-family: var(--ui-font);
}

/* --------------------------------------------------------------------------
   2. SETTINGS / PROFILE POPUPS — recolor only, keep legacy layout metrics
   -------------------------------------------------------------------------- */

#popupspanel .bar_setting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

#popupspanel .name_setting,
#popupspanel .name_login {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--ui-font);
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: var(--text-1);
    background-image: none;     /* drop the low-res icon overlapping the text */
    overflow: visible;
    text-overflow: clip;
}

/* Header icon keeps its fixed box; close button sits flush right without the
   legacy negative-margin overlap. */
#popupspanel .bar_setting .btnclosepopup {
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

#popupspanel .tab {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-soft);
    border-top: none;
    border-right: none;
}

#popupspanel .tab button {
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--text-2);
}

#popupspanel .tab button:hover {
    background-color: var(--surface-3);
    color: var(--text-1);
}

#popupspanel .tab button.active {
    background-color: var(--surface-1);
    color: var(--text-1);
    box-shadow: inset 3px 0 0 var(--accent);
}

#popupspanel .tabcontent,
#popupspanel .tabcontentfull {
    background-color: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-top: none;
    font-family: var(--ui-font);
}

#popupspanel .popupinput {
    font-family: var(--ui-font);
    color: var(--text-1);
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    outline: none;
}

#popupspanel .popupinput:focus {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

#popupspanel .loginbutton {
    font-family: var(--ui-font);
    font-weight: 600;
    color: #fff;
    background-color: var(--accent);
    background-image: none;
    border: none;
    border-radius: var(--radius-control);
    box-shadow: none;
    cursor: pointer;
}

#popupspanel .loginbutton:hover {
    background-color: var(--accent-hover);
    background-image: none;
}

/* ----- Settings popup layout -------------------------------------------- */
/* Legacy used .tab/.tabcontent height:50em → a huge popup with the few
   options crammed at the top. Give it a sane height with scroll, and a
   readable two-column (nav | content) split. */

#popupspanel #popuptable {
    width: min(700px, 94vw);
    margin: 7vh auto auto;
    position: relative;   /* contain the absolutely-positioned .tab sidebar */
}

#popupspanel .tab {
    position: absolute;
    width: 34%;
    height: 460px;
    border-radius: 0 0 0 12px;
    padding-top: 8px;
}

#popupspanel .tab button {
    padding: 15px 20px;
    border-radius: 0;
}

#popupspanel .tabcontent {
    width: 66%;
    margin-left: 34%;
    height: 460px;
    padding: 6px 24px 20px;
    overflow-y: auto;
    border-radius: 0 0 12px 0;
}

/* Section headings inside settings (Ngôn ngữ, Nhạc nền, …) */
#popupspanel .tabcontent .indented_lv1 {
    margin: 18px 0 4px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    overflow: visible;
    white-space: normal;
}

#popupspanel .tabcontent .indented_lv1:first-child {
    margin-top: 4px;
}

/* Option rows + radio/checkbox labels: drop the percentage indents and the
   ellipsis truncation, lay options in a tidy wrapping row. */
#popupspanel .indented_lv2 {
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
}

#popupspanel .tabcontent .container,
#popupspanel .indented_lv3,
#popupspanel .indented_lv4,
#popupspanel .indented_lv5,
#popupspanel .indented_lv6 {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 6px 22px 6px 0;
    padding-left: 28px;
    font-size: 14px;
    color: var(--text-2);
    overflow: visible;
    white-space: nowrap;
}

/* Custom radio/checkbox squares → accent when selected */
#popupspanel .checkmark {
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    border-radius: 4px;
    background-color: #2a2f4d;
    border: 1px solid var(--border-strong);
}

#popupspanel .container input:checked ~ .checkmark {
    background-color: var(--accent);
    border-color: var(--accent);
}

#popupspanel .container .checkmark:after {
    left: 6px;
    top: 2px;
}

/* About tab text */
#popupspanel .aboutTitle {
    margin: 16px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}

#popupspanel .aboutText {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-2);
}

/* Control tab tutorial image — now a real <img src>; show it full-width at its
   natural aspect (legacy was an empty <image> with only a CSS background that
   never rendered, leaving the tab blank). */
#popupspanel .controlTutorial {
    display: block;
    width: 100%;
    height: auto;
    background-image: none;
    border-radius: 8px;
}

/* ----- Profile popup layout --------------------------------------------- */

#popupspanel #popupuserinfor {
    width: min(440px, 94vw);
    margin: 6vh auto auto;
}

#popupspanel #popupuserinfor .tabcontentfull {
    height: auto;
    padding: 20px 26px 24px;
}

#popupspanel .profilecolum1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0 8px;
}

#popupspanel #inp_username_profile {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    margin: 12px 0 2px;
}

#popupspanel #inp_email_profile {
    font-size: 13px;
    color: var(--text-3);
    margin: 0 0 4px;
}

#popupspanel #inp_birthday_profile {
    font-size: 13px;
    color: var(--text-2);
}

/* Profile field labels */
#popupspanel #popupuserinfor .indented_lv2 {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
}

/* Profile text inputs span the card */
#popupspanel #popupuserinfor .popupinput {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 6px;
    padding: 0 12px;
}

/* Gender radio row sits inline under its label */
#popupspanel #profile_gender {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

#popupspanel #btnEditprofile {
    width: 100%;
    height: 44px;
    margin-top: 22px;
}

/* --------------------------------------------------------------------------
   3. TOP BAR
   -------------------------------------------------------------------------- */

.topbar {
    background-color: #1c2036;
    border-bottom: 1px solid var(--border-soft) !important;
    border-bottom-style: solid !important;
}

.bgTopbar {
    background: #2a2f4d;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    height: 30px;
    top: 4px;
}

.nameUser {
    font-family: var(--ui-font);
}

/* --------------------------------------------------------------------------
   4. MAIN MENU (title, cards, footer)
   -------------------------------------------------------------------------- */

/* Legacy: fixed full-height block under a 40px topbar with no scrolling —
   smaller windows simply cut the bottom card row off. */
.headmenus {
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
}

.fonttitle {
    font-family: var(--ui-font);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--text-1);
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}

.fontcenter {
    font: 600 12px var(--ui-font);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #aab1c8;
    opacity: 0.8;
    text-shadow: none;
}

.card {
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    filter: none;
    cursor: pointer;
}

.card:hover {
    border-color: rgba(125, 170, 255, 0.45);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(125, 170, 255, 0.25);
    filter: none;
    transform: translateY(-6px);
}

.menutext {
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--text-1);
}

/* --------------------------------------------------------------------------
   5. IN-GAME PANELS — typography & contrast only
   -------------------------------------------------------------------------- */

/* Info panels: the id rules + slide-in keyframes pin a translucent bg, so use
   id selectors with !important (which also beats the animation's end frame). */
#s_menuright,
#m_menuright,
#s_menuleft .menuright,
.menuright {
    background: rgba(22, 25, 44, 0.92) !important;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    font-family: var(--ui-font);
}

/* Left function toolbar — modernize colours, keep geometry/icons intact.
   Buttons float over the dark 3D canvas, so keep them clearly visible.
   Use background-color (NOT the `background` shorthand) so the icon
   background-image set by the .icon* classes is preserved. */
.functionbutton {
    background-color: #3c4267;
}

.functionbutton:hover {
    background-color: #4a5184;
}

.functionbutton:active,
.functionbutton.active {
    background-color: var(--accent);
}

.btnfullScreen {
    background-color: #3c4267;
}

.btnfullScreen:hover {
    background-color: #4a5184;
}

.titelbar {
    border-bottom: 1px solid var(--border-strong) !important;
    border-bottom-style: solid !important;
    font-family: var(--ui-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    padding-bottom: 6px;
}

.contentInfo {
    font-family: var(--ui-font);
    font-size: 13px;
    line-height: 1.6;
    color: #ccd3e6;
}

.loadingmess {
    font-family: var(--ui-font);
    color: var(--text-2);
}

/* Loading spinner — recolor to the accent, keep size/animation */
.loader {
    border: 6px solid rgba(255, 255, 255, 0.12);
    border-top: 6px solid var(--accent);
}

/* --------------------------------------------------------------------------
   6. IN-GAME CONTROLS — search panel, animation bar
   -------------------------------------------------------------------------- */

/* Search pop-over — legacy issues: the input was a tiny borderless transparent
   field (#7fffd400) so it looked invisible, and the results <ul> started at the
   same Y as the top bar, overlapping the input. Rebuild the panel layout. */
.chat_container .chat {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Top search bar holding the input; right space reserved for the button */
.chat_container .chat .textbox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 98px 0 12px;
    background: var(--surface-2);
    box-shadow: none;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 12px 12px 0 0;
}

/* Make the search input a real, visible field */
.searchInput {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--text-1);
    background-color: var(--field-bg) !important;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: none;
}

.searchInput:focus {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.searchInput::placeholder {
    color: #6b7390;
}

/* Search button — anchored to the right of the top bar */
.searchbutton {
    position: absolute;
    top: 9px;
    right: 10px;
    height: 36px;
    width: 76px;
    font-family: var(--ui-font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.searchbutton:hover {
    background: var(--accent-hover);
}

/* Results list — sits BELOW the top bar and scrolls, with clean rows */
.searchContentNode {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
    font-family: var(--ui-font);
}

.searchContentNode li {
    padding: 9px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.searchContentNode li:hover {
    background: rgba(61, 139, 253, 0.12);
    color: var(--text-1);
}

/* Animation control bar (Pause / Previous / Next / speed) */
.animationbutton {
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.animationbutton:hover {
    background-color: var(--surface-3);
    border-color: var(--accent);
}

/* Teeth-growth timeline — legacy was a 25px flat light-grey bar with a square
   green thumb. Make it a slim rounded track with a round accent knob. */
.teethGrowUp_slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16) !important;
    opacity: 1 !important;
    outline: none;
    cursor: pointer;
}

.teethGrowUp_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.teethGrowUp_slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.teethGrowUp_slider::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.teethGrowUp_slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    cursor: pointer;
}

/* Play = primary action → accent; the rest stay neutral */
#btnPlayAnimation.animationbutton {
    background-color: var(--accent);
    border-color: var(--accent);
}

#btnPlayAnimation.animationbutton:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   7. SIM UI REFINEMENTS — numbering toggle, info-panel scroll, toolbar group
   -------------------------------------------------------------------------- */

/* Tooth-numbering selector (All / Universal / Palmer / FDI) — the radio sprite
   is disabled in legacy CSS, leaving plain text with no active state. Render
   as a clean pill toggle group. */
#grouptext {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ui-font);
}

#grouptext label {
    cursor: pointer;
    margin: 0;
}

#grouptext label span {
    display: inline-block;
    margin: 0 !important;
    padding: 5px 14px;
    width: auto;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-2);
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#grouptext label:hover span {
    color: var(--text-1);
    background-color: rgba(255, 255, 255, 0.12) !important;
}

#grouptext input[type="radio"]:checked + label span {
    color: #fff;
    background-color: var(--accent) !important;
    border-color: var(--accent);
}

/* Info-panel body scrolls when the description is long, instead of overflowing
   down the screen. The panel itself stays a fixed, readable card. */
#s_menuright,
#m_menuright {
    max-height: calc(100vh - 175px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.contentInfo {
    overflow-wrap: break-word;
}

/* (Toolbar groups keep their legacy per-button corner rounding; no overflow
   clipping here — the hover tooltips render OUTSIDE the buttons.) */

/* Tooltip bubbles in the sim — match the dark theme */
.tooltiptextright,
.tooltiptextrightGroup,
.tooltiptextTop {
    font-family: var(--ui-font);
}

/* --------------------------------------------------------------------------
   8. BOTTOM TOOTH LIST ("Tất cả" chooser + ping table)
   The list rows used double borders, a fixed 14% height and nowrap+ellipsis
   so every tooth name collapsed to just "number ...". Make it a clean,
   readable, themed list.
   -------------------------------------------------------------------------- */

/* "◈ Tất cả ◈" chooser header */
.mymainblock {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-family: var(--ui-font);
}

.choose_normal_text {
    font-family: var(--ui-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}

/* Scrollable tooth list */
.pingtable {
    background-color: var(--surface-1) !important;
    border: 1px solid var(--border-soft);
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-family: var(--ui-font);
}

/* Each row: number badge + readable name (no more "..." truncation) */
.pingbutton {
    height: auto !important;
    min-height: 38px;
    padding: 8px 12px !important;
    border-top: 1px solid var(--border-soft) !important;
    border-top-style: solid !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-2);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pingbutton:first-child {
    border-top: none !important;
}

.pingbutton:hover {
    background: rgba(61, 139, 253, 0.12);
    color: var(--text-1);
}

.pingbuttonactive {
    background-color: rgba(61, 139, 253, 0.22) !important;
    color: var(--text-1);
}

/* Number badge — keep JS-set colour, just give it a consistent pill shape */
.cycleid {
    flex: 0 0 auto;
    min-width: 28px;
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.08);
}

.pingbutton li {
    display: inline;
    margin: 0;
    text-align: left;
}