/* ==================== CUSTOMER VIEW ==================== */

:root {
    --primary-dark: #1a1d29;
    --secondary-dark: #252836;
    --accent-gold: #d4af37;
    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --border-color: #363948;
    --hover-bg: #2d3142;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* ==================== LIGHT MODE ==================== */
body.light-mode {
    --primary-dark: #f5f5f5;
    --secondary-dark: #ffffff;
    --text-primary: #1a1d29;
    --text-secondary: #4a4a4a;
    --border-color: #e0e0e0;
    --hover-bg: #f9f9f9;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.light-mode .navbar-custom {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border-bottom: 2px solid var(--accent-gold);
}

body.light-mode table {
    background-color: #ffffff;
}

body.light-mode table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

body.light-mode table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

body.light-mode table tbody tr:hover {
    background-color: #f9f9f9;
}

body.light-mode #hiddenFullscreenBtn {
    background-color: #f5f5f5;
}

body.light-mode #hiddenFullscreenBtn:hover {
    background-color: #e0e0e0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--primary-dark);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: manipulation;
}

/* ==================== NAVBAR ==================== */
.navbar-custom {
    background: linear-gradient(135deg, #1a1d29 0%, #252836 100%);
    border-bottom: 2px solid var(--accent-gold);
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    z-index: 1030;
    padding: 10px 24px;
    box-shadow: var(--shadow);
    height: 84px;
}
.navbar-content { display: flex; align-items: center; gap: 14px; height: 100%; width: 100%; }
.navbar-brand-block { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.navbar-logo-container { flex-shrink: 0; display: flex; align-items: center; }
.navbar-logo, #logo { height: 64px; width: 64px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 2px 4px rgba(212,175,55,0.3)); }
/* Logo yoksa: dairesel placeholder (şirket adı baş harfi) */
.navbar-logo-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-gold), #b8941f);
    color: #1a1d29; font-weight: 800; font-size: 1.6rem;
    line-height: 1; letter-spacing: 0;
    text-transform: uppercase; user-select: none;
    border: 2px solid rgba(0,0,0,0.15);
}
body.light-mode .navbar-logo-placeholder { color: #1a1d29; border-color: rgba(255,255,255,0.6); }
.navbar-company-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.1px;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ==================== BODY ==================== */
.body-content { width: 100vw; max-width: 100vw; padding: 0; margin: 0; min-height: calc(100vh - 84px); background-color: var(--primary-dark); overflow-x: hidden; }
.navbar-custom + .body-content { margin-top: 84px; }

/* ==================== TABLE CONTAINER ==================== */
.table-responsive { width: 100vw; max-width: 100vw; margin: 0; padding: 0.5rem 1rem; overflow-x: auto; background-color: var(--primary-dark); box-sizing: border-box; }

/* ==================== TABLE (normal) ==================== */
table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; background-color: var(--secondary-dark); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
table thead { background: linear-gradient(135deg, var(--accent-gold) 0%, #b8941f 100%); }
table thead th { padding: 10px; font-weight: 700; font-size: 34px; color: var(--primary-dark); border: none; letter-spacing: 0.5px; }
table thead th:first-child { text-align: left; }
table thead th:nth-child(2), table thead th:nth-child(3) { text-align: right; }

table td:first-child { text-align: left; }
table td:nth-child(2), table td:nth-child(3) { text-align: right; font-weight: 700; }

table tbody tr { border-bottom: 1px solid var(--border-color); transition: all 0.2s ease; }
table tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.02); }
table tbody tr:nth-child(odd) { background-color: transparent; }
table tbody tr:hover { background-color: var(--hover-bg); transform: translateX(4px); box-shadow: 0 2px 8px rgba(212,175,55,0.1); }

table tbody td { padding: 10px; vertical-align: middle; font-size: 34px; font-weight: 700; color: var(--text-primary); }
table tbody td:first-child { font-weight: 700; }
table tbody td:nth-child(2), table tbody td:nth-child(3) { color: var(--text-primary) !important; font-weight: 700; }

/* ==================== SCALE WRAP ==================== */
.scale-wrap { width: 100%; max-width: 100%; height: 100%; overflow: visible; transform-origin: top left; box-sizing: border-box; }

/* ==================== COLGROUP ==================== */
.col-name { width: 55%; }
.col-buy  { width: 22.5%; }
.col-sell { width: 22.5%; }


/* =====================================================================
   THEAD BRAND (F11 dışında gizli)
   ===================================================================== */
.fs-brand { display: none; }
.fs-brand-logo { display: none; }
.fs-live { display: none; }
.fs-th-content { display: block; }
.fs-meta { display: block; }

/* =====================================================================
   FULLSCREEN — TEK SATIRDA BAŞLIK
   [logo] [firma adı] · TAVSİYE EDİLEN FİYATLAR | ALIŞ | SATIŞ
   Navbar + clock band tamamen gizli. Thead = single header bar.
   Data rows = (100vh - thead) / row-count
   ===================================================================== */

html.is-fullscreen, body.is-fullscreen, :fullscreen, :-webkit-full-screen {
    --fs-thead-h: 9vh;
}

/* Navbar tamamen gizli */
:fullscreen .navbar-custom,
:-webkit-full-screen .navbar-custom,
html.is-fullscreen .navbar-custom,
body.is-fullscreen .navbar-custom {
    display: none !important;
}

/* Orijinal .live-band (table üstündeki bant) F11'de gizli — th içindeki fs-live gösterir */
:fullscreen .live-band,
:-webkit-full-screen .live-band,
html.is-fullscreen .live-band,
body.is-fullscreen .live-band {
    display: none !important;
}

:fullscreen .body-content,
:-webkit-full-screen .body-content,
html.is-fullscreen .body-content,
body.is-fullscreen .body-content {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

:fullscreen .table-responsive,
:-webkit-full-screen .table-responsive,
html.is-fullscreen .table-responsive,
body.is-fullscreen .table-responsive {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

:fullscreen .scale-wrap,
:-webkit-full-screen .scale-wrap,
html.is-fullscreen #scaleWrap,
body.is-fullscreen #scaleWrap {
    width: 100vw !important;
    height: 100% !important;
    transform: none !important;
}

:fullscreen table,
:-webkit-full-screen table,
html.is-fullscreen #scaleWrap table,
body.is-fullscreen #scaleWrap table {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* Tek satır thead — TAVSİYE+ALIŞ+SATIŞ aynı altın blok, beyaz metin; brand pill kendi koyu zeminini taşır */
:fullscreen table thead th,
:-webkit-full-screen table thead th,
html.is-fullscreen #scaleWrap thead th,
body.is-fullscreen #scaleWrap thead th {
    padding: 0 16px !important;
    font-size: clamp(14px, 3.2vh, 30px) !important;
    font-weight: 700 !important;
    height: var(--fs-thead-h) !important;
    vertical-align: middle !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    color: #ffffff !important;
}

/* İlk th: thead'in altın gradient'ı görünür kalır — brand kendi koyu pill bg'sini taşır */
:fullscreen table thead th:first-child,
:-webkit-full-screen table thead th:first-child,
html.is-fullscreen #scaleWrap thead th:first-child,
body.is-fullscreen #scaleWrap thead th:first-child {
    padding: 0 !important;
}

