/* Reset + Base */
html,
body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* ✅ BODY now is COLUMN (header top, content below) */
body {
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* background: #a4a4a4;
     background:#a4a4a4;  */
}

input,
textarea,
select,
option,
[contenteditable="true"],
.allow-select,
.select-text,
code.api-key {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* =====================
   TOP HEADER BAR
   ===================== */
.top-header {
    /* width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
    border-bottom: 1px solid #7a9abf;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    user-select: none; */

    width: 100%;
    height: auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    padding: 0 10px;
    background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
    border-bottom: 1px solid #7a9abf;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    user-select: none;
    box-sizing: border-box;
    overflow: hidden;

}


/* APP ICON */
.app-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
}

/* Mobile menu controls — hidden on desktop */
.menu-toggle,
.mobile-days-chip,
.mobile-drawer,
.mobile-drawer-backdrop {
    display: none;
}

/* left header controls */
.header-left {
    /* display: flex; */
    /* align-items: center; */
    /* gap: 8px; */


    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 5px;

    overflow-x: auto;
    overflow-y: hidden;
}

.header-left label {
    white-space: nowrap;
}

.header-left select {
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid #7a9abf;
    background: #fff;
    border-radius: 2px;
}

.header-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.header-row-secondary,
.header-row-checks {
    flex-wrap: nowrap;
}

.header-row-checks {
    margin-left: 4px;
}

@media (min-width: 901px) {
    .header-left {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .header-row {
        display: contents;
    }

    .header-row-checks {
        margin-left: 8px;
    }
}

/* checkbox alignment */
.chk {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* refresh button */
.refresh-btn {
    height: 24px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid #7a9abf;
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.refresh-btn:hover {
    background: linear-gradient(to bottom, #ffffff, #d7d7d7);
}

.refresh-btn:active {
    transform: translateY(1px);
}

/* theme button */
.theme-btn {
    height: 24px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid #5c6f86;
    background: linear-gradient(to bottom, #ffffff, #dfe6ee);
    cursor: pointer;
    font-weight: bold;
    color: #000;
}

.theme-btn:hover {
    background: linear-gradient(to bottom, #ffffff, #d2dce7);
}

/* right header side */
.header-right {
    /* display: flex; */
    /* align-items: center; */
    /* gap: 10px; */


    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.days-left {
    font-weight: bold;
    color: black;
    white-space: nowrap;
}

.days-left-open {
    opacity: 0.75;
}

.user-badge {
    height: 15px;
    padding: 3px 14px;
    border-radius: 12px;
    border: 1px solid #7a9abf;
    background: rgba(255, 255, 255, 0.6);
}

.logout-btn {
    height: 24px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid #9c2a2a;
    background: linear-gradient(to bottom, #ffb3b3, #ff8080);
    font-weight: bold;
    cursor: pointer;
}

.logout-btn:hover {
    background: linear-gradient(to bottom, #ffcccc, #ff6666);
}

/* ✅ wrapper for left + right */
.content-wrapper {
    flex: 1;
    display: flex;
    gap: 5px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Left */
.main-left {
    flex: 1.3;
    display: flex;
    height: 100%;
    flex-direction: column;
    min-width: 0;
}

/* Right */
.main-right {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 2px;
    height: 100%;
    min-width: 0;
    background-color: #f3f3f3;
    box-sizing: border-box;
}


/* ================= BOXES ================= */
.box-row {
    display: flex;
    gap: 5px;
    align-items: stretch;
}

#box-1,
#box-2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
    border: 1px solid grey;
    height: 88px;
    box-sizing: border-box;
}

.textbox-group {
    display: flex;
    justify-content: left;
    gap: 2px;
    overflow: hidden;
    height: calc(100% / 3);
}

.textbox-group input {
    padding: 7px;
    background-color: hsla(0, 1%, 86%, 0.705);
    border: 1px solid #999;
    border-radius: 1px;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

#team1name,
#team2name,
#team3name,
#cut1name,
#cut2name,
#cut3name {
    width: 70px;
}

#team1amt,
#team2amt,
#team3amt,
#cut1amt,
#cut2amt,
#cut3amt {
    width: 135px;
    text-align: right;
}

/* ================= TABLES ================= */
.table-container {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    border: 0.5px solid #444;
    margin-top: 5px;
}

table {
    width: max-content;
    border-collapse: collapse;
}

th,
td {
    border: 1.5px solid #a4a3a3;
    padding: 1.5px;
    text-align: left;
    font-weight: bold;
    user-select: none;
}

th {
    background-color: #eee;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Column widths match */
#match-table-container table {
    width: 100%;
    table-layout: fixed;
}

#match-table-container th:nth-child(1),
#match-table-container td:nth-child(1) {
    width: 4%;
    text-align: center;
}

#match-table-container th:nth-child(2),
#match-table-container td:nth-child(2) {
    width: 7%;
    text-align: right;
}

#match-table-container th:nth-child(3),
#match-table-container td:nth-child(3) {
    width: 8%;
    text-align: right;
}

#match-table-container th:nth-child(4),
#match-table-container td:nth-child(4) {
    width: 4%;
    text-align: center;
}

#match-table-container th:nth-child(5),
#match-table-container td:nth-child(5) {
    width: 6%;
}

#match-table-container th:nth-child(6),
#match-table-container td:nth-child(6) {
    width: 15%;
}

#match-table-container th:nth-child(7),
#match-table-container td:nth-child(7) {
    width: 10%;
    text-align: right;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#match-table-container th:nth-child(8),
#match-table-container td:nth-child(8) {
    width: 12%;
    text-align: right;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#match-table-container th:nth-child(9),
#match-table-container td:nth-child(9) {
    width: 30%;
    padding-left: 8px;
    white-space: nowrap;
}

/* session widths — full width grid; extra gap before TIME (like match TEAM2/TIME) */
#session-table-container table {
    width: 100%;
    table-layout: fixed;
}

#session-table-container th:nth-child(1),
#session-table-container td:nth-child(1) {
    width: 4%;
    text-align: center;
}

#session-table-container th:nth-child(2),
#session-table-container td:nth-child(2) {
    width: 6%;
    text-align: right;
}

#session-table-container th:nth-child(3),
#session-table-container td:nth-child(3) {
    width: 6%;
    text-align: right;
}

#session-table-container th:nth-child(4),
#session-table-container td:nth-child(4) {
    width: 6%;
    text-align: right;
}

#session-table-container th:nth-child(5),
#session-table-container td:nth-child(5) {
    width: 5%;
    text-align: center;
}

#session-table-container th:nth-child(6),
#session-table-container td:nth-child(6) {
    width: 14%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#session-table-container th:nth-child(7),
#session-table-container td:nth-child(7) {
    width: 10%;
    text-align: right;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#session-table-container th:nth-child(8),
#session-table-container td:nth-child(8) {
    width: 12%;
    text-align: right;
    padding-right: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#session-table-container th:nth-child(9),
#session-table-container td:nth-child(9) {
    width: 37%;
    padding-left: 10px;
    white-space: nowrap;
}

#session-table {
    width: 100%;
    table-layout: fixed;
}

/* ❗ IMPORTANT: separate modal table */
#sessionModalTable {
    width: max-content;
    table-layout: auto;
}

/* row colors */
.row-m {
    background-color: rgb(0, 255, 255);
}

.row-d {
    background-color: red;
}

.row-k {
    background-color: rgb(255, 255, 128);
}

.row-l {
    background-color: rgb(255, 192, 255);
}

/* right side tables */
.session-summary {
    flex: 0.8;
    border: 1px solid #888;
    background-color: #fff;
    overflow-y: auto;
}

#session-summary-table {
    width: 100%;
    table-layout: fixed;
}

#session-summary-table th:first-child,
#session-summary-table td:first-child {
    width: 35%;
    text-align: center;
}

#session-summary-table th:last-child,
#session-summary-table td:last-child {
    width: 65%;
    text-align: right;
    padding-right: 5px;
}

.usertotal-summary {
    flex: 1.5;
    border: 1px solid #888;
    background-color: #fff;
    overflow-y: auto;
}

.usertotal-table {
    width: 100%;
    table-layout: fixed;
}

.usertotal-table th:nth-child(1),
.usertotal-table td:nth-child(1) {
    width: 50%;
    text-align: left;
    padding-left: 5px;
}

.usertotal-table th:nth-child(2),
.usertotal-table td:nth-child(2),
.usertotal-table th:nth-child(3),
.usertotal-table td:nth-child(3),
.usertotal-table th:nth-child(4),
.usertotal-table td:nth-child(4) {
    width: 25%;
    text-align: right;
    padding-right: 5px;
}

/* =========================
   USER MODAL
========================= */

.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    align-items: flex-start;
    justify-content: center;
    padding-top: 2vh;
    box-sizing: border-box;
}

.modal-content {
    /* background: #dcdcdc; */
    background: #fff;
    margin: 0 auto;
    margin-top: 0;
    width: max-content;
    min-width: unset;
    max-width: 98vw;
    border: 1px solid #666;
    box-sizing: border-box;
    max-height: 96vh;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.individual-report-shell {
    display: flex;
    flex-direction: column;
    max-height: 96vh;
}

.individual-report-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
    border-bottom: 1px solid #7a9abf;
}

.individual-report-title {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.individual-report-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 5px;
}

.individual-report-footer {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px;
    text-align: center;
    background: #e8e8e8;
    border-top: 1px solid #888;
}

