/* assets/admin.css - the look of the admin pages: a copy of the portal's style.css (VSCode folder, 07/11/2026), so the
   new admin pages match the existing admin portal, plus a few additions at the end.

   Version history:
     v1.0  07/11/2026 Original: copy of the portal style.css + admin menu, tables, tiles, login box.
     v1.1  07/11/2026 Tab links (Results, Settings) without underlines. (backup: admin_v1_0.css)
     v1.2  07/11/2026 The admin layout: main tabs, summary strip, grouped side menu. (backup: admin_v1_1.css)
     v1.3  07/11/2026 Teams & captains (team by team) and the player side panel. (backup: admin_v1_2.css)
     v1.4  07/11/2026 Finance. (backup: admin_v1_3.css) */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #f4f6f9;
    color: #333;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #004080;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

h1 {
    color: #004080;
    margin: 0;
    font-size: 22px;
}

h2 {
    color: #555;
    text-align: center;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 25px;
}

.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
}

.alert-error {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.settings-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 18px;
    border-radius: 8px;
}

.settings-box h3 {
    margin-top: 0;
    color: #004080;
    font-size: 15px;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 6px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #475569;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    box-sizing: border-box;
    background: #fff;
}

.btn-admin {
    background: #004080;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

.btn-success {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    margin-top: 10px;
}

.btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

.btn-logout {
    background: #64748b;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 25px;
}

.card {
    background: #eef2f7;
    border-left: 4px solid #004080;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.card h4 {
    margin: 0 0 4px 0;
    font-size: 10.5px;
    color: #666;
    text-transform: uppercase;
}

.card .number {
    font-size: 18px;
    font-weight: bold;
    color: #004080;
}

.master-tab-menu {
    display: flex;
    gap: 8px;
    border-bottom: 3px solid #004080;
    margin-bottom: 25px;
}

.master-tab-btn {
    background: #e2e8f0;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    color: #334155;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
}

.master-tab-btn.active {
    background: #004080;
    color: white;
}

.master-section {
    display: none;
}

.master-section.active {
    display: block;
}

.sub-tab-menu {
    display: flex;
    border-bottom: 2px solid #004080;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 4px;
}

.sub-tab-btn {
    background: #eef2f7;
    border: none;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #004080;
    border-radius: 6px 6px 0 0;
}

.sub-tab-btn.active {
    background: #004080;
    color: white;
}

.sub-tab-content {
    display: none;
}

.sub-tab-content.active {
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    font-size: 13px;
}

th {
    background-color: #004080;
    color: white;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

.badge-yes {
    background-color: #d4edda;
    color: #155724;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
}

.badge-no {
    background-color: #e2e3e5;
    color: #383d41;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.badge-due {
    background-color: #f8d7da;
    color: #842029;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11.5px;
    border: 1px solid #f5c2c7;
    display: inline-block;
}

.badge-ok {
    background-color: #d1e7dd;
    color: #0f5132;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11.5px;
}

.manual-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.team-link-row {
    cursor: pointer;
    color: #004080;
    font-weight: bold;
}

.team-link-row:hover {
    background-color: #e0f2fe !important;
    text-decoration: underline;
}

.team-name-cell {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-card {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-card h3 {
    margin-top: 0;
    color: #004080;
    font-size: 18px;
    border-bottom: 2px solid #004080;
    padding-bottom: 8px;
}

.summary-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.summary-detail-row span:first-child {
    color: #64748b;
    font-weight: 600;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .master-tab-btn:not(:first-child) {
        display: none !important;
    }
}

/* Modal Overlay Styling */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-box {
    background: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    animation: modalPop 0.3s ease-out;
}
@keyframes modalPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.modal-icon {
    font-size: 42px;
    color: #28a745;
    margin-bottom: 10px;
}
.modal-box h3 {
    margin-top: 0;
    color: #004080;
    border: none;
    padding: 0;
}
.modal-box p {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}
.modal-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
.modal-btn:hover { background-color: #218838; }
/* ======================================================================== additions for the League Manager admin */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 20px; }
.admin-nav a { padding: 8px 14px; border-radius: 6px; background: #eef2f7; color: #004080; font-weight: bold; font-size: 14px; text-decoration: none; }
.admin-nav a:hover { background: #dbe5f1; }
.admin-nav a.active { background: #004080; color: #fff; }
.admin-nav .spacer { flex: 1 1 auto; }
.who-bar { font-size: 13px; color: #475569; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.who-bar form { margin: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
.data-table th { background: #004080; color: #fff; text-align: left; padding: 8px 10px; font-size: 13px; }
.data-table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.data-table tr:nth-child(even) td { background: #f8fafc; }
.data-table .num { text-align: right; }
.muted { color: #64748b; font-size: 13px; }
.card a.card-link { display: block; color: inherit; text-decoration: none; }
.card.attention { background: #fff7ed; border: 1px solid #fdba74; }
.card.attention .number { color: #c2410c; }
.section-title { color: #004080; font-size: 17px; margin: 25px 0 10px; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; }
.check-list label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; font-weight: normal; }
.check-list input { width: auto; }
.login-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f1f5f9; margin: 0; padding: 20px; box-sizing: border-box; }
.login-box { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 380px; box-sizing: border-box; }
.login-box h2 { margin-top: 0; color: #1e293b; text-align: center; font-size: 22px; }
.login-box .sub { text-align: center; color: #64748b; font-size: 13px; margin-bottom: 20px; }
.login-box .form-group input { padding: 10px; font-size: 14px; }
.login-box .go { width: 100%; background: #166534; color: #fff; border: none; padding: 11px; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer; }
.versions-footer { margin-top: 30px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #64748b; }
.versions-footer details summary { cursor: pointer; font-weight: bold; color: #475569; }
.versions-footer table { margin-top: 8px; border-collapse: collapse; }
.versions-footer td { padding: 2px 14px 2px 0; }
@media (max-width: 600px) { body { padding: 8px; } .container { padding: 14px; } }
a.sub-tab-btn { text-decoration: none; display: inline-block; }

/* v1.2 07/11/2026: the admin layout - main tabs, summary strip, grouped side menu (lib/admin.php v1.8) */
.container { max-width: 1320px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid #004080; margin: -6px 0 14px; }
.adm-tabs a { padding: 10px 18px; border-radius: 8px 8px 0 0; background: #e9eef5; color: #004080; font-weight: bold; font-size: 15px; text-decoration: none; }
.adm-tabs a:hover { background: #dbe5f1; }
.adm-tabs a.active { background: #004080; color: #fff; }
.adm-badge { background: #b91c1c; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; vertical-align: 2px; }
.adm-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.adm-stat { border: 1px solid #dde3ec; border-top: 4px solid #004080; border-radius: 8px; padding: 8px 12px; display: grid; gap: 1px; background: #fff; }
.adm-stat span { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.adm-stat b { font-size: 20px; color: #004080; font-variant-numeric: tabular-nums; }
.adm-stat small { font-size: 11px; color: #64748b; }
.adm-stat.adm-hot { border-top-color: #b91c1c; }
.adm-stat.adm-hot b { color: #b91c1c; }
.adm-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.adm-side { display: grid; gap: 14px; position: sticky; top: 10px; }
.adm-group h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.adm-side a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; color: #1e293b; text-decoration: none; font-size: 14px; border-left: 3px solid transparent; }
.adm-side a:hover { background: #f1f5f9; }
.adm-side a.active { background: #dbeafe; border-left-color: #004080; font-weight: bold; color: #004080; }
.adm-n { background: #eef2f7; border-radius: 999px; padding: 0 8px; font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.adm-n-hot { background: #fee2e2; color: #b91c1c; font-weight: bold; }
.adm-main { min-width: 0; }
.adm-main > h1:first-child, .adm-main > p:first-child { margin-top: 0; }
@media (max-width: 860px) {
    .adm-body { grid-template-columns: 1fr; }
    .adm-side { position: static; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* v1.3 07/11/2026: Teams & captains, team by team (admin/teams.php v1.1) and the player side panel */
.tp-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.tp-list { display: grid; gap: 8px; position: sticky; top: 10px; }
.tp-list input[type="search"] { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box; }
.tp-teams { display: grid; gap: 1px; max-height: 70vh; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px; }
.tp-div { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px 2px; }
.tp-team { display: grid; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: #1e293b; }
.tp-team:hover { background: #f1f5f9; }
.tp-team small { color: #64748b; font-size: 12px; }
.tp-team.active { background: #dbeafe; box-shadow: inset 3px 0 0 #004080; }
.tp-team.tp-withdrawn { opacity: .55; }
.tp-add { text-align: center; text-decoration: none; }
.tp-view { min-width: 0; display: grid; gap: 14px; align-content: start; }
.tp-head h2 { margin: 0; color: #004080; font-size: 21px; text-align: left; }
.tp-head p { margin: 4px 0 0; }
.tp-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tp-person { border: 1px solid #dde3ec; border-radius: 9px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.tp-person a { color: #004080; text-decoration: none; }
.tp-lab { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.tp-copy { display: flex; gap: 6px; align-items: center; min-width: 0; }
.tp-copy code { background: #f1f5f9; border-radius: 5px; padding: 1px 6px; font-size: 13px; overflow-wrap: anywhere; }
.tp-copy-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: 5px; padding: 1px 7px; font-size: 11px; cursor: pointer; color: #004080; }
.tp-squad { margin-bottom: 0; }
.tp-squad td { vertical-align: middle; }
.tp-squad a { color: #004080; text-decoration: none; }
.tp-role { font-size: 11px; font-weight: bold; border-radius: 4px; padding: 1px 6px; background: #004080; color: #fff; margin-left: 4px; }
.tp-role-2 { background: #fff; color: #004080; border: 1px solid #004080; }
.tp-tag { font-size: 11px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 5px; margin-right: 3px; white-space: nowrap; }
.tp-addrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tp-addrow input[type="text"] { flex: 1 1 300px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.tp-addrow label { font-size: 13px; display: flex; gap: 4px; align-items: center; }
.tp-addrow button { width: auto; flex: 0 0 auto; padding: 8px 18px; margin: 0; }
.tp-more { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; }
.tp-more summary { cursor: pointer; font-weight: bold; color: #004080; }
.tp-shade { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 50; }
.tp-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 51; display: grid; grid-template-rows: auto 1fr; box-shadow: -10px 0 40px rgba(0, 0, 0, .2); }
.tp-panel[hidden], .tp-shade[hidden] { display: none; }
.tp-panel-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 2px solid #004080; }
.tp-panel iframe { width: 100%; height: 100%; border: 0; }
body.in-panel { padding: 0; background: #fff; }
body.in-panel .container { box-shadow: none; padding: 14px; max-width: none; border-radius: 0; }
body.in-panel .settings-grid { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .tp-split { grid-template-columns: 1fr; } .tp-list { position: static; } .tp-teams { max-height: 260px; } }

/* v1.4 07/11/2026: Finance (admin/finance.php) */
.fin-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-tools { justify-content: flex-start; margin-bottom: 12px; }
.fin-tools input[type="search"] { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; min-width: 200px; }
.fin-tools .btn-success, .fin-tools .btn-admin, .fin-tools .btn-logout, .fin-actions button { width: auto; margin: 0; padding: 8px 14px; }
.fin-a { text-decoration: none; display: inline-block; }
.fin-progress-box { margin-bottom: 14px; }
.fin-bar { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.fin-bar div { height: 100%; background: #16a34a; border-radius: 999px; }
.fin-chips { display: flex; gap: 6px; }
.fin-chip { border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: bold; cursor: pointer; width: auto; margin: 0; }
.fin-chip.active { background: #004080; border-color: #004080; color: #fff; }
.fin-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.fin-owe { background: #fee2e2; color: #b91c1c; } .fin-paid { background: #dcfce7; color: #166534; } .fin-credit { background: #dbeafe; color: #1d4ed8; } .fin-warn { background: #fef3c7; color: #92400e; }
.fin-small { width: auto; margin: 0; padding: 4px 10px; font-size: 12px; }
.fin-small-link { font-size: 13px; margin-left: 8px; }
.fin-nowrap { white-space: nowrap; }
.fin-h2 { text-align: left; color: #004080; margin: 6px 0 2px; }
.fin-dim td { color: #94a3b8; }
.fin-cancel { margin: 0; }
.fin-link-btn { border: 0; background: none; color: #b91c1c; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; width: auto; margin: 0; }
.fin-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.fin-inline select, .fin-inline input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.fin-tag { font-size: 12px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.fin-kv { width: 100%; border-collapse: collapse; }
.fin-kv td { border: 0; border-bottom: 1px dashed #e2e8f0; padding: 6px 4px; background: transparent !important; }
.fin-kv .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-total td { font-weight: bold; border-bottom: 2px solid #94a3b8; }
.fin-bars { display: grid; gap: 7px; max-width: 640px; margin-bottom: 14px; }
.fin-barrow { display: grid; grid-template-columns: 170px 1fr 80px; gap: 10px; align-items: center; font-size: 14px; }
.fin-track { height: 12px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.fin-track div { height: 100%; background: #b91c1c; }
.fin-dlg { border: 0; border-radius: 12px; padding: 0; width: min(520px, 94vw); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.fin-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.fin-dlg form { padding: 18px; display: grid; gap: 4px; }
.fin-dlg h3 { margin: 0 0 8px; color: #004080; }
.fin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media print { .adm-tabs, .adm-strip, .adm-side, .fin-tools, .who-bar, .versions-footer, .fin-cancel, .fin-inline button { display: none !important; } .adm-body { display: block; } }