/* F11 first th: brand (sol koyu pill) + meta (sağ, altın zemin) — gap yok, brand'in hemen sağında TAVSİYE */
:fullscreen .fs-th-content,
:-webkit-full-screen .fs-th-content,
html.is-fullscreen .fs-th-content,
body.is-fullscreen .fs-th-content {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Brand: kendi bg'si (gece koyu / gündüz beyaz-krem), tam yükseklik pill */
:fullscreen .fs-brand,
:-webkit-full-screen .fs-brand,
html.is-fullscreen .fs-brand,
body.is-fullscreen .fs-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 18px !important;
    height: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    background: linear-gradient(135deg, #1a1d29 0%, #252836 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.25);
}

body.light-mode.is-fullscreen .fs-brand,
html.is-fullscreen body.light-mode .fs-brand,
:fullscreen body.light-mode .fs-brand,
:-webkit-full-screen body.light-mode .fs-brand {
    background: linear-gradient(135deg, #ffffff 0%, #f5f0e1 100%) !important;
    color: #1a1d29 !important;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.08);
}

/* F11'de TAVSİYE EDİLEN FİYATLAR — meta bloğunun üst satırı */
:fullscreen .fs-meta .th-title,
:-webkit-full-screen .fs-meta .th-title,
html.is-fullscreen .fs-meta .th-title,
body.is-fullscreen .fs-meta .th-title {
    display: block !important;
    font-size: clamp(12px, 2vh, 20px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

/* Meta blok: brand pill'inin hemen sağında, altın zemin üzerinde BEYAZ metin */
:fullscreen .fs-meta,
:-webkit-full-screen .fs-meta,
html.is-fullscreen .fs-meta,
body.is-fullscreen .fs-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    color: #ffffff !important;
    padding: 0 18px !important;
    min-width: 0 !important;
}

/* CANLI · saat satırı — altın zemin üzerinde beyaz metin */
:fullscreen .fs-live,
:-webkit-full-screen .fs-live,
html.is-fullscreen .fs-live,
body.is-fullscreen .fs-live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: clamp(10px, 1.4vh, 14px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1 !important;
}

:fullscreen .fs-live-dot,
:-webkit-full-screen .fs-live-dot,
html.is-fullscreen .fs-live-dot,
body.is-fullscreen .fs-live-dot {
    width: 8px !important;
    height: 8px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: blink 1.5s infinite !important;
}

:fullscreen .fs-live-sep,
:-webkit-full-screen .fs-live-sep,
html.is-fullscreen .fs-live-sep,
body.is-fullscreen .fs-live-sep {
    opacity: 0.55;
}

:fullscreen .fs-brand-logo,
:-webkit-full-screen .fs-brand-logo,
html.is-fullscreen .fs-brand-logo,
body.is-fullscreen .fs-brand-logo {
    display: inline-block !important;
    height: calc(var(--fs-thead-h) * 0.62) !important;
    width: calc(var(--fs-thead-h) * 0.62) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* F11 brand logo placeholder (logo yoksa baş harf) */
:fullscreen .fs-brand-logo-placeholder,
:-webkit-full-screen .fs-brand-logo-placeholder,
html.is-fullscreen .fs-brand-logo-placeholder,
body.is-fullscreen .fs-brand-logo-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--accent-gold), #b8941f) !important;
    color: #1a1d29 !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 2.4vh, 26px) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    user-select: none !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
}

/* Brand-name: font + line-height + ellipsis (uzun isim taşmaz) */
:fullscreen .fs-brand-name,
:-webkit-full-screen .fs-brand-name,
html.is-fullscreen .fs-brand-name,
body.is-fullscreen .fs-brand-name {
    font-size: clamp(14px, 2.6vh, 24px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    color: inherit !important;
    line-height: 1.35 !important;
    max-width: 24vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-bottom: 2px !important;
}

/* Ayırıcı F11'de görünmüyor (TAVSİYE yazısı gizli olduğu için artık gerek yok) */
:fullscreen .fs-brand-sep,
:-webkit-full-screen .fs-brand-sep,
html.is-fullscreen .fs-brand-sep,
body.is-fullscreen .fs-brand-sep {
    display: none !important;
}

/* Theme toggle butonu F11'de gizli (güvence) */
:fullscreen #themeToggleBtn,
:-webkit-full-screen #themeToggleBtn,
html.is-fullscreen #themeToggleBtn,
body.is-fullscreen #themeToggleBtn {
    display: none !important;
}

/* Data satırları — kalan alanı --row-count'a böl */
:fullscreen table tbody tr,
:-webkit-full-screen table tbody tr,
html.is-fullscreen #scaleWrap tbody tr,
body.is-fullscreen #scaleWrap tbody tr {
    height: calc((100vh - var(--fs-thead-h)) / var(--row-count, 14)) !important;
}

:fullscreen table tbody td,
:-webkit-full-screen table tbody td,
html.is-fullscreen #scaleWrap tbody td,
body.is-fullscreen #scaleWrap tbody td {
    padding: 0 16px !important;
    font-size: clamp(13px, calc((100vh - var(--fs-thead-h)) / var(--row-count, 14) * 0.5), 56px) !important;
    font-weight: 700 !important;
    height: calc((100vh - var(--fs-thead-h)) / var(--row-count, 14)) !important;
    line-height: calc((100vh - var(--fs-thead-h)) / var(--row-count, 14)) !important;
    vertical-align: middle !important;
}