.individual-back-btn {
    height: 28px;
    min-width: 88px;
    padding: 0 22px;
    border-radius: 4px;
    border: 1px solid #7a9abf;
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    font-weight: bold;
    cursor: pointer;
}

.individual-back-btn:hover {
    background: linear-gradient(to bottom, #ffffff, #d0d0d0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 0 8px;
}

.modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.modal-totals {
    display: flex;
    justify-content: center;
    gap: 120px;
    padding: 4px 10px 6px 10px;
    border-top: 1px solid #bdbdbd;
    border-bottom: 1px solid #888;
    background: #fff;
}

.modal-total-box {
    min-width: 110px;
    text-align: center;
    font-weight: bold;
}

.modal-total-name {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 4px;
}

.modal-total-amt {
    font-size: 16px;
    font-weight: bold;
}

.modal-table-wrap {
    overflow: auto;
    max-height: calc(96vh - 140px);
    background: #fff;
}

#modalTable {
    width: max-content;
    display: inline-table;
    border-collapse: collapse;
    background: #fff;
}

#modalTable th,
#modalTable td {
    border: 1px solid #8c8c8c;
    padding: 2px 6px;
    font-size: inherit;
    font-weight: bold;
    white-space: nowrap;
}

#modalTable th {
    background: #efefef;
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: bold;
}

#modalTable th:nth-child(1),
#modalTable td:nth-child(1) {
    width: 35px;
    text-align: left;
}

#modalTable th:nth-child(2),
#modalTable td:nth-child(2) {
    width: 60px;
    text-align: right;
}

#modalTable th:nth-child(3),
#modalTable td:nth-child(3) {
    width: 70px;
    text-align: right;
}

#modalTable th:nth-child(4),
#modalTable td:nth-child(4) {
    width: 60px;
    text-align: left;
}

#modalTable th:nth-child(5),
#modalTable td:nth-child(5) {
    width: 40px;
    text-align: center;
}

#modalTable th:nth-child(6),
#modalTable td:nth-child(6) {
    width: 40px;
    text-align: center;
}

#modalTable th:nth-child(7),
#modalTable td:nth-child(7),
#modalTable th:nth-child(8),
#modalTable td:nth-child(8),
#modalTable th:nth-child(9),
#modalTable td:nth-child(9) {
    width: 80px;
    text-align: right;
}

#modalTable th:nth-child(10),
#modalTable td:nth-child(10) {
    width: 170px;
    text-align: left;
}

.session-user-modal-content {
    width: max-content;
    min-width: unset;
    max-width: 98vw;
    padding: 0;
}

.session-user-modal-layout {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    width: max-content;
}

.session-user-main-table-wrap {
    flex: 0 0 auto;
    width: auto;
    min-width: 640px;
    max-width: calc(98vw - 220px);
    height: 572px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: auto;
    border: 0.5px solid #444;
}

.session-user-summary-wrap {
    flex: 0 0 auto;
    width: 200px;
    min-width: 200px;
    margin-top: 0;
    max-height: 580px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #888;
    background-color: #fff;
}

#sessionModalTable {
    width: max-content;
    min-width: 760px;
    table-layout: auto;
}

#sessionUserSummaryTable {
    width: 100%;
    table-layout: fixed;
}

#sessionModalTable th,
#sessionModalTable td {
    border: 1.5px solid #a4a3a3;
    padding: 3px 8px;
    font-weight: bold;
    white-space: nowrap;
    width: auto !important;
    overflow: visible;
    text-overflow: clip;
}

/* Comfortable horizontal spacing — table scrolls if needed */
#sessionModalTable th:nth-child(1),
#sessionModalTable td:nth-child(1) {
    min-width: 40px;
    text-align: center;
}

#sessionModalTable th:nth-child(2),
#sessionModalTable td:nth-child(2) {
    min-width: 56px;
    text-align: right;
}

#sessionModalTable th:nth-child(3),
#sessionModalTable td:nth-child(3) {
    min-width: 48px;
    text-align: right;
}

#sessionModalTable th:nth-child(4),
#sessionModalTable td:nth-child(4) {
    min-width: 72px;
    text-align: right;
}

#sessionModalTable th:nth-child(5),
#sessionModalTable td:nth-child(5) {
    min-width: 40px;
    text-align: center;
}

#sessionModalTable th:nth-child(6),
#sessionModalTable td:nth-child(6) {
    min-width: 110px;
    text-align: left;
}

#sessionModalTable th:nth-child(7),
#sessionModalTable td:nth-child(7) {
    min-width: 72px;
    text-align: right;
    padding-right: 10px;
}

#sessionModalTable th:nth-child(8),
#sessionModalTable td:nth-child(8) {
    min-width: 72px;
    text-align: right;
    padding-right: 10px;
}

#sessionModalTable th:nth-child(9),
#sessionModalTable td:nth-child(9) {
    min-width: 130px;
    padding-left: 10px;
    text-align: left;
}

#sessionUserSummaryTable {
    width: 100%;
    table-layout: fixed;
}

#sessionUserSummaryTable th:first-child,
#sessionUserSummaryTable td:first-child {
    width: 35%;
    text-align: center;
}

#sessionUserSummaryTable th:last-child,
#sessionUserSummaryTable td:last-child {
    width: 65%;
    text-align: right;
    padding-right: 5px;
}

/* selected row highlight */
.selected-row {
    background-color: #2374df !important;
    color: white !important;
}

.f11-page-panel {
    background: #d4d0c8;
    position: relative;
}

.f11-desktop {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000;
    box-sizing: border-box;
    padding: 4px;
}

.f11-topbar {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: start;
    gap: 8px;
    padding: 2px 4px 6px;
}

.f11-balance-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.f11-balance-right {
    align-items: flex-end;
    text-align: right;
}

.f11-balance-label {
    font-weight: bold;
    font-size: 11px;
}

.f11-balance-input {
    width: 140px;
    height: 28px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background: #d4d0c8;
    border: 1px inset #888;
    box-sizing: border-box;
}

.f11-balance-input.pos {
    color: #0000cc;
}

.f11-balance-input.neg {
    color: #cc0000;
}

.f11-center-head {
    text-align: center;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

.f11-account-title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px inset #888;
    font: bold 16px Arial, sans-serif;
    padding: 4px 8px;
    min-height: 28px;
    text-align: left;
    text-transform: uppercase;
}

.f11-account-title:focus {
    outline: none;
    background: #ffc080;
}

body.dark-mode .f11-account-title {
    background: #fff;
    color: #000;
}

body.dark-mode .f11-account-title:focus {
    background: #ffc080;
}

.f11-date-line {
    margin-top: 2px;
    font-size: 11px;
}

.f11-sync-message {
    font-size: 11px;
    color: #a00;
    padding: 0 6px 4px;
}

.f11-body {
    display: flex;
    flex: 1;
    min-height: 0;
    border: 1px solid #888;
    background: #f0f0f0;
}

.f11-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    min-width: 160px;
    border-right: 1px solid #888;
    background: #fff;
    overflow-y: auto;
}

.f11-account-list li {
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
}

.f11-account-list li:hover {
    background: #e8f0ff;
}

.f11-account-list li.active {
    background: #0078d7;
    color: #fff;
}

.f11-account-list li.empty {
    color: #666;
    cursor: default;
}

.f11-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.f11-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #808080;
    border-bottom: 1px solid #888;
}

.f11-grid {
    width: 100%;
    border-collapse: collapse;
    background: #c0c0c0;
    font-size: 12px;
}

.f11-grid th {
    background: #d4d0c8;
    border: 1px solid #888;
    padding: 3px 5px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.f11-grid th.num,
.f11-grid td.num {
    text-align: right;
}

.f11-grid th.ch,
.f11-grid td.ch,
.f11-grid th.code,
.f11-grid td.code {
    text-align: center;
}

/* Combined Amount column is mobile-only */
.f11-col-amount {
    display: none;
}

.f11-grid td {
    border: 1px solid #a0a0a0;
    padding: 2px 5px;
    background: #c0c0c0;
    white-space: nowrap;
    color: #000;
}

/* F11 row colors — same rules as desktop DataGridView11_CellFormatting */
.f11-grid tr.f11-row-del-d td {
    background: #ff0000;
    color: #000;
}

.f11-grid tr.f11-row-ch-y td {
    background: #00ff00;
    color: #000;
}

.f11-grid tr.f11-row-del-m td {
    background: #00ffff;
    color: #000;
}

.f11-grid tr.f11-row-naam-empty td {
    background: #ffc0ff;
    color: #000;
}

.f11-grid tr.f11-row-jama-empty td {
    background: #ffff80;
    color: #000;
}

.f11-grid tr.selected td {
    box-shadow: inset 0 0 0 2px #000080;
}

body.dark-mode .f11-grid tr.f11-row-del-d td,
body.dark-mode .f11-grid tr.f11-row-ch-y td,
body.dark-mode .f11-grid tr.f11-row-del-m td,
body.dark-mode .f11-grid tr.f11-row-naam-empty td,
body.dark-mode .f11-grid tr.f11-row-jama-empty td {
    color: #000;
}

.f11-empty {
    text-align: center;
    color: #333;
    padding: 24px;
    background: #808080;
}

.f11-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 4px;
    background: #f0f0f0;
    border-bottom: 1px solid #888;
}

.f11-btn {
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 4px 10px;
    min-width: 72px;
    border: 1px solid #888;
    background: #ece9d8;
}

.f11-btn:disabled {
    color: #888;
}

.f11-btn-small {
    min-width: auto;
    margin-top: 4px;
    font-size: 10px;
}

.f11-btn-icon {
    min-width: 32px;
}

.f11-entry-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 4px;
    background: #f0f0f0;
}

.f11-entry-bar label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 2px;
}

.f11-entry-bar input {
    height: 24px;
    border: 1px inset #888;
    padding: 2px 4px;
    width: 100px;
    box-sizing: border-box;
    background: #fff;
}

.f11-entry-bar input:not([readonly]):focus {
    outline: none;
    background: #ffc080;
}

.f11-entry-bar input.wide {
    width: 180px;
}

/* F11 entry detail card (double-click / double-tap) */
.f11-entry-detail {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
}

.f11-entry-detail-card {
    width: min(360px, 100%);
    max-height: min(80vh, 520px);
    overflow: auto;
    background: #f3f3f3;
    border: 1px solid #666;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    font-family: Arial, sans-serif;
}

.f11-entry-detail-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
    border-bottom: 1px solid #7a9abf;
}

.f11-entry-detail-title {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    text-align: center;
}

.f11-entry-detail-body {
    padding: 10px 12px 6px;
}

.f11-entry-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #cfcfcf;
    font-size: 13px;
}

.f11-entry-detail-row:last-child {
    border-bottom: none;
}

.f11-entry-detail-balance {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #888;
    border-bottom: none !important;
}

.f11-entry-detail-balance .f11-entry-detail-label,
.f11-entry-detail-balance .f11-entry-detail-value {
    font-size: 16px;
    font-weight: 900;
}

.f11-entry-detail-label {
    flex: 0 0 36%;
    font-weight: bold;
    color: #333;
}

.f11-entry-detail-value {
    flex: 1;
    text-align: right;
    font-weight: bold;
    word-break: break-word;
    color: #000;
}

.f11-entry-detail-value.num {
    font-variant-numeric: tabular-nums;
}

.f11-entry-detail-actions {
    display: flex;
    justify-content: center;
    padding: 8px 12px 12px;
    border-top: 1px solid #cfcfcf;
    background: #e8e8e8;
}

.f11-entry-detail-back {
    height: 24px;
    min-height: 24px;
    padding: 0 18px;
    border-radius: 4px;
    border: 1px solid #7a9abf;
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

body.dark-mode .f11-entry-detail-card {
    background: #111827;
    border-color: #4b5563;
}

body.dark-mode .f11-entry-detail-row {
    border-bottom-color: #374151;
}

body.dark-mode .f11-entry-detail-balance {
    border-top-color: #4b5563;
}

body.dark-mode .f11-entry-detail-label {
    color: #cbd5e1;
}

body.dark-mode .f11-entry-detail-value {
    color: #f8fafc;
}

body.dark-mode .f11-entry-detail-actions {
    background: #1f2937;
    border-top-color: #374151;
}

body.dark-mode .f11-entry-detail-back {
    background: #111827;
    border-color: #4b5563;
    color: #f8fafc;
}

body.dark-mode .f11-desktop {
    background: #2a2a2a;
    color: #eee;
}

body.dark-mode .f11-body,
body.dark-mode .f11-toolbar,
body.dark-mode .f11-entry-bar {
    background: #333;
}

body.dark-mode .f11-account-list {
    background: #222;
}

body.dark-mode .f11-sync-message {
    color: #fca5a5;
}




/* =====================
   DARK MODE
   ===================== */
body.dark-mode {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .top-header {
    background: linear-gradient(to bottom, #1f2937, #111827);
    border-bottom: 1px solid #374151;
    color: #f3f4f6;
}

body.dark-mode .header-left select {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .days-left {
    color: #f9fafb;
}

body.dark-mode .mobile-days-chip {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f9fafb;
}

body.dark-mode .user-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .refresh-btn,
body.dark-mode .theme-btn {
    background: linear-gradient(to bottom, #374151, #1f2937);
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .refresh-btn:hover,
body.dark-mode .theme-btn:hover {
    background: linear-gradient(to bottom, #4b5563, #273244);
}

body.dark-mode .logout-btn {
    background: linear-gradient(to bottom, #b91c1c, #991b1b);
    border: 1px solid #7f1d1d;
    color: #fff;
}

body.dark-mode .main-right {
    background-color: #111827;
}

body.dark-mode #box-1,
body.dark-mode #box-2 {
    background: #1f2937;
    border: 1px solid #4b5563;
}

body.dark-mode .textbox-group input {
    background-color: #111827;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .table-container,
body.dark-mode .session-summary,
body.dark-mode .usertotal-summary,
body.dark-mode .session-user-summary-wrap,
body.dark-mode .session-user-main-table-wrap {
    background: #111827;
    border: 1px solid #4b5563;
}

body.dark-mode table {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode th {
    background-color: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode td {
    background-color: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
}

body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-content {
    background: #111827;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .modal-header,
body.dark-mode .modal-title,
body.dark-mode .individual-report-title,
body.dark-mode .modal-total-name,
body.dark-mode .modal-total-amt {
    color: #f9fafb;
}

body.dark-mode .individual-report-topbar {
    background: linear-gradient(to bottom, #374151, #1f2937);
    border-bottom-color: #4b5563;
}

body.dark-mode .individual-report-footer {
    background: #1f2937;
    border-top-color: #4b5563;
}

body.dark-mode .individual-back-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #f8fafc;
}

body.dark-mode .modal-totals {
    background: #111827;
    border-top: 1px solid #374151;
    border-bottom: 1px solid #4b5563;
}

body.dark-mode .modal-table-wrap {
    background: #111827;
}

body.dark-mode #modalTable,
body.dark-mode #sessionModalTable,
body.dark-mode #sessionUserSummaryTable,
body.dark-mode #session-summary-table,
body.dark-mode .usertotal-table {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode #modalTable th,
body.dark-mode #sessionModalTable th,
body.dark-mode #sessionUserSummaryTable th,
body.dark-mode #session-summary-table th,
body.dark-mode .usertotal-table th {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode #modalTable td,
body.dark-mode #sessionModalTable td,
body.dark-mode #sessionUserSummaryTable td,
body.dark-mode #session-summary-table td,
body.dark-mode .usertotal-table td {
    background: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
}

body.dark-mode #match-table-container tr.row-k td {
    color: #fde047 !important;
}

body.dark-mode #match-table-container tr.row-l td {
    color: #f9a8d4 !important;
}

body.dark-mode #match-table-container tr.row-m td {
    color: rgb(0, 255, 255) !important;
}

body.dark-mode #match-table-container tr.row-d td {
    color: red !important;
}

body.dark-mode #session-table-container tr.row-k td {
    color: #fde047 !important;
}

body.dark-mode #session-table-container tr.row-l td {
    color: #f9a8d4 !important;
}

body.dark-mode #session-table-container tr.row-m td {
    color: rgb(0, 255, 255) !important;
}

body.dark-mode #session-table-container tr.row-d td {
    color: red !important;
}


/* 🔥 MATCH MODAL TABLE */
body.dark-mode #modalTable tr.row-k td {
    color: #fde047 !important;
}

body.dark-mode #modalTable tr.row-l td {
    color: #f9a8d4 !important;
}

body.dark-mode #modalTable tr.row-m td {
    color: rgb(0, 255, 255) !important;
}

body.dark-mode #modalTable tr.row-d td {
    color: red !important;
}

/* 🔥 SESSION MODAL TABLE */
body.dark-mode #sessionModalTable tr.row-k td {
    color: #fde047 !important;
}

body.dark-mode #sessionModalTable tr.row-l td {
    color: #f9a8d4 !important;
}

body.dark-mode #sessionModalTable tr.row-m td {
    color: rgb(0, 255, 255) !important;
}

body.dark-mode #sessionModalTable tr.row-d td {
    color: red !important;
}


/* ULTRA FORCE FIX */
body.dark-mode #match-table-container tr.selected-row td,
body.dark-mode #session-table-container tr.selected-row td,
body.dark-mode #modalTable tr.selected-row td,
body.dark-mode #sessionModalTable tr.selected-row td {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body.dark-mode .usertotal-table tr.selected-row td {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* =====================
   DARK MODE TEAM TOTAL COLOR FIX
===================== */
/* =====================
   DARK MODE TEAM AMOUNT FIX
===================== */

/* =========================
   CONNECT REPORT PANEL
   Added only for Connect Report.
   Existing dashboard CSS above is unchanged.
========================= */

.content-wrapper.connect-open {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* F6 / Connect desktop defaults */
.connect-topbar {
    display: none;
}

.f11-mobile-head {
    display: none;
}

.panel-menu-spacer {
    display: none;
}

.panel-menu-icon {
    display: none;
}

.f6-subtotals {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

.f6-total .final-total-center,
.f6-total .f6-net {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
}

.f6-total .sub-total-left,
.f6-total .sub-total-right {
    float: none !important;
    font-size: 15px;
}

.f6-total-row td {
    font-weight: 900 !important;
    background: #fff !important;
}

/* F8 User Totals */
.f8-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 10px;
    background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
    border-bottom: 1px solid #7a9abf;
    color: #000;
}

.f8-topbar-title {
    flex: 1;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    color: #000;
}

.f8-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #e8e8e8;
    overflow: hidden;
}

.f8-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 6px 8px;
    background: #fff;
    border: 1px solid #444;
}

.f8-body .usertotal-table,
.f8-table {
    width: 100%;
    height: auto;
    min-height: 0;
}