/* JS Fullscreen html/body */
html.is-fullscreen,
body.is-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* ==================== RESPONSIVE (non-fullscreen) ==================== */

@media screen and (min-width: 2560px) {
    .navbar-custom { height: 120px; padding: 14px 40px; }
    .navbar-logo, #logo { height: 96px; width: 96px; }
    .navbar-company-name { font-size: 40px; }
    .navbar-custom + .body-content { margin-top: 120px; min-height: calc(100vh - 120px); }
    .table-responsive { padding: 1rem 3rem; }
    table thead th { font-size: 44px; padding: 12px 16px; }
    table tbody td { font-size: 44px; padding: 12px 16px; }
}

@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .navbar-custom { height: 100px; padding: 12px 32px; }
    .navbar-logo, #logo { height: 80px; width: 80px; }
    .navbar-company-name { font-size: 32px; }
    .navbar-custom + .body-content { margin-top: 100px; min-height: calc(100vh - 100px); }
    .table-responsive { padding: 0.75rem 2rem; }
    table thead th { font-size: 36px; padding: 10px 14px; }
    table tbody td { font-size: 36px; padding: 10px 14px; }
}

@media screen and (min-width: 1400px) and (max-width: 1919px) {
    .navbar-custom { height: 90px; padding: 10px 28px; }
    .navbar-logo, #logo { height: 70px; width: 70px; }
    .navbar-company-name { font-size: 26px; }
    .navbar-custom + .body-content { margin-top: 90px; min-height: calc(100vh - 90px); }
    .table-responsive { padding: 0.5rem 1.5rem; }
    table thead th { font-size: 34px; padding: 10px; }
    table tbody td { font-size: 34px; padding: 10px; }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .navbar-custom { height: 76px; padding: 10px 20px; }
    .navbar-logo, #logo { height: 56px; width: 56px; }
    .navbar-company-name { font-size: 20px; }
    .navbar-custom + .body-content { margin-top: 76px; min-height: calc(100vh - 76px); }
    .table-responsive { padding: 0.5rem 1rem; }
    table thead th { font-size: 26px; padding: 8px 10px; }
    table tbody td { font-size: 26px; padding: 8px 10px; }
}