.f8-buttons {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px;
    text-align: center;
    background: #e8e8e8;
    border-top: 1px solid #888;
}

.f8-buttons button {
    height: 24px;
    padding: 0 18px;
    border-radius: 4px;
    border: 1px solid #7a9abf;
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    font-weight: bold;
    cursor: pointer;
}

body.dark-mode .f8-box,
body.dark-mode .f8-buttons {
    background: #1f2937;
}

body.dark-mode .f8-body {
    background: #111827;
    border-color: #4b5563;
}

.connect-page-panel {
    position: fixed;
    top: 38px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    width: 100%;
    overflow: hidden;
    display: flex;
    background: #e8e8e8;
}

.connect-box {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    border: 1px solid #888;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #000;
}

.connect-left {
    width: 30%;
    border-right: 1px solid #888;
    display: flex;
    flex-direction: column;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.connect-right {
    width: 70%;
    display: flex;
    flex-direction: column;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

#f12-report-panel .connect-right {
    width: 100%;
}

#f12-report-panel tr.f12-account-row {
    cursor: pointer;
}

#f12-report-panel tr.f12-account-row:hover td {
    filter: brightness(0.94);
}

body.dark-mode #f12-report-panel tr.f12-account-row:hover td {
    filter: brightness(1.12);
}

/* F12 desktop defaults */
.f12-topbar {
    display: none;
}

.f12-section-label {
    display: none;
}

.f12-subtotals {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

.f12-total .final-total-center,
.f12-total .f12-net {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
}

.f12-total .sub-total-left,
.f12-total .sub-total-right {
    float: none !important;
    font-size: 15px;
}

.f12-table {
    width: 100%;
    border-collapse: collapse;
}

.f12-total-row td {
    font-weight: 900 !important;
    background: #fff !important;
}

.connect-title {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.connect-match-list {
    flex: 1;
    background: #fff;
    border: 1px solid #888;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0;
}

.connect-match-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    white-space: nowrap;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #d0d0d0;
    user-select: none;
    font-size: 12px;
}

.connect-match-row:hover {
    background: #e6f0ff;
    cursor: pointer;
}

.connect-match-row.selected {
    background: #b8d4ff;
}

.connect-match-row input {
    margin: 0;
}

.connect-pending-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: normal;
    color: #8a4b00;
    background: #ffe8b3;
    border: 1px solid #d4a017;
    border-radius: 3px;
    text-transform: uppercase;
}

.connect-select-all {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: bold;
    padding-top: 4px;
    user-select: none;
}

.connect-tables {
    flex: 1;
    display: flex;
    gap: 5px;
    overflow: hidden;
}

.connect-table-wrap {
    flex: 1;
    border: 0.5px solid #444;
    background: #fff;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.connect-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.connect-table-wrap th,
.connect-table-wrap td {
    border: 1.5px solid #a4a3a3;
    padding: 1.5px;
    font-weight: bold;
    user-select: none;
    font-size: 14px;
}

.connect-table-wrap th {
    background-color: #eee;
    position: sticky;
    top: 0;
    z-index: 2;
}

.connect-table-wrap th:nth-child(1),
.connect-table-wrap td:nth-child(1) {
    width: 50%;
    text-align: left;
    padding-left: 5px;
}

.connect-table-wrap th:nth-child(2),
.connect-table-wrap td:nth-child(2),
.connect-table-wrap th:nth-child(3),
.connect-table-wrap td:nth-child(3) {
    width: 25%;
    text-align: right;
    padding-right: 5px;
}



.connect-total {
    border: 1px solid #888;
    margin-top: 5px;
    padding: 6px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #fff;
}

.connect-buttons {
    margin-top: 5px;
    text-align: center;
}

.connect-buttons button {
    height: 24px;
    padding: 0 18px;
    border-radius: 4px;
    border: 1px solid #7a9abf;
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    cursor: pointer;
    font-weight: bold;
}

/* Connect Report dark mode only */
body.dark-mode .connect-box,
body.dark-mode .connect-left,
body.dark-mode .connect-right {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .connect-match-list,
body.dark-mode .connect-table-wrap {
    background: #111827;
    border: 1px solid #4b5563;
}

body.dark-mode .connect-match-row {
    color: #e5e7eb;
    border-bottom: 1px solid #374151;
}

body.dark-mode .connect-match-row:hover {
    background: #2a3f5f;
}

body.dark-mode .connect-match-row.selected {
    background: #3d5a80;
}

body.dark-mode .connect-table-wrap table {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .connect-table-wrap th {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

body.dark-mode .connect-table-wrap td {
    background: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
}


body.dark-mode .connect-buttons button {
    background: linear-gradient(to bottom, #374151, #1f2937);
    color: #f9fafb;
    border: 1px solid #4b5563;
}

/* LIGHT MODE */
/* Positive table = Pink background */
.connect-positive-row,
.connect-positive-row td {
    background-color: #FFC0FF !important;
}

/* Negative table = Yellow background */
.connect-negative-row,
.connect-negative-row td {
    background-color: #FFFF80 !important;
}


/* DARK MODE */
/* Positive table = Pink text */
body.dark-mode .connect-positive-row td {
    /* background-color: transparent !important; */
    color: #FFC0FF !important;
}

/* Negative table = Yellow text */
body.dark-mode .connect-negative-row td {
    /* background-color: transparent !important; */
    color: #FFFF80 !important;
}



/* Connect positive / negative table hover */
.connect-positive-row:hover td {
    background-color: #ffe6ff !important;
    /* pink hover */
    color: #000 !important;
}

.connect-negative-row:hover td {
    background-color: #ffff99 !important;
    /* yellow hover */
    color: #000 !important;
}

/* Night mode */
body.dark-mode .connect-positive-row:hover td {
    background-color: #4a1f3d !important;
    color: #f9a8d4 !important;
}

body.dark-mode .connect-negative-row:hover td {
    background-color: #4a4200 !important;
    color: #fde047 !important;
}

/* Selected row always wins */
#connectTableBody1 tr.selected-row td,
#connectTableBody2 tr.selected-row td {
    background: #2374df !important;
    color: white !important;
}

.connect-details-title {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    padding: 3px;
    background: #fff;
    border: 1px solid #888;
}

.connect-details-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.connect-details-table th,
.connect-details-table td {
    border: 1px solid #888;
    padding: 2px 5px;
    font-weight: bold;
    font-size: 12px;
}


.connect-details-table th:nth-child(1),
.connect-details-table td:nth-child(1) {
    width: 8%;
}

.connect-details-table th:nth-child(2),
.connect-details-table td:nth-child(2) {
    width: 52%;
}

.connect-details-table th:nth-child(3),
.connect-details-table td:nth-child(3) {
    width: 10%;
    text-align: center;
    padding-left: 5px;
}

.connect-details-table th:nth-child(4),
.connect-details-table td:nth-child(4) {
    width: 15%;
    text-align: right;
    padding-left: 5px;
}

.connect-details-table th:nth-child(5),
.connect-details-table td:nth-child(5) {
    width: 15%;
    text-align: right;
    padding-left: 5px;
}

.connect-detail-negative {
    background: #FFFF80 !important;
    color: #000;
}

.connect-detail-positive {
    background: #FFC0FF !important;
    color: #000;
}

.connect-detail-total-positive td {
    background: #008000 !important;
    color: #ffffff !important;
    font-weight: bold;
}

.connect-detail-total-negative td {
    background: #c00000 !important;
    color: #ffffff !important;
    font-weight: bold;
}

body.dark-mode .connect-details-title,
body.dark-mode .connect-details-table th {
    background: #1f2937;
    color: #fff;
}

body.dark-mode .connect-detail-total td {
    background: #d71920 !important;
    color: #fff !important;
}

body.dark-mode .connect-total {
    background: #111827;
    border: 1px solid #4b5563;
}

body.dark-mode .sub-total-left,
body.dark-mode .sub-total-right {
    color: #e5e7eb;
}

body.dark-mode .final-total-center {
    color: #e5e7eb;
}

/* =========================
   MOBILE / TABLET RESPONSIVE (dashboard + reports)
========================= */

@media (max-width: 900px) {
    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        display: block;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: auto;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid #7a9abf;
        border-radius: 8px;
        background: linear-gradient(to bottom, #ffffff, #e8eef5);
        cursor: pointer;
        padding: 0;
        box-shadow: none;
    }

    .menu-toggle-bars,
    .menu-toggle-bars::before,
    .menu-toggle-bars::after {
        display: block;
        width: 18px;
        height: 2px;
        background: #1f2937;
        border-radius: 1px;
        position: relative;
        content: "";
    }

    .menu-toggle-bars::before {
        position: absolute;
        top: -6px;
    }

    .menu-toggle-bars::after {
        position: absolute;
        top: 6px;
    }

    .mobile-days-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid rgba(122, 154, 191, 0.55);
        background: rgba(255, 255, 255, 0.55);
        box-sizing: border-box;
        line-height: 1.2;
        color: #111;
    }

    .top-header {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        padding-top: max(6px, env(safe-area-inset-top));
        overflow: visible;
        height: auto;
    }

    /* F6/F11/F12 open: hide main Match/Session header completely */
    body.overlay-report-open .top-header {
        display: none !important;
    }

    .header-desktop-only {
        display: none !important;
    }

    .header-left {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        overflow: visible;
        gap: 6px;
        width: auto;
    }

    .header-row {
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .header-row-primary {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .header-row-primary .app-icon {
        display: none;
    }

    .header-row-primary .hdr-label-match,
    .header-row-primary .hdr-label-session {
        display: none;
    }

    .header-row-primary select {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        width: 0;
        height: 36px;
        font-size: 13px;
    }

    .header-row-primary .refresh-btn {
        display: none;
    }

    .header-row-checks {
        margin-left: 0;
    }

    .header-right {
        display: none;
    }

    .days-left {
        font-size: 12px;
    }

    .refresh-btn,
    .theme-btn,
    .logout-btn {
        min-height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }

    .header-right form {
        margin: 0;
    }

    .mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1280;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(65vw, 220px);
        max-width: 220px;
        background: #f8fafc;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.22);
        z-index: 1290;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        padding: max(10px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open .mobile-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-menu-open .mobile-drawer {
        transform: translateX(0);
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 14px 12px;
        border-bottom: 1px solid #dbe3ee;
    }

    .mobile-drawer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .mobile-drawer-brand strong {
        display: block;
        font-size: 15px;
        color: #0f172a;
    }

    .mobile-drawer-user {
        display: block;
        font-size: 12px;
        color: #64748b;
        font-weight: normal;
    }

    .mobile-drawer-close {
        width: 36px;
        height: 36px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #fff;
        font-size: 16px;
        cursor: pointer;
    }

    .mobile-drawer-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer-item {
        display: block;
        width: 100%;
        text-align: left;
        border: 1px solid #d0dae8;
        border-radius: 8px;
        background: #fff;
        padding: 8px 10px;
        min-height: 0;
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        text-decoration: none;
        box-sizing: border-box;
        cursor: pointer;
    }

    .mobile-drawer-item:active {
        background: #eef4fb;
    }

    .mobile-drawer-logout {
        color: #b91c1c;
        border-color: #fecaca;
        background: #fff5f5;
    }

    .mobile-drawer-check {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border: 1px solid #d0dae8;
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #0f172a;
        min-height: 0;
    }

    .mobile-drawer-check input {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    .mobile-drawer-sep {
        height: 1px;
        background: #e2e8f0;
        margin: 6px 2px;
    }

    body.dark-mode .mobile-drawer {
        background: #1e293b;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.5);
    }

    body.dark-mode .mobile-drawer-head {
        border-bottom-color: #334155;
    }

    body.dark-mode .mobile-drawer-brand strong,
    body.dark-mode .mobile-drawer-item,
    body.dark-mode .mobile-drawer-check {
        color: #e2e8f0;
    }

    body.dark-mode .mobile-drawer-user {
        color: #94a3b8;
    }

    body.dark-mode .mobile-drawer-item,
    body.dark-mode .mobile-drawer-check,
    body.dark-mode .mobile-drawer-close,
    body.dark-mode .menu-toggle {
        background: #0f172a;
        border-color: #475569;
        color: #e2e8f0;
    }

    body.dark-mode .menu-toggle-bars,
    body.dark-mode .menu-toggle-bars::before,
    body.dark-mode .menu-toggle-bars::after {
        background: #e2e8f0;
    }

    body.dark-mode .mobile-drawer-logout {
        background: #3f1d1d;
        border-color: #7f1d1d;
        color: #fecaca;
    }

    .content-wrapper {
        flex-direction: column;
        overflow: visible;
        height: auto;
        min-height: 0;
        padding: 6px;
    }

    .main-left,

    .main-right {
        width: 100%;
        height: auto;
        flex: none;
        min-height: 0;
    }

    .main-right {
        flex-direction: column;
        gap: 6px;
    }

    /* UT first, SR below (same as tablet right column) */
    #usertotal-summary-main {
        order: 1;
    }

    #sessionruns-table-container {
        order: 2;
    }

    .box-row {
        flex-direction: column;
        gap: 4px;
    }

    #box-1,
    #box-2 {
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 4px;
    }

    #box-1 .textbox-group,
    #box-2 .textbox-group {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 36px;
    }

    #box-1 .textbox-group img,
    #box-2 .textbox-group img {
        display: none;
    }

    .textbox-group input {
        font-size: 14px;
        padding: 4px;
    }

    #team1name,
    #team2name,
    #team3name,
    #cut1name,
    #cut2name,
    #cut3name {
        width: 56px;
        flex: 0 0 56px;
    }

    #team1amt,
    #team2amt,
    #team3amt,
    #cut1amt,
    #cut2amt,
    #cut3amt {
        width: auto;
        flex: 1 1 auto;
    }

    .table-container {
        min-height: 180px;
        max-height: 42vh;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Match/session: auto widths so TIME stays visible; hide TEAM1/2 and NO/YES */
    #match-table-container table,
    #session-table-container table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    #match-table-container th:nth-child(7),
    #match-table-container td:nth-child(7),
    #match-table-container th:nth-child(8),
    #match-table-container td:nth-child(8),
    #session-table-container th:nth-child(7),
    #session-table-container td:nth-child(7),
    #session-table-container th:nth-child(8),
    #session-table-container td:nth-child(8) {
        display: none !important;
    }

    #match-table-container th,
    #match-table-container td,
    #session-table-container th,
    #session-table-container td {
        font-size: 12px;
        padding: 2px 5px;
        white-space: nowrap;
        min-height: 0;
        line-height: 1.25;
        overflow: visible;
        text-overflow: clip;
        width: auto !important;
    }

    #match-table-container th:nth-child(2),
    #match-table-container td:nth-child(2),
    #match-table-container th:nth-child(3),
    #match-table-container td:nth-child(3),
    #session-table-container th:nth-child(2),
    #session-table-container td:nth-child(2),
    #session-table-container th:nth-child(3),
    #session-table-container td:nth-child(3),
    #session-table-container th:nth-child(4),
    #session-table-container td:nth-child(4) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    #match-table-container th:nth-child(9),
    #match-table-container td:nth-child(9),
    #session-table-container th:nth-child(9),
    #session-table-container td:nth-child(9) {
        padding-left: 6px;
        font-size: 11px;
    }

    #session-table-container {
        margin-top: 6px !important;
    }

    .session-summary {
        flex: none;
        width: 100%;
        max-height: 200px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #session-summary-table th,
    #session-summary-table td {
        padding: 1px 6px;
        font-size: 12px;
        line-height: 1.2;
        min-height: 0;
    }

    #session-summary-table th {
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 11px;
    }

    .usertotal-summary {
        flex: none;
        width: 100%;
        min-height: 160px;
        max-height: 40vh;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #f8-report-panel .usertotal-summary {
        flex: 1;
        width: auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
        border: none;
    }

    .connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .connect-box {
        flex-direction: column;
        height: auto;
        min-height: 100%;
    }

    .connect-left {
        width: 100%;
        max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid #888;
    }

    .connect-right {
        width: 100%;
        flex: 1;
        min-height: 50vh;
    }

    .connect-tables {
        flex-direction: column;
        overflow: visible;
    }

    .connect-table-wrap {
        min-height: 160px;
        max-height: 35vh;
        overflow-x: auto;
    }

    .connect-table-wrap table {
        min-width: 280px;
    }

    .connect-total {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        font-size: 14px;
        overflow: hidden;
    }

    .connect-total .sub-total-left,
    .connect-total .sub-total-right {
        float: none !important;
        width: 100%;
        text-align: center;
    }

    .connect-total .final-total-center {
        display: block;
        text-align: center;
    }

    .connect-match-row {
        padding: 3px 6px;
        min-height: 0;
        line-height: 1.25;
        font-size: 12px;
    }

    .panel-menu-spacer {
        display: block;
        width: 62px;
        height: 40px;
        flex: 0 0 62px;
    }

    .panel-menu-toggle {
        display: inline-flex !important;
        position: relative;
        z-index: 2;
        flex: 0 0 40px;
    }

    .panel-menu-icon {
        display: inline-block !important;
        width: 22px;
        height: 22px;
        margin: 0;
        flex: 0 0 auto;
    }

    .f11-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        order: -2;
    }

    .f11-mobile-title {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 900;
        color: #000;
        line-height: 1.2;
    }

    /* ---- F6 Connect: F12-like classic mobile ---- */
    #connect-report-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
        padding: 0;
        background: #808080;
    }

    #connect-report-panel .f6-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        border: none;
        padding: 0;
        background: #808080;
        overflow: hidden;
    }

    #connect-report-panel .f6-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-shrink: 0;
        padding: 4px 8px;
        padding-top: max(4px, env(safe-area-inset-top));
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom: 1px solid #7a9abf;
        color: #000;
    }

    #connect-report-panel .f6-topbar-title {
        flex: 1;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.2;
        text-align: center;
        color: #000;
    }

    #connect-report-panel .connect-left {
        flex-shrink: 0;
        width: 100%;
        max-height: 96px;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid #888;
        background: #e8e8e8;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #connect-report-panel .connect-title {
        padding: 2px 6px 0;
        font-size: 11px;
        margin-bottom: 0;
        line-height: 1.2;
    }

    #connect-report-panel .connect-match-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #connect-report-panel .connect-select-all {
        padding: 2px 6px 4px;
        flex-shrink: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    #connect-report-panel .f6-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0 !important;
        max-height: none;
        width: 100%;
        border: none;
        padding: 0;
        background: #808080;
        overflow: hidden;
    }

    #connect-report-panel .f6-tables {
        flex: 1;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 4px;
        overflow: hidden;
        overscroll-behavior: none;
        padding: 4px 6px;
    }

    #connect-report-panel .f6-table-wrap {
        flex: 1;
        min-width: 0;
        min-height: 0;
        max-height: none !important;
        overflow: hidden !important;
        border: 1px solid #444;
        background: #fff;
        border-radius: 0;
    }

    #connect-report-panel .f6-table,
    #connect-report-panel .f6-table-wrap table {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background: #fff;
    }

    #connect-report-panel .f6-table th,
    #connect-report-panel .f6-table td {
        border: 1.5px solid #a4a3a3;
        padding: 2px 5px;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        line-height: 1.25;
    }

    #connect-report-panel .f6-table th {
        background: #eee;
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
    }

    #connect-report-panel .connect-col-patti {
        display: none !important;
    }

    #connect-report-panel .f6-table th:first-child,
    #connect-report-panel .f6-table td:first-child {
        width: 50%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #connect-report-panel .f6-table th:nth-child(2),
    #connect-report-panel .f6-table td:nth-child(2) {
        width: 50%;
        text-align: right;
        overflow: visible;
        text-overflow: clip;
    }

    #connect-report-panel .f6-total-row td {
        background: #fff !important;
        font-weight: 900 !important;
    }

    #connect-report-panel .f6-total {
        flex-shrink: 0;
        display: block;
        margin: 0;
        border: none;
        border-top: 1px solid #888;
        border-radius: 0;
        padding: 4px 8px;
        background: #e8e8e8;
        text-align: center;
        overflow: hidden;
    }

    #connect-report-panel .f6-net {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-weight: 900;
        float: none;
        line-height: 1.2;
    }

    #connect-report-panel .f6-subtotals {
        display: none;
    }

    #connect-report-panel .f6-buttons {
        display: block;
        flex-shrink: 0;
        margin: 0;
        padding: 6px 8px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        text-align: center;
        background: #e8e8e8;
        border-top: 1px solid #888;
    }

    #connect-report-panel .f6-buttons button {
        height: 24px;
        min-height: 24px;
        min-width: 0;
        padding: 0 18px;
        border-radius: 4px;
        border: 1px solid #7a9abf;
        background: linear-gradient(to bottom, #ffffff, #e2e2e2);
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
    }

    #connect-report-panel .connect-details-panel {
        flex: 1;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        margin: 6px 8px;
        background: #fff;
        border: 1px solid #444;
    }

    body.dark-mode #connect-report-panel.connect-page-panel,
    body.dark-mode #connect-report-panel .f6-box,
    body.dark-mode #connect-report-panel .f6-right {
        background: #4b5563;
    }

    body.dark-mode #connect-report-panel .f6-topbar {
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        color: #000;
    }

    body.dark-mode #connect-report-panel .f6-topbar-title {
        color: #000;
    }

    body.dark-mode #connect-report-panel .f6-table-wrap,
    body.dark-mode #connect-report-panel .f6-table {
        background: #111827;
    }

    body.dark-mode #connect-report-panel .f6-table th {
        background: #1f2937;
        color: #e5e7eb;
    }

    body.dark-mode #connect-report-panel .f6-total,
    body.dark-mode #connect-report-panel .f6-buttons {
        background: #1f2937;
        border-top-color: #374151;
    }

    body.dark-mode #connect-report-panel .f6-buttons button {
        background: #111827;
        border-color: #4b5563;
        color: #f8fafc;
    }

    body.dark-mode #connect-report-panel .f6-total-row td {
        background: #111827 !important;
        color: #f8fafc !important;
    }

    body.dark-mode #connect-report-panel .connect-positive-row td {
        background-color: #FFC0FF !important;
        color: #111 !important;
    }

    body.dark-mode #connect-report-panel .connect-negative-row td {
        background-color: #FFFF80 !important;
        color: #111 !important;
    }

    /* ---- F12 Final: classic desktop-like tables on mobile ---- */
    #f12-report-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
        padding: 0;
        background: #808080;
    }

    #f12-report-panel .f12-box,
    #f12-report-panel .f12-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0 !important;
        max-height: 100%;
        border: none;
        padding: 0;
        background: #808080;
        overflow: hidden;
        overscroll-behavior: none;
    }

    #f12-report-panel .f12-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-shrink: 0;
        padding: 8px 10px 6px;
        padding-top: max(8px, env(safe-area-inset-top));
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom: 1px solid #7a9abf;
        color: #000;
    }

    #f12-report-panel .f12-topbar-title {
        flex: 1;
        font-size: 20px;
        font-weight: 900;
        line-height: 1.2;
        text-align: center;
        color: #000;
    }

    #f12-report-panel .f12-buttons {
        display: block;
        flex-shrink: 0;
        margin: 0;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        text-align: center;
        background: #e8e8e8;
        border-top: 1px solid #888;
    }

    #f12-report-panel .f12-buttons button {
        height: 24px;
        min-height: 24px;
        min-width: 0;
        padding: 0 18px;
        border-radius: 4px;
        border: 1px solid #7a9abf;
        background: linear-gradient(to bottom, #ffffff, #e2e2e2);
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
    }

    #f12-report-panel .f12-tables {
        flex: 1;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        overflow: hidden;
        overscroll-behavior: none;
        padding: 6px 8px;
    }

    #f12-report-panel .f12-table-wrap {
        flex: 1;
        min-width: 0;
        min-height: 0;
        max-height: none !important;
        height: auto;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: auto;
        border: 1px solid #444;
        background: #fff;
        border-radius: 0;
    }

    #f12-report-panel .f12-section-label {
        display: none;
    }

    #f12-report-panel .f12-table,
    #f12-report-panel .f12-table-wrap table {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background: #fff;
    }

    #f12-report-panel .f12-table thead {
        display: table-header-group;
    }

    #f12-report-panel .f12-table th,
    #f12-report-panel .f12-table td {
        border: 1.5px solid #a4a3a3;
        padding: 1.5px 4px;
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
    }

    #f12-report-panel .f12-table th {
        background: #eee;
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
    }

    #f12-report-panel .f12-table th:first-child,
    #f12-report-panel .f12-table td:first-child {
        width: 50%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #f12-report-panel .f12-table th:last-child,
    #f12-report-panel .f12-table td:last-child {
        width: 50%;
        text-align: right;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
    }

    #f12-report-panel .f12-total-row td {
        background: #fff !important;
        font-weight: 900 !important;
    }

    #f12-report-panel .f12-account-row:active td {
        filter: brightness(0.92);
    }

    #f12-report-panel .f12-total {
        flex-shrink: 0;
        display: block;
        margin: 0;
        border: none;
        border-top: 1px solid #888;
        border-radius: 0;
        padding: 8px 12px;
        background: #e8e8e8;
        text-align: center;
        overflow: hidden;
    }

    #f12-report-panel .f12-net {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: 900;
        float: none;
    }

    #f12-report-panel .f12-subtotals {
        display: none;
    }

    body.dark-mode #f12-report-panel.connect-page-panel,
    body.dark-mode #f12-report-panel .f12-box,
    body.dark-mode #f12-report-panel .f12-right {
        background: #4b5563;
    }

    body.dark-mode #f12-report-panel .f12-topbar {
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom: 1px solid #7a9abf;
    }

    body.dark-mode #f12-report-panel .f12-topbar-title {
        color: #000;
    }

    body.dark-mode #f12-report-panel .f12-table-wrap,
    body.dark-mode #f12-report-panel .f12-table {
        background: #111827;
    }

    body.dark-mode #f12-report-panel .f12-table th {
        background: #1f2937;
        color: #e5e7eb;
    }

    body.dark-mode #f12-report-panel .f12-total,
    body.dark-mode #f12-report-panel .f12-buttons {
        background: #1f2937;
        border-top-color: #374151;
    }

    body.dark-mode #f12-report-panel .f12-buttons button {
        background: #111827;
        border-color: #4b5563;
        color: #f8fafc;
    }

    body.dark-mode #f12-report-panel .f12-total-row td {
        background: #111827 !important;
        color: #f8fafc !important;
    }

    body.dark-mode #f12-report-panel .connect-positive-row td {
        background-color: #FFC0FF !important;
        color: #111 !important;
    }

    body.dark-mode #f12-report-panel .connect-negative-row td {
        background-color: #FFFF80 !important;
        color: #111 !important;
    }

    /* ---- F8 User Totals: mobile ---- */
    #f8-report-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
        padding: 0;
        background: #808080;
    }

    #f8-report-panel .f8-box {
        height: 100%;
        background: #808080;
    }

    #f8-report-panel .f8-topbar {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    #f8-report-panel .f8-body {
        margin: 6px 8px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #f8-report-panel .f8-table th,
    #f8-report-panel .f8-table td {
        font-size: 12px;
        padding: 2px 5px;
        line-height: 1.25;
        white-space: nowrap;
    }

    #usertotal-table-main th,
    #usertotal-table-main td,
    .usertotal-summary .usertotal-table th,
    .usertotal-summary .usertotal-table td {
        padding: 2px 5px;
        font-size: 12px;
        line-height: 1.25;
        min-height: 0;
    }

    #f8-report-panel .f8-buttons {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    /* ---- F11 Settling: classic-clean mobile ---- */
    #f11-report-panel.f11-page-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
        padding: 0;
        background: #d4d0c8;
    }

    #f11-report-panel .f11-desktop {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        padding: 0;
        box-sizing: border-box;
        background: #d4d0c8;
    }

    #f11-report-panel .f11-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "mhead mhead"
            "search bal";
        align-items: end;
        column-gap: 10px;
        row-gap: 6px;
        flex-shrink: 0;
        padding: 8px 10px;
        padding-top: max(8px, env(safe-area-inset-top));
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom: 1px solid #7a9abf;
        color: #000;
    }

    #f11-report-panel .f11-mobile-head {
        grid-area: mhead;
    }

    #f11-report-panel .f11-center-head {
        grid-area: search;
        order: unset;
        text-align: left;
        padding: 0;
        width: auto;
        min-width: 0;
    }

    #f11-report-panel .f11-account-title {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font: bold 15px Arial, sans-serif;
        text-align: left;
        color: #000;
    }

    #f11-report-panel .f11-date-line {
        display: none !important;
    }

    #f11-report-panel .f11-balance-block:not(.f11-balance-right) {
        display: none !important;
    }

    #f11-report-panel .f11-balance-right {
        grid-area: bal;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right;
        gap: 2px;
        flex: none;
        width: auto;
    }

    #f11-report-panel .f11-balance-right .f11-balance-label {
        flex: none;
        width: 100%;
        font-size: 0;
        line-height: 1.2;
        text-align: center;
    }

    #f11-report-panel .f11-balance-right .f11-balance-label::after {
        content: "Balance";
        font-size: 11px;
        font-weight: bold;
    }

    #f11-report-panel .f11-balance-right .f11-balance-input {
        width: 112px;
        max-width: none;
        height: 28px;
        font-size: 14px;
        background: #fff;
    }

    #f11-report-panel .f11-btn-small {
        display: none;
    }

    #f11-report-panel .f11-sync-message {
        flex-shrink: 0;
        padding: 2px 10px 4px;
    }

    #f11-report-panel .f11-body {
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    #f11-report-panel .f11-account-list {
        width: 100%;
        min-width: 0;
        /* ~5 compact rows visible; rest via scroll */
        max-height: calc(5 * (13px * 1.25 + 4px));
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid #888;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #f11-report-panel .f11-account-list li {
        padding: 2px 8px;
        font-size: 13px;
        min-height: 0;
        line-height: 1.25;
        border-bottom: none;
        box-sizing: border-box;
    }

    #f11-report-panel .f11-account-list li.active {
        background: #0078d7;
        color: #fff;
    }

    #f11-report-panel .f11-main {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #f11-report-panel .f11-grid-wrap {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #808080;
    }

    #f11-report-panel .f11-grid {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        background: #c0c0c0;
    }

    #f11-report-panel .f11-grid th,
    #f11-report-panel .f11-grid td {
        font-size: 12px;
        padding: 3px 4px;
        white-space: nowrap;
    }

    #f11-report-panel .f11-grid th.ch,
    #f11-report-panel .f11-grid td.ch,
    #f11-report-panel .f11-grid th.code,
    #f11-report-panel .f11-grid td.code,
    #f11-report-panel .f11-grid th.f11-col-naam,
    #f11-report-panel .f11-grid td.f11-col-naam,
    #f11-report-panel .f11-grid th.f11-col-jama,
    #f11-report-panel .f11-grid td.f11-col-jama {
        display: none;
    }

    #f11-report-panel .f11-grid th.f11-col-amount,
    #f11-report-panel .f11-grid td.f11-col-amount {
        display: table-cell;
    }

    #f11-report-panel .f11-grid th:nth-child(1),
    #f11-report-panel .f11-grid td:nth-child(1),
    #f11-report-panel .f11-grid th.f11-col-date,
    #f11-report-panel .f11-grid td.f11-col-date {
        width: 28%;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        font-size: 11px;
    }

    #f11-report-panel .f11-grid th:nth-child(2),
    #f11-report-panel .f11-grid td:nth-child(2),
    #f11-report-panel .f11-grid th.f11-col-name,
    #f11-report-panel .f11-grid td.f11-col-name {
        width: 26%;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #f11-report-panel .f11-grid th.f11-col-amount,
    #f11-report-panel .f11-grid td.f11-col-amount,
    #f11-report-panel .f11-grid th.num:not(.f11-col-naam):not(.f11-col-jama),
    #f11-report-panel .f11-grid td.num:not(.f11-col-naam):not(.f11-col-jama) {
        width: 24%;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    #f11-report-panel .f11-toolbar {
        display: none !important;
    }

    #f11-report-panel .f11-entry-bar {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        background: #e8e8e8;
        border-top: 1px solid #888;
        overflow: hidden;
    }

    #f11-report-panel .f11-entry-bar label,
    #f11-report-panel .f11-entry-bar input,
    #f11-report-panel .f11-entry-bar .f11-btn:not(#closeF11Report) {
        display: none !important;
    }

    #f11-report-panel #closeF11Report {
        display: inline-block;
        height: 24px;
        min-height: 24px;
        min-width: 0;
        padding: 0 18px;
        border-radius: 4px;
        border: 1px solid #7a9abf;
        background: linear-gradient(to bottom, #ffffff, #e2e2e2);
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        opacity: 1;
    }

    body.dark-mode #f11-report-panel.f11-page-panel.connect-page-panel,
    body.dark-mode #f11-report-panel .f11-desktop {
        background: #1f2937;
    }

    body.dark-mode #f11-report-panel .f11-topbar {
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom-color: #7a9abf;
        color: #000;
    }

    body.dark-mode #f11-report-panel .f11-entry-bar {
        background: #111827;
        border-top-color: #374151;
    }

    body.dark-mode #f11-report-panel #closeF11Report {
        background: #1f2937;
        border-color: #4b5563;
        color: #f8fafc;
    }

    .modal-content,
    .session-user-modal-content,
    .individual-report-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        overflow: hidden;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .individual-report-modal {
        align-items: stretch;
        justify-content: stretch;
        background: #fff;
        padding: 0;
    }

    .individual-report-modal[style*="flex"],
    .individual-report-modal[style*="block"] {
        display: flex !important;
    }

    .individual-report-topbar {
        padding: 10px 12px;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .individual-report-title {
        font-size: 14px;
    }

    .individual-report-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px;
    }

    .individual-report-footer {
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .individual-back-btn {
        height: 36px;
        min-width: 110px;
        font-size: 14px;
    }

    .modal-totals {
        gap: 16px;
        flex-wrap: wrap;
        padding: 6px 8px;
    }

    .modal-total-name,
    .modal-total-amt {
        font-size: 13px;
    }

    .session-user-modal-layout {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .session-user-main-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        min-height: 180px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #sessionModalTable {
        width: max-content;
        min-width: 760px;
        table-layout: auto;
    }

    #sessionModalTable th,
    #sessionModalTable td,
    #modalTable th,
    #modalTable td,
    #sessionUserSummaryTable th,
    #sessionUserSummaryTable td {
        padding: 3px 8px;
        font-size: 12px;
        line-height: 1.25;
        min-height: 0;
    }

    #sessionModalTable th,
    #sessionModalTable td {
        width: auto !important;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    .session-user-summary-wrap {
        width: 100%;
        min-width: 0;
        max-height: 32vh;
    }

    .modal-table-wrap {
        overflow-x: auto;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    #modalTable {
        min-width: 480px;
    }

    /* Touch-friendlier report buttons in drawer */
    .mobile-drawer-item {
        min-height: 2.25rem;
    }

    .content-wrapper,
    .main-left,
    .main-right {
        min-width: 0;
        max-width: 100%;
    }
}