/* ==================== TABLET ==================== */
@media screen and (max-width: 768px) {
    .navbar-custom { height: 64px; padding: 8px 15px; }
    .navbar-logo, #logo { height: 44px; width: 44px; }
    .navbar-company-name { font-size: 16px; }
    .navbar-content { gap: 10px; }
    .navbar-brand-block { gap: 10px; }
    .navbar-custom + .body-content { margin-top: 64px; min-height: calc(100vh - 64px); }
    .table-responsive { padding: 1rem; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    table { min-width: unset; width: 100%; }
    table thead th { padding: 10px; font-size: 15px; font-weight: 700; }
    table tbody td { padding: 10px; font-size: 15px; }
}

/* ==================== MOBILE ==================== */
@media screen and (max-width: 576px) {
    html, body { font-size: 16px; }
    .navbar-custom { height: 58px; padding: 8px 12px; }
    .navbar-logo, #logo { height: 38px; width: 38px; }
    .navbar-company-name { font-size: 14px; }
    .navbar-content { gap: 8px; }
    .navbar-brand-block { gap: 8px; }
    .navbar-custom + .body-content { margin-top: 58px; min-height: calc(100vh - 58px); }
    .table-responsive { padding: 0.75rem 0.5rem; overflow-x: hidden; }
    table { min-width: unset; width: 100%; }
    table thead th { padding: 8px; font-size: 14px; white-space: nowrap; }
    table tbody td { padding: 8px; font-size: 14px; white-space: nowrap; }
    table tbody tr { min-height: 48px; }
}

/* ==================== SMALL MOBILE ==================== */
@media screen and (max-width: 400px) {
    html, body { font-size: 14px; }
    .navbar-custom { height: 54px; padding: 6px 10px; }
    .navbar-logo, #logo { height: 34px; width: 34px; }
    .navbar-company-name { font-size: 13px; }
    .navbar-content { gap: 6px; }
    .navbar-brand-block { gap: 6px; }
    .navbar-custom + .body-content { margin-top: 54px; min-height: calc(100vh - 54px); }
    .table-responsive { padding: 0.5rem 0.25rem; overflow-x: hidden; }
    table { min-width: unset; width: 100%; }
    table thead th { padding: 6px; font-size: 12px; }
    table tbody td { padding: 6px; font-size: 12px; }
    table tbody tr { min-height: 44px; }
}

/* ==================== MOBILE LANDSCAPE ==================== */
@media screen and (max-width: 926px) and (orientation: landscape) {
    .navbar-custom { height: 50px; padding: 6px 12px; }
    .navbar-logo, #logo { height: 34px; width: 34px; }
    .navbar-company-name { font-size: 13px; }
    .navbar-custom + .body-content { margin-top: 50px; min-height: calc(100vh - 50px); }
    .table-responsive { padding: 0.5rem 1rem; }
    table thead th { padding: 6px 8px; font-size: 14px; }
    table tbody td { padding: 6px 8px; font-size: 14px; }
}

/* ==================== MOBILE ENHANCEMENTS ==================== */
@media screen and (max-width: 768px) {
    .table-responsive { scroll-behavior: smooth; overflow-x: hidden; }
    table tbody tr { cursor: default; -webkit-tap-highlight-color: transparent; }
    table tbody tr:active { background-color: var(--hover-bg); }
    .navbar-custom { position: fixed; top: 0; left: 0; right: 0; }
    table tbody td:nth-child(2), table tbody td:nth-child(3) { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
    .col-name { width: 50%; }
    .col-buy  { width: 25%; }
    .col-sell { width: 25%; }
    table thead th { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    table tbody td { word-break: break-word; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
}

@media screen and (max-width: 375px) {
    .table-responsive { padding: 0.5rem 0.25rem; overflow-x: hidden; }
    table { min-width: unset; width: 100%; }
    table thead th { padding: 5px; font-size: 11px; }
    table tbody td { padding: 5px; font-size: 11px; }
    .navbar-logo, #logo { height: 32px; width: 32px; }
    .navbar-company-name { font-size: 12px; }
}

@media screen and (max-width: 400px) {
    .col-name { width: 45%; }
    .col-buy  { width: 27.5%; }
    .col-sell { width: 27.5%; }
}

/* ==================== PORTRAIT (DİKEY TV / EKRAN) ==================== */
/* Firma adı tam görünsün, gerekirse 2 satıra düşsün. Fiyat kolonları aynı kalır. */
@media (orientation: portrait) and (min-width: 769px) {
    .navbar-brand-block {
        min-width: 0;
        flex: 1;
        align-items: center;
    }
    .navbar-company-name {
        font-size: clamp(18px, 1.8vw, 28px);
        line-height: 1.1;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .navbar-logo, #logo {
        height: clamp(56px, 4.5vw, 76px);
        width: clamp(56px, 4.5vw, 76px);
        flex-shrink: 0;
    }
    .navbar-custom {
        height: clamp(96px, 11vh, 130px);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-custom + .body-content {
        margin-top: clamp(96px, 11vh, 130px);
        min-height: calc(100vh - clamp(96px, 11vh, 130px));
    }
}

/* ==================== PRINT ==================== */
@media print {
    .navbar-custom { display: none !important; }
    .body-content { margin-top: 0 !important; }
    table { page-break-inside: auto; }
    table tr { page-break-inside: avoid; page-break-after: auto; }
}