/* ========== TABLET (portrait / small landscape): book layout + drawer ========== */
@media (min-width: 601px) and (max-width: 900px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .top-header {
        flex: 0 0 auto;
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top));
        gap: 10px;
        min-height: 52px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .mobile-days-chip {
        max-width: 120px;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 8px;
        border: 1px solid rgba(122, 154, 191, 0.55);
        background: rgba(255, 255, 255, 0.55);
    }

    .header-row-primary .app-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
    }

    .panel-menu-icon {
        width: 24px;
        height: 24px;
    }

    .panel-menu-spacer {
        width: 68px;
        flex-basis: 68px;
    }

    .header-row-primary .hdr-label-match,
    .header-row-primary .hdr-label-session {
        display: inline;
        font-size: 12px;
        white-space: nowrap;
    }

    .header-row-primary {
        gap: 8px;
    }

    .header-row-primary select {
        flex: 1 1 0;
        min-width: 120px;
        width: auto;
        height: 40px;
        font-size: 14px;
        border-radius: 6px;
        padding: 0 8px;
    }

    .mobile-drawer {
        width: min(36vw, 240px);
        max-width: 240px;
    }

    .mobile-drawer-item,
    .mobile-drawer-check {
        min-height: 0;
        font-size: 13px;
        padding: 7px 10px;
    }

    .mobile-drawer-check input {
        width: 15px;
        height: 15px;
    }

    /* Tablet book: match/session left full height; right = UT on top, SR under UT */
    .content-wrapper {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.95fr);
        grid-template-rows: minmax(0, 1.2fr) minmax(200px, 0.9fr);
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        overflow: hidden;
        min-height: 0;
        height: 0; /* flex child fills remaining viewport */
        -webkit-overflow-scrolling: touch;
    }

    .main-left {
        grid-column: 1;
        grid-row: 1 / span 2;
        flex: none;
        width: auto;
        height: auto;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-right {
        display: contents;
        border: none;
        padding: 0;
        background: transparent;
    }

    #usertotal-summary-main {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        min-height: 0;
    }

    #sessionruns-table-container {
        grid-column: 2;
        grid-row: 2;
        align-self: stretch;
        min-height: 0;
    }

    .content-wrapper.right-panels-off {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }

    /* Only UT: right column full height */
    .content-wrapper.sr-off {
        grid-template-rows: minmax(0, 1fr);
    }

    .content-wrapper.sr-off .main-left,
    .content-wrapper.sr-off #usertotal-summary-main {
        grid-row: 1;
    }

    /* Only SR: right column full height */
    .content-wrapper.ut-side-off {
        grid-template-rows: minmax(0, 1fr);
    }

    .content-wrapper.ut-side-off .main-left {
        grid-column: 1;
        grid-row: 1;
    }

    .content-wrapper.ut-side-off #sessionruns-table-container {
        grid-column: 2;
        grid-row: 1;
    }

    .content-wrapper.right-panels-off .main-left {
        grid-column: 1;
        grid-row: 1;
    }

    .box-row {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        flex: 0 0 auto;
    }

    /* Alone: don't stretch full width; together: equal half each */
    #box-1,
    #box-2 {
        width: auto;
        flex: 1 1 0;
        max-width: calc(50% - 4px);
        min-width: 0;
        height: auto;
        min-height: 96px;
        flex-direction: column;
        gap: 3px;
        padding: 6px;
        border-radius: 4px;
        background: #f7f7f7;
        box-sizing: border-box;
    }

    #box-1 .textbox-group,
    #box-2 .textbox-group {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 30px;
        height: auto;
        align-items: center;
        gap: 4px;
    }

    #box-1 .textbox-group img,
    #box-2 .textbox-group img {
        display: inline-block;
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }

    .textbox-group input {
        font-size: 16px;
        padding: 6px 6px;
        border-radius: 3px;
        box-sizing: border-box;
    }

    /* Team name: compact; amount: rest of row */
    #team1name,
    #team2name,
    #team3name,
    #cut1name,
    #cut2name,
    #cut3name {
        flex: 0 0 48px;
        width: 48px;
        max-width: 48px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #team1amt,
    #team2amt,
    #team3amt,
    #cut1amt,
    #cut2amt,
    #cut3amt {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        text-align: right;
    }

    #match-table-container {
        flex: 1 1 auto;
        margin-top: 0;
        min-height: 120px;
        max-height: none;
        border: 1px solid #888;
        border-radius: 3px;
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #session-table-container {
        flex: 1 1 auto;
        margin-top: 0 !important;
        min-height: 120px;
        max-height: none;
        border: 1px solid #888;
        border-radius: 3px;
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-container {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    #match-table-container table,
    #session-table-container table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    #match-table-container th,
    #match-table-container td,
    #session-table-container th,
    #session-table-container td {
        font-size: 12px;
        padding: 3px 5px;
        min-height: 0;
        line-height: 1.25;
        width: auto !important;
        overflow: visible;
    }

    #match-table-container th:nth-child(9),
    #match-table-container td:nth-child(9),
    #session-table-container th:nth-child(9),
    #session-table-container td:nth-child(9) {
        font-size: 12px;
        padding-left: 6px;
    }

    #sessionruns-table-container.session-summary {
        flex: none;
        width: 100%;
        min-width: 0;
        height: 100%;
        max-height: none;
        min-height: 0;
        border: 1px solid #888;
        border-radius: 3px;
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #session-summary-table {
        width: 100%;
        table-layout: fixed;
    }

    #session-summary-table th:first-child,
    #session-summary-table td:first-child {
        width: 38%;
        text-align: center;
    }

    #session-summary-table th:last-child,
    #session-summary-table td:last-child {
        width: 62%;
        text-align: right;
        padding-right: 10px;
    }

    #usertotal-summary-main.usertotal-summary {
        flex: none;
        width: auto;
        min-width: 0;
        height: 100%;
        min-height: 0;
        max-height: none;
        border: 1px solid #888;
        border-radius: 3px;
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #session-summary-table th,
    #usertotal-table-main th,
    .main-right .usertotal-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #dce8f4;
        font-size: 12px;
        padding: 3px 6px;
        line-height: 1.2;
    }

    #session-summary-table th {
        font-size: 11px;
        padding: 3px 6px;
        line-height: 1.2;
    }

    #session-summary-table td,
    #usertotal-table-main td,
    .main-right .usertotal-table td {
        font-size: 13px;
        padding: 2px 6px;
        line-height: 1.2;
        min-height: 0;
    }

    #session-summary-table td {
        font-size: 13px;
        padding: 1px 6px;
        line-height: 1.2;
        min-height: 0;
    }

    /* F8: keep full-screen column (do not inherit F6 row layout) */
    #f8-report-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        padding: 0;
    }

    #f8-report-panel .f8-box,
    #f8-report-panel .connect-box {
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    #f8-report-panel .f8-body,
    #f8-report-panel .f8-body.usertotal-summary,
    #f8-report-panel .usertotal-summary {
        flex: 1 1 auto;
        width: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }

    #f8-report-panel .f8-table {
        width: 100%;
        min-width: 0;
    }

    #f8-report-panel .f8-table th,
    #f8-report-panel .f8-table td {
        font-size: 13px;
        padding: 3px 8px;
        line-height: 1.25;
    }

    #f8-report-panel .f8-buttons {
        flex-shrink: 0;
    }

    #f8-report-panel .f8-buttons button {
        height: 36px;
        padding: 0 28px;
        font-size: 14px;
    }

    /* F12: stay column on tablet */
    #f12-report-panel .f12-box,
    #f12-report-panel .connect-box {
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    /* Connect (F6): topbar full width, then match list | tables */
    #connect-report-panel.connect-page-panel {
        top: 0;
        bottom: 0;
        overflow: hidden;
        padding: 0;
        background: #808080;
    }

    #connect-report-panel .connect-box,
    #connect-report-panel .f6-box {
        display: grid;
        grid-template-columns: minmax(200px, 32%) 1fr;
        grid-template-rows: auto 1fr;
        flex-direction: unset;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        border: none;
        overflow: hidden;
        background: #808080;
    }

    #connect-report-panel .f6-topbar {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-shrink: 0;
        padding: 4px 10px;
        padding-top: max(4px, env(safe-area-inset-top));
        background: linear-gradient(to bottom, #b6d0e7, #8fb4dd);
        border-bottom: 1px solid #7a9abf;
    }

    #connect-report-panel .f6-topbar-title {
        flex: 1;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.2;
        text-align: center;
        color: #000;
    }

    #connect-report-panel .connect-left {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        max-height: none;
        min-height: 0;
        height: 100%;
        border-right: 1px solid #888;
        border-bottom: none;
        background: #e8e8e8;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 4px;
    }

    #connect-report-panel .connect-title {
        font-size: 12px;
        padding: 2px 4px;
        margin-bottom: 0;
        flex-shrink: 0;
        line-height: 1.2;
    }

    #connect-report-panel .connect-match-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #connect-report-panel .connect-select-all {
        flex-shrink: 0;
        padding: 4px;
        font-size: 12px;
        line-height: 1.2;
    }

    #connect-report-panel .connect-right,
    #connect-report-panel .f6-right {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        background: #808080;
    }

    #connect-report-panel .connect-tables,
    #connect-report-panel .f6-tables {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 4px;
        overflow: hidden;
        padding: 4px 6px;
    }

    #connect-report-panel .connect-table-wrap,
    #connect-report-panel .f6-table-wrap {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #444;
        background: #fff;
    }

    #connect-report-panel .f6-table,
    #connect-report-panel .f6-table-wrap table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    #connect-report-panel .f6-table th,
    #connect-report-panel .f6-table td {
        font-size: 13px;
        padding: 2px 6px;
        line-height: 1.25;
    }

    #connect-report-panel .f6-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #eee;
    }

    #connect-report-panel .connect-col-patti {
        display: none !important;
    }

    #connect-report-panel .f6-total,
    #connect-report-panel .connect-total {
        flex-shrink: 0;
        display: block;
        flex-direction: unset;
        margin: 0;
        padding: 4px 10px;
        border-top: 1px solid #888;
        background: #e8e8e8;
        text-align: center;
    }

    #connect-report-panel .f6-net {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.2;
    }

    #connect-report-panel .f6-subtotals {
        display: none;
    }

    #connect-report-panel .f6-buttons,
    #connect-report-panel .connect-buttons {
        flex-shrink: 0;
        padding: 6px 10px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        text-align: center;
        background: #e8e8e8;
        border-top: 1px solid #888;
    }

    #connect-report-panel .f6-buttons button {
        height: 28px;
        min-height: 28px;
        padding: 0 22px;
        font-size: 13px;
    }

    #connect-report-panel .connect-details-panel {
        flex: 1;
        min-height: 0;
        overflow: auto;
        margin: 8px 10px;
        background: #fff;
        border: 1px solid #444;
    }

    .session-user-modal-layout {
        flex-direction: row;
    }

    .session-user-main-table-wrap {
        width: 65%;
        max-width: none;
        max-height: none;
        height: auto;
    }

    .session-user-summary-wrap {
        width: 35%;
        max-height: none;
    }
}

@media (max-width: 480px) {
    .header-row-primary select {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
    }

    #match-table-container table,
    #session-table-container table {
        min-width: 0;
    }

    #modalTable {
        min-width: 400px;
    }

    #f11-report-panel .f11-grid {
        min-width: 0 !important;
    }

    .box-row,
    .team-box,
    .cut-box {
        font-size: 13px;
    }

    .login-box {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 12px auto;
        padding: 16px;
        box-sizing: border-box;
    }
}