/**
 * ss-f7-bridge.css — Jembatan komponen admin lama di dalam cangkang Framework7
 *
 * Ekstraksi ios.css MINUS seluruh layout aplikasi lama (sidebar/navbar/tabbar/auth):
 * halaman lama (markup gaya Bootstrap) tetap rapi saat dirender di dalam
 * layouts/f7.blade.php. Dimuat SETELAH framework7-bundle, style.css, dan ss-f7.css
 * — urutan ini yang memenangkan override atas grid/card/badge bawaan F7.
 *
 * Perbedaan dari ios.css:
 *  - Mode gelap: selector .dark-style (html) → body.dark (kunci F7/situs publik).
 *  - Font: Inter → Rubik (dimuat style.css situs publik).
 *  - Grid: semua .col-* diberi prefix ".row >" agar menang dari
 *    ".row > [class*=col-]" milik Framework7.
 *  - .sec-head TIDAK ada di sini (punya ss-f7.css); hanya alias warna
 *    .sh-ic-* lama → palet .sh-* baru.
 *  - Tanpa reset body/layout — cangkang halaman sepenuhnya milik F7.
 */

/* ════════════════════════════════════════════════════════════════
   01. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Warna sistem iOS */
  --ios-blue:   #007aff;
  --ios-green:  #34c759;
  --ios-red:    #ff3b30;
  --ios-orange: #ff9500;
  --ios-yellow: #ffcc00;
  --ios-teal:   #32ade6;
  --ios-indigo: #5856d6;
  --ios-gray:   #8e8e93;

  --primary:   var(--ios-blue);
  --primary-rgb: 0, 122, 255;
  --success:   var(--ios-green);
  --success-rgb: 52, 199, 89;
  --danger:    var(--ios-red);
  --danger-rgb: 255, 59, 48;
  --warning:   var(--ios-orange);
  --warning-rgb: 255, 149, 0;
  --info:      var(--ios-teal);
  --info-rgb:  50, 173, 230;
  --secondary: var(--ios-gray);
  --secondary-rgb: 142, 142, 147;
  --dark:      #1c1c1e;

  /* Permukaan & teks — light */
  --bg:          #f2f2f7;
  --card-bg:     #ffffff;
  --card-bg-rgb: 255, 255, 255;
  --elevated-bg: #ffffff;
  --text:        #1c1c1e;
  --text-2:      rgba(60, 60, 67, .60);
  --text-3:      rgba(60, 60, 67, .30);
  --separator:   rgba(60, 60, 67, .10);
  --separator-strong: rgba(60, 60, 67, .18);
  --fill:        rgba(120, 120, 128, .12);
  --fill-2:      rgba(120, 120, 128, .08);
  --input-bg:    #ffffff;
  --input-border: rgba(60, 60, 67, .22);
  --backdrop:    rgba(0, 0, 0, .35);

  /* Bentuk & bayangan */
  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 7px 20px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 3px 8px rgba(0, 0, 0, .06), 0 16px 34px rgba(0, 0, 0, .13);
  --shadow-pop:  0 8px 40px rgba(0, 0, 0, .16);

  /* Font — mengikuti bahasa desain situs publik */
  --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Kompatibilitas variabel lama yang masih dirujuk view/JS */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-border-color: var(--separator-strong);
  --bs-secondary-bg: var(--fill-2);
  --bs-secondary-color: var(--text-2);
  --bs-card-bg: var(--card-bg);
  --bs-table-bg: var(--card-bg);
  --bs-body-bg: var(--bg);
}

body.dark {
  --primary:   #0a84ff;
  --primary-rgb: 10, 132, 255;
  --success:   #30d158;
  --success-rgb: 48, 209, 88;
  --danger:    #ff453a;
  --danger-rgb: 255, 69, 58;
  --warning:   #ff9f0a;
  --warning-rgb: 255, 159, 10;
  --info:      #64d2ff;
  --info-rgb:  100, 210, 255;

  --bg:          #0d0d0f;
  --card-bg:     #1c1c1e;
  --card-bg-rgb: 28, 28, 30;
  --elevated-bg: #2c2c2e;
  --text:        #f2f2f7;
  --text-2:      rgba(235, 235, 245, .60);
  --text-3:      rgba(235, 235, 245, .30);
  --separator:   rgba(84, 84, 88, .42);
  --separator-strong: rgba(84, 84, 88, .65);
  --fill:        rgba(120, 120, 128, .24);
  --fill-2:      rgba(120, 120, 128, .14);
  --input-bg:    #2c2c2e;
  --input-border: rgba(84, 84, 88, .65);
  --backdrop:    rgba(0, 0, 0, .55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .2), 0 7px 20px rgba(0, 0, 0, .35);
  --shadow-card-hover: 0 3px 8px rgba(0, 0, 0, .3), 0 16px 34px rgba(0, 0, 0, .55);
  --shadow-pop:  0 8px 40px rgba(0, 0, 0, .6);
}

/* ════════════════════════════════════════════════════════════════
   02. TIPOGRAFI KONTEN (tanpa reset body — cangkang milik F7)
   box-sizing hanya di area konten bridge — cangkang F7 tak disentuh.
   ════════════════════════════════════════════════════════════════ */
.container-xxl, .ss-flash, .ss-pad, body.ss-standalone,
.container-xxl *, .container-xxl *::before, .container-xxl *::after,
.ss-flash *, .ss-pad *, .ss-pad *::before, .ss-pad *::after,
body.ss-standalone *, body.ss-standalone *::before, body.ss-standalone *::after {
  box-sizing: border-box;
}

.container-xxl {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -.01em;
}
h1 { font-size: 1.75rem;  font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.5rem;   font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: .9375rem; }
h6 { font-size: .8125rem; }

.display-6 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }

.container-xxl p { margin: 0 0 1rem; }
small, .small { font-size: .75rem; line-height: 1.45; }
strong, b { font-weight: 600; }

/* :where() → spesifisitas 0 agar aturan warna link generik ini TIDAK
   mengalahkan komponen (.btn, .dropdown-item, .page-link, .nav-link, …)
   yang punya warna sendiri; hanya jadi default link teks biasa. */
.container-xxl :where(a:not(.btn)) { color: var(--primary); text-decoration: none; }
.container-xxl :where(a:not(.btn)):hover { opacity: .82; }

hr { border: 0; border-top: 1px solid var(--separator); margin: 1rem 0; opacity: 1; }
code { font-size: .8125em; color: var(--primary); word-wrap: break-word; }

.container-xxl ul, .container-xxl ol { padding-left: 1.5rem; margin-top: 0; }
label { display: inline-block; }
[hidden] { display: none !important; }

/* Ukuran ikon Remixicon */
.ri-14px { font-size: 14px !important; }
.ri-16px { font-size: 16px !important; }
.ri-18px { font-size: 18px !important; }
.ri-20px { font-size: 20px !important; }
.ri-22px { font-size: 22px !important; }
.ri-24px { font-size: 24px !important; }
.ri-28px { font-size: 28px !important; }
.ri-32px { font-size: 32px !important; }
.ri-40px { font-size: 40px !important; }
.ri-48px { font-size: 48px !important; }
.tf-icons { vertical-align: -2px; }

/* ════════════════════════════════════════════════════════════════
   03. GRID & CONTAINER
   Semua kolom diberi prefix ".row >" agar menang dari
   ".row > [class*=col-]" (width:100%) milik grid Framework7.
   ════════════════════════════════════════════════════════════════ */
.container-xxl, .container-p-y {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}
.container-p-y { padding-block: 14px 8px; }

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;    /* batalkan space-between milik F7 */
  align-items: stretch;
  margin-inline: calc(-.5 * var(--gutter-x, 1rem));
  margin-top: calc(-1 * var(--gutter-y, 0px));
  margin-bottom: 0;
  --f7-grid-gap: 0px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: calc(.5 * var(--gutter-x, 1rem));
  margin-top: var(--gutter-y, 0px);
}
.g-0 { --gutter-x: 0rem;    --gutter-y: 0rem; }
.g-2 { --gutter-x: .5rem;   --gutter-y: .5rem; }
.g-3 { --gutter-x: .75rem;  --gutter-y: .75rem; }
.g-4 { --gutter-x: 1.25rem; --gutter-y: 1.25rem; }

.row > .col      { flex: 1 0 0%; width: auto; }
.row > .col-auto { flex: 0 0 auto; width: auto; }
.row > .col-1  { flex: 0 0 auto; width: 8.3333%; }
.row > .col-2  { flex: 0 0 auto; width: 16.6667%; }
.row > .col-3  { flex: 0 0 auto; width: 25%; }
.row > .col-4  { flex: 0 0 auto; width: 33.3333%; }
.row > .col-5  { flex: 0 0 auto; width: 41.6667%; }
.row > .col-6  { flex: 0 0 auto; width: 50%; }
.row > .col-7  { flex: 0 0 auto; width: 58.3333%; }
.row > .col-8  { flex: 0 0 auto; width: 66.6667%; }
.row > .col-9  { flex: 0 0 auto; width: 75%; }
.row > .col-10 { flex: 0 0 auto; width: 83.3333%; }
.row > .col-11 { flex: 0 0 auto; width: 91.6667%; }
.row > .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .row > .col-sm-3  { flex: 0 0 auto; width: 25%; }
  .row > .col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
  .row > .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .row > .col-sm-8  { flex: 0 0 auto; width: 66.6667%; }
  .row > .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .row > .col-md-1  { flex: 0 0 auto; width: 8.3333%; }
  .row > .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
  .row > .col-md-3  { flex: 0 0 auto; width: 25%; }
  .row > .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
  .row > .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
  .row > .col-md-6  { flex: 0 0 auto; width: 50%; }
  .row > .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
  .row > .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
  .row > .col-md-9  { flex: 0 0 auto; width: 75%; }
  .row > .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .row > .col-md-12 { flex: 0 0 auto; width: 100%; }
  .g-md-4 { --gutter-x: 1.25rem; --gutter-y: 1.25rem; }
}
@media (min-width: 992px) {
  .row > .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
  .row > .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .row > .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
  .row > .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
  .row > .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .row > .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
  .row > .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
  .row > .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
  .row > .col-xl-2  { flex: 0 0 auto; width: 16.6667%; }
  .row > .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .row > .col-xl-4  { flex: 0 0 auto; width: 33.3333%; }
  .row > .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .row > .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   04. UTILITIES
   ════════════════════════════════════════════════════════════════ */
/* Display */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }
@media (min-width: 576px) {
  .d-sm-inline { display: inline !important; }
  .d-sm-block  { display: block !important; }
  .d-sm-flex   { display: flex !important; }
  .d-sm-none   { display: none !important; }
}
@media (min-width: 768px) {
  .d-md-inline { display: inline !important; }
  .d-md-block  { display: block !important; }
  .d-md-flex   { display: flex !important; }
  .d-md-none   { display: none !important; }
}
@media (min-width: 1200px) {
  .d-xl-none  { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex  { display: flex !important; }
}

/* Flex */
.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-fill       { flex: 1 1 auto !important; }
.flex-grow-1     { flex-grow: 1 !important; }
.flex-shrink-0   { flex-shrink: 0 !important; }
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start  { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end    { align-items: flex-end !important; }
.align-self-center  { align-self: center !important; }
.align-middle       { vertical-align: middle !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* Spacing (skala Bootstrap: 1=.25, 2=.5, 3=1, 4=1.5, 5=3 rem) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }    .mb-0 { margin-bottom: 0 !important; }
.my-0 { margin-block: 0 !important; }  .mx-0 { margin-inline: 0 !important; }
.mt-1 { margin-top: .25rem !important; }  .mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }   .mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }    .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }  .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }    .mb-5 { margin-bottom: 3rem !important; }
.my-1 { margin-block: .25rem !important; }
.my-3 { margin-block: 1rem !important; }
.ms-1 { margin-inline-start: .25rem !important; }
.ms-2 { margin-inline-start: .5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.mx-1 { margin-inline: .25rem !important; }
.mx-2 { margin-inline: .5rem !important; }
.mx-auto { margin-inline: auto !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-auto { margin-inline-end: auto !important; }
.mt-auto { margin-top: auto !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-2 { padding-top: .5rem !important; }  .pb-0 { padding-bottom: 0 !important; }
.pt-3 { padding-top: 1rem !important; }   .pb-1 { padding-bottom: .25rem !important; }
.pt-4 { padding-top: 1.5rem !important; } .pb-2 { padding-bottom: .5rem !important; }
.pt-5 { padding-top: 3rem !important; }   .pb-3 { padding-bottom: 1rem !important; }
.py-0 { padding-block: 0 !important; }
.py-1 { padding-block: .25rem !important; }
.py-2 { padding-block: .5rem !important; }
.py-3 { padding-block: 1rem !important; }
.py-4 { padding-block: 1.5rem !important; }
.py-5 { padding-block: 3rem !important; }
.px-0 { padding-inline: 0 !important; }
.px-1 { padding-inline: .25rem !important; }
.px-2 { padding-inline: .5rem !important; }
.px-3 { padding-inline: 1rem !important; }
.px-4 { padding-inline: 1.5rem !important; }
.ps-3 { padding-inline-start: 1rem !important; }
.ps-4 { padding-inline-start: 1.5rem !important; }
.pe-4 { padding-inline-end: 1.5rem !important; }
.py-12 { padding-block: 3rem !important; }
.px-12 { padding-inline: 1.5rem !important; }
@media (min-width: 576px) { .py-sm-12 { padding-block: 3rem !important; } }
@media (min-width: 768px) { .p-md-4 { padding: 1.5rem !important; } }
@media (min-width: 992px) { .pt-lg-0 { padding-top: 0 !important; } }

/* Teks */
.text-start  { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: .04em; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-nowrap { white-space: nowrap !important; }
.text-decoration-none { text-decoration: none !important; }
.text-muted     { color: var(--text-2) !important; }
.text-secondary { color: var(--text-2) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info) !important; }
.text-dark    { color: var(--text) !important; }
.text-body    { color: var(--text) !important; }
.text-white   { color: #fff !important; }
.text-reset   { color: inherit !important; }
.text-large   { font-size: 1.125rem; }
.fw-normal   { font-weight: 400 !important; }
.fw-medium, .font-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }
.fs-1 { font-size: 1.75rem !important; }
.fs-2 { font-size: 1.5rem !important; }
.fs-3 { font-size: 1.25rem !important; }
.fs-4 { font-size: 1.125rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: .875rem !important; }
.lh-1 { line-height: 1 !important; }
.fst-italic { font-style: italic !important; }

/* Background */
.bg-white   { background-color: var(--card-bg) !important; }
.bg-light   { background-color: var(--fill-2) !important; }
.bg-lighter { background-color: var(--fill-2) !important; }
.bg-primary   { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success   { background-color: var(--success) !important; }
.bg-danger    { background-color: var(--danger) !important; }
.bg-warning   { background-color: var(--warning) !important; }
.bg-dark      { background-color: var(--dark) !important; }
.bg-opacity-10 { --bg-opacity: .1; }
.bg-primary.bg-opacity-10 { background-color: rgba(var(--primary-rgb), .1) !important; }
.bg-success.bg-opacity-10 { background-color: rgba(var(--success-rgb), .1) !important; }
.bg-danger.bg-opacity-10  { background-color: rgba(var(--danger-rgb), .1) !important; }
.bg-warning.bg-opacity-10 { background-color: rgba(var(--warning-rgb), .1) !important; }

/* Tint iOS: latar lembut + teks warna penuh */
.bg-label-primary   { background-color: rgba(var(--primary-rgb), .12) !important; color: var(--primary) !important; }
.bg-label-success   { background-color: rgba(var(--success-rgb), .14) !important; color: var(--success) !important; }
.bg-label-danger    { background-color: rgba(var(--danger-rgb), .13) !important;  color: var(--danger) !important; }
.bg-label-warning   { background-color: rgba(var(--warning-rgb), .15) !important; color: #c77700 !important; }
body.dark .bg-label-warning { color: var(--warning) !important; }
.bg-label-info      { background-color: rgba(var(--info-rgb), .14) !important;    color: #0c7abf !important; }
body.dark .bg-label-info { color: var(--info) !important; }
.bg-label-secondary { background-color: var(--fill) !important; color: var(--text-2) !important; }
.bg-label-dark      { background-color: var(--fill) !important; color: var(--text) !important; }

/* Border */
.border   { border: 1px solid var(--separator) !important; }
.border-0 { border: 0 !important; }
.border-top    { border-top: 1px solid var(--separator) !important; }
.border-bottom { border-bottom: 1px solid var(--separator) !important; }
.border-end    { border-right: 1px solid var(--separator) !important; }
.border-danger  { border-color: rgba(var(--danger-rgb), .5) !important; }
.border-success { border-color: rgba(var(--success-rgb), .5) !important; }
.border-warning { border-color: rgba(var(--warning-rgb), .5) !important; }
.border-opacity-50 { --border-opacity: .5; }
.rounded   { border-radius: var(--radius) !important; }
.rounded-2 { border-radius: var(--radius-sm) !important; }
.rounded-3 { border-radius: var(--radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill   { border-radius: 50rem !important; }

/* Sizing, posisi, dsb. */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-px-400 { width: 400px !important; max-width: 100%; }
.object-fit-cover { object-fit: cover !important; }
/* Logo/foto mini di sel tabel — melawan `.page-content img { width:100% }` style.css */
img.table-thumb { width: 30px; height: 30px; flex-shrink: 0; }
.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0 { top: 0 !important; }
.start-100 { left: 100% !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.min-w-0 { min-width: 0 !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.list-unstyled { padding-left: 0 !important; list-style: none; }
.shadow-sm { box-shadow: var(--shadow-card) !important; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Transisi fade untuk komponen Bootstrap JS */
.fade { transition: opacity .18s ease; }
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.collapsing {
  height: 0; overflow: hidden;
  transition: height .28s cubic-bezier(.25, .1, .25, 1);
}

/* ════════════════════════════════════════════════════════════════
   05. KOMPONEN
   ════════════════════════════════════════════════════════════════ */

/* ── Card (netralkan margin & hairline ::after kartu F7) ─────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background-color: var(--card-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  word-wrap: break-word;
  font-size: .8125rem;
}
.card-header {
  display: block;
  padding: 1rem 1.25rem;
  min-height: 0;
  background: transparent;
  border-bottom: 1px solid var(--separator);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-header::after, .card-footer::before { display: none !important; }
.card-header:last-child { border-bottom: 0; }
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.card-footer {
  display: block;
  padding: 1rem 1.25rem;
  min-height: 0;
  background: transparent;
  border-top: 1px solid var(--separator);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.card-title { margin-bottom: .5rem; font-size: .9375rem; font-weight: 600; }

/* Tipografi konsisten DI DALAM kartu */
.card small, .card .small { font-size: .75rem; }
.card .card-header h5, .card .card-header h6 { font-size: .9375rem; font-weight: 600; margin-bottom: 0; }
.card h4 { font-size: 1.25rem; }
.card h5 { font-size: .9375rem; }
.card h6 { font-size: .8125rem; }
.card .table { font-size: .8125rem; }
.card .badge { font-size: .7rem; }

/* ── Button ───────────────────────────────────────────────────── */
/* Bundel F7 menyetel `button{width:100%}` global → <button class="btn"> ikut
   melar selebar kontainer. Kembalikan ke lebar konten; :where() menjaga
   spesifisitas tetap (0,0,1) supaya .w-100 / .btn-icon / aturan lain tetap menang. */
button:where(.btn) { width: auto; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              transform .1s ease, opacity .15s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .3); }
.btn:disabled, .btn.disabled { opacity: .45; pointer-events: none; }

.btn-sm { padding: .3125rem .625rem; font-size: .75rem; border-radius: var(--radius-sm); }
.btn-xs { padding: .1875rem .5rem;  font-size: .6875rem; border-radius: 7px; }
.btn-lg { padding: .6875rem 1.375rem; font-size: .9375rem; border-radius: 12px; }

.btn-primary   { background-color: var(--primary); color: #fff; }
.btn-secondary { background-color: var(--fill); color: var(--text); }
.btn-success   { background-color: var(--success); color: #fff; }
.btn-danger    { background-color: var(--danger); color: #fff; }
.btn-warning   { background-color: var(--warning); color: #fff; }
.btn-info      { background-color: var(--info); color: #fff; }
.btn-light     { background-color: var(--fill-2); color: var(--text); }
.btn-gray      { background-color: #8e8e93; color: #fff; } /* netral solid teks putih (pengganti outline-secondary) */
.btn-gray:hover { color: #fff; }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover { color: #fff; }

/* Outline ala iOS: tint lembut, tanpa garis kasar */
.btn-outline-primary   { color: var(--primary); border-color: rgba(var(--primary-rgb), .45); }
.btn-outline-primary:hover   { background-color: rgba(var(--primary-rgb), .1); opacity: 1; }
.btn-outline-secondary { color: var(--text-2); border-color: var(--separator-strong); }
.btn-outline-secondary:hover { background-color: var(--fill-2); color: var(--text); opacity: 1; }
.btn-outline-success   { color: var(--success); border-color: rgba(var(--success-rgb), .45); }
.btn-outline-success:hover   { background-color: rgba(var(--success-rgb), .1); opacity: 1; }
.btn-outline-danger    { color: var(--danger); border-color: rgba(var(--danger-rgb), .45); }
.btn-outline-danger:hover    { background-color: rgba(var(--danger-rgb), .1); opacity: 1; }
.btn-outline-warning   { color: var(--warning); border-color: rgba(var(--warning-rgb), .5); }
.btn-outline-warning:hover   { background-color: rgba(var(--warning-rgb), .12); opacity: 1; }
.btn-outline-info      { color: var(--info); border-color: rgba(var(--info-rgb), .45); }
.btn-outline-info:hover      { background-color: rgba(var(--info-rgb), .12); opacity: 1; }

/* Text button (plain iOS) */
.btn-link { color: var(--primary); padding: 0; border: 0; font-weight: 500; background: none; }
.btn-text-primary   { color: var(--primary); }
.btn-text-secondary { color: var(--text-2); }
.btn-text-danger    { color: var(--danger); }
.btn-text-warning   { color: var(--warning); }
.btn-text-info      { color: var(--info); }
.btn-text-primary:hover, .btn-text-secondary:hover, .btn-text-danger:hover,
.btn-text-warning:hover, .btn-text-info:hover { background-color: var(--fill-2); opacity: 1; }
.btn-icon {
  width: 2.375rem; height: 2.375rem;
  padding: 0; flex-shrink: 0;
}
.btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; }

/* Tombol tutup (alert/modal) */
.btn-close {
  box-sizing: content-box;
  width: .8em; height: .8em;
  margin-left: auto;
  padding: .25em;
  color: inherit;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0; border-radius: var(--radius-sm);
  opacity: .45; cursor: pointer;
}
.btn-close:hover { opacity: .8; }
body.dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ── Badge (netralkan merah bawaan F7) ────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3em .65em;
  width: auto; height: auto;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: transparent;
  white-space: nowrap;
  border-radius: 50rem;
}

/* ── Form ──────────────────────────────────────────────────────────
   Seragam dengan kolom login (ss-auth .ss-field): label 12px/600,
   kotak 44px radius 12px, isi 16px, fokus ring tema 13%.
   Selector label.form-label perlu unsur label agar menang dari
   style.css `label:not(.checkbox, ...)` yang (0,1,1). */
label.form-label, .form-label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
/* Prefiks unsur (input./select./textarea.) wajib: style.css menggaya
   `input[type="text"], ... textarea` (0,1,1) model filled abu — tanpa
   prefiks, .form-control (0,1,0) kalah dan gaya campur aduk. */
input.form-control, textarea.form-control, select.form-select,
.form-control, .form-select {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--input-bg);
  background-clip: padding-box;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input.form-control:focus, textarea.form-control:focus, select.form-select:focus,
.form-control:focus, .form-select:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .13);
}
input.form-control::placeholder, textarea.form-control::placeholder,
.form-control::placeholder { color: var(--text-3); font-weight: 400; }
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
  background-color: var(--fill-2);
  color: var(--text-2);
  cursor: not-allowed;
}
textarea.form-control { height: auto; min-height: 96px; padding: 10px 14px; }
input.form-control-sm, .form-control-sm { height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
input.form-control-lg, .form-control-lg { height: 48px; padding: 0 16px; font-size: 16px; border-radius: 12px; }

select.form-select, .form-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 11px;
}
/* Select banyak baris: tinggi mengikuti isi */
select.form-select[multiple], select.form-select[size]:not([size="1"]) {
  height: auto; padding: 10px 14px; background-image: none;
}

.form-control[type="file"] { padding: 9px 14px; }
.form-control[type="file"]::file-selector-button {
  margin: 0 .75rem 0 0;
  padding: .25rem .75rem;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  color: var(--primary);
  background-color: rgba(var(--primary-rgb), .1);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .15s;
}
.form-control[type="file"]::file-selector-button:hover {
  background-color: rgba(var(--primary-rgb), .18);
}

/* Toggle lihat password DI DALAM field — seragam dengan login (ss-auth):
   ikon polos di ujung kanan field, BUKAN tombol input-group terpisah.
   Markup: .ss-pw-wrap > input.form-control + button.ss-pw-toggle[data-pw-toggle=idInput]
   (handler klik global di ss-f7-bridge.js). */
.ss-pw-wrap { position: relative; }
.ss-pw-wrap > .form-control { padding-right: 46px; }
.ss-pw-wrap > .ss-pw-toggle {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0;
  background: none; color: var(--text-3); cursor: pointer;
  border-radius: 0 11px 11px 0;
}
.ss-pw-toggle:active { opacity: .5; }
.ss-pw-toggle i { font-size: 19px; }

/* Tombol aksi kecil DI DALAM field (mis. Cek username) — pil lunak
   menempel di ujung kanan kolom supaya terlihat menyatu. */
.ss-pw-wrap > .ss-field-btn {
  position: absolute; top: 50%; right: 7px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  width: auto; height: 30px; padding: 0 12px;   /* width:auto — style.css memaksa button 100% */
  border: 0; border-radius: 9px;
  font-size: 12.5px; font-weight: 600;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .1);
  cursor: pointer;
  transition: background-color .15s;
}
.ss-pw-wrap > .ss-field-btn:active { background: rgba(var(--primary-rgb), .22); }
.ss-pw-wrap > .ss-field-btn i { font-size: 15px; margin-right: 4px; }
.ss-pw-wrap:has(> .ss-field-btn) > .form-control { padding-right: 84px; }

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3.5px rgba(var(--danger-rgb), .18);
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--danger);
}
.is-invalid ~ .invalid-feedback { display: block; }
/* Input error di dalam pembungkus (mis. .ss-pw-wrap): feedback = kakak pembungkusnya */
:is(.ss-pw-wrap, .input-group):has(.is-invalid) ~ .invalid-feedback { display: block; }

/* Checkbox & radio */
.form-check {
  display: block;
  min-height: 1.375rem;
  padding-left: 1.75em;
  margin-bottom: .125rem;
}
.form-check .form-check-input { float: left; margin-left: -1.75em; }
.form-check-input {
  width: 1.15em; height: 1.15em;
  margin-top: .17em;
  vertical-align: top;
  appearance: none;
  background-color: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: .35em;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
  flex-shrink: 0;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23fff' cx='8' cy='8'/%3e%3c/svg%3e");
}
.form-check-input:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.form-check-input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }
.form-check-label { cursor: pointer; }

/* Switch iOS asli */
.form-switch { padding-left: 3.1em; }
.form-switch .form-check-input {
  width: 2.6em; height: 1.55em;
  margin-left: -3.1em;
  margin-top: -.05em;
  background-color: var(--fill);
  border: 0;
  border-radius: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='%23fff'/%3e%3c/svg%3e");
  background-position: left 2px center;
  background-size: 1.35em;
  background-repeat: no-repeat;
  transition: background-position .2s ease, background-color .2s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.form-switch .form-check-input:checked {
  background-color: var(--success);
  background-position: right 2px center;
}

/* Floating label */
.form-floating { position: relative; }
.form-floating > .form-control {
  height: 3.25rem;
  padding: 1.375rem .875rem .375rem;
}
.form-floating > label {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  padding: .9375rem .875rem;
  overflow: hidden;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity .12s ease, transform .12s ease;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--text-2);
  transform: scale(.78) translateY(-.55rem) translateX(.18rem);
}
.form-floating > .form-control::placeholder { color: transparent; }

/* Input group */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-floating { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-floating:not(:first-child) > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-floating:not(:last-child) > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text-2);
  background-color: var(--fill-2);
  border: 1px solid var(--input-border);
  border-radius: 12px;
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-sm > .form-control, .input-group-sm > .input-group-text { height: 36px; padding: 0 10px; font-size: 13px; }
.input-group-lg > .form-control, .input-group-lg > .input-group-text { height: 48px; padding: 0 16px; font-size: 16px; }
.input-group-merge .input-group-text { background: var(--input-bg); }
.input-group .btn { border-radius: 12px; }
.input-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Stepper skor (− angka +): PAKSA satu baris; tombol kotak kecil seukuran
   teksnya saja (lebar tetap 36px), angka mengisi sisa ruang di tengah */
.ig-stepper { flex-wrap: nowrap; }
.ig-stepper > .btn {
  flex: 0 0 36px;
  width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.ig-stepper > .form-control { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
/* Gradasi tipis: tombol − merah lembut, tombol + hijau lembut */
.ig-stepper > .btn:first-child {
  background: linear-gradient(140deg, rgba(255, 107, 97, .22) 0%, rgba(255, 59, 48, .12) 100%);
  border-color: rgba(255, 59, 48, .25);
  color: #e02d23;
}
.ig-stepper > .btn:last-child {
  background: linear-gradient(140deg, rgba(95, 221, 119, .22) 0%, rgba(52, 199, 89, .12) 100%);
  border-color: rgba(52, 199, 89, .3);
  color: #1ea94e;
}
.ig-stepper > .btn:first-child:hover { background: linear-gradient(140deg, rgba(255, 107, 97, .32) 0%, rgba(255, 59, 48, .2) 100%); opacity: 1; }
.ig-stepper > .btn:last-child:hover  { background: linear-gradient(140deg, rgba(95, 221, 119, .32) 0%, rgba(52, 199, 89, .2) 100%); opacity: 1; }
body.dark .ig-stepper > .btn:first-child { color: #ff6b61; }
body.dark .ig-stepper > .btn:last-child  { color: #34c759; }
/* Spinner bawaan browser disembunyikan — sudah ada tombol − / + sendiri */
.ig-stepper > input[type="number"]::-webkit-outer-spin-button,
.ig-stepper > input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ig-stepper > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Table ────────────────────────────────────────────────────── */
/* min-width:0 wajib: table-responsive adalah anak flex-column .card;
   tanpa ini min-width:auto membuat tabel lebar (text-nowrap) memaksa
   kartu & container melebar → overflow horizontal seluruh halaman. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.card > * { min-width: 0; }

/* Tabel input pemain turnamen: di layar sempit sel tabel boleh menciut di bawah
   lebar th, jadi kontrol posisi & no punggung diberi lantai lebar supaya kode
   posisi (3 huruf) dan 2 digit nomor tetap terbaca — sisanya scroll horizontal. */
#squadTable .squad-pos { min-width: 112px; }
#squadTable .squad-jersey { width: 64px; min-width: 64px; text-align: center; }
.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  color: var(--text);
  vertical-align: middle;
}
.table th, .table td {
  padding: .6875rem .875rem;
  border-bottom: 1px solid var(--separator);
  vertical-align: middle;
  text-align: inherit;
  height: auto;
}
.table thead th {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  border-bottom: 1px solid var(--separator-strong);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover td { background-color: var(--fill-2); }
.table-sm th, .table-sm td { padding: .4375rem .625rem; }
.table-light, .table-light th { background-color: var(--fill-2); }
.table-active, .table-active > td, .table-active > th { background-color: rgba(var(--primary-rgb), .07); }
.table > :not(caption) > * > * { background-color: transparent; }

/* ── Alert ────────────────────────────────────────────────────── */
/* display:block — konten inline (ikon + teks + <b>) mengalir normal;
   alert yang mau flex menambah .d-flex sendiri (semua sudah begitu).
   Flex implisit dulu memecah teks ber-<b> jadi flex-item terpisah → tumpang tindih. */
.alert {
  position: relative;
  display: block;
  padding: .8125rem 1rem;
  margin-bottom: 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  border: 0;
  border-radius: var(--radius-lg);
}
.alert.d-flex { align-items: center; }
.alert-success { background-color: rgba(var(--success-rgb), .13); color: #1d7a35; }
.alert-danger  { background-color: rgba(var(--danger-rgb), .12);  color: #c22a20; }
.alert-warning { background-color: rgba(var(--warning-rgb), .14); color: #a36400; }
.alert-info    { background-color: rgba(var(--info-rgb), .13);    color: #0c6da8; }
body.dark .alert-success { color: var(--success); }
body.dark .alert-danger  { color: var(--danger); }
body.dark .alert-warning { color: var(--warning); }
body.dark .alert-info    { color: var(--info); }
.alert-dismissible { padding-right: 2.75rem; }
.alert-dismissible .btn-close {
  position: absolute;
  top: 50%; right: .875rem;
  transform: translateY(-50%);
  padding: .25em;
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: .75rem;
  list-style: none;
}
.breadcrumb-item { display: flex; align-items: center; color: var(--text-2); }
.breadcrumb-item a { color: var(--text-2); }
.breadcrumb-item a:hover { color: var(--primary); opacity: 1; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding-inline: .5rem;
  color: var(--text-3);
  font-weight: 600;
}
.breadcrumb-item.active { color: var(--text); font-weight: 500; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .25rem;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.125rem;
  height: 2.125rem;
  padding: 0 .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius);
  transition: background-color .15s;
}
.page-link:hover { background-color: var(--fill-2); opacity: 1; }
.page-item.active .page-link { background-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { color: var(--text-3); pointer-events: none; }

/* ── Dropdown (Bootstrap JS) ──────────────────────────────────── */
.dropdown, .dropup { position: relative; }
.dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: .35em;
  vertical-align: .15em;
  border-top: .32em solid;
  border-right: .32em solid transparent;
  border-left: .32em solid transparent;
  opacity: .55;
}
.dropdown-toggle.hide-arrow::after, .hide-arrow.dropdown-toggle::after { display: none; }
.dropdown-menu {
  position: absolute;
  z-index: 11000;
  display: none;
  min-width: 12rem;
  padding: .375rem;
  margin: 0;
  font-size: .8125rem;
  color: var(--text);
  text-align: left;
  list-style: none;
  background-color: var(--elevated-bg);
  border: 1px solid var(--separator);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-item {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  clear: both;
  font-weight: 400;
  color: var(--text);
  text-align: inherit;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .12s;
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--fill-2); color: var(--text); opacity: 1; }
.dropdown-item.text-danger:hover { color: var(--danger); }
.dropdown-divider { height: 0; margin: .375rem 0; border-top: 1px solid var(--separator); }
.dropdown-header {
  padding: .5rem .75rem .25rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
}

/* ── Modal Bootstrap (sheet iOS) ──────────────────────────────── */
.modal {
  position: fixed;
  top: 0; left: 0;
  z-index: 12000;
  display: none;
  width: 100%; height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 520px;
  pointer-events: none;
  padding-inline: .75rem;
}
.modal.fade .modal-dialog { transform: translateY(24px) scale(.98); transition: transform .22s cubic-bezier(.32, .72, .28, 1); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}
.modal-sm { max-width: 340px; }
.modal-lg { max-width: 800px; }
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--elevated-bg);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  outline: 0;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.375rem .875rem;
  border-bottom: 1px solid var(--separator);
}
.modal-title { margin: 0; font-size: 1rem; font-weight: 600; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.25rem 1.375rem; }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .875rem 1.375rem 1.125rem;
  border-top: 1px solid var(--separator);
}
.modal-backdrop {
  position: fixed;
  top: 0; left: 0;
  z-index: 11900;
  width: 100vw; height: 100vh;
  background-color: var(--backdrop);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

/* ── Tabs Bootstrap (segmented control iOS) ───────────────────── */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.nav-tabs {
  gap: .125rem;
  padding: .1875rem;
  background-color: var(--fill);
  border-radius: var(--radius);
  border: 0;
  width: fit-content;
  max-width: 100%;
}
.nav-tabs .nav-link { border-radius: calc(var(--radius) - 3px); white-space: nowrap; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active {
  color: var(--text);
  background-color: var(--card-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.card-header-tabs { margin: 0; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ── List group ───────────────────────────────────────────────── */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--radius-lg);
}
.list-group-item {
  position: relative;
  display: block;
  padding: .8125rem 1.125rem;
  font-size: .8125rem;
  color: var(--text);
  background-color: var(--card-bg);
  border: 1px solid var(--separator);
  border-top-width: 0;
}
.list-group-item:first-child { border-top-width: 1px; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.list-group-flush { border-radius: 0; }
.list-group-flush .list-group-item { border-width: 0 0 1px; background: transparent; }
.list-group-flush .list-group-item:last-child { border-bottom-width: 0; }

/* ── Accordion Bootstrap ──────────────────────────────────────── */
.accordion { border-radius: var(--radius-lg); }
.accordion-item {
  background-color: var(--card-bg);
  border: 1px solid var(--separator);
  border-top-width: 0;
  list-style: none;
}
.accordion-item:first-of-type { border-top-width: 1px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.accordion-item:last-of-type { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.accordion-item:only-of-type { border-radius: var(--radius-lg); }
.accordion-flush .accordion-item { border-inline: 0; border-radius: 0; }
.accordion-header { margin: 0; }
.accordion-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .9375rem 1.125rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}
.accordion-button::after {
  content: "";
  width: 14px; height: 14px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center/contain no-repeat;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion-body { padding: .25rem 1.125rem 1.125rem; }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar {
  position: relative;
  display: inline-block;
  width: 2.375rem; height: 2.375rem;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-weight: 600;
}
.avatar-sm { width: 1.75rem; height: 1.75rem; }
.avatar-lg { width: 3.25rem; height: 3.25rem; }
.avatar-xl { width: 4.25rem; height: 4.25rem; }
.avatar-online::after {
  content: "";
  position: absolute;
  right: 1px; bottom: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 0 2px var(--card-bg);
}

/* Ukuran avatar/ikon yang sering dipakai view */
.avatar-38 { width: 38px !important; height: 38px !important; }
.avatar-42 { width: 42px !important; height: 42px !important; }
.avatar-52 { width: 52px !important; height: 52px !important; }
.avatar-80 { width: 80px !important; height: 80px !important; }
.avatar-90 { width: 90px !important; height: 90px !important; }
.w-40px { width: 40px !important; }

/* Ikon dekoratif & ukuran teks non-standar */
.fs-tiny    { font-size: .625rem !important; }
.fs-icon-lg  { font-size: 2rem !important; }
.fs-icon-xl  { font-size: 2.5rem !important; }
.fs-icon-2xl { font-size: 3rem !important; }
.icon-decor  { opacity: .3 !important; }

/* ── Spinner ──────────────────────────────────────────────────── */
.spinner-border {
  display: inline-block;
  width: 1.5rem; height: 1.5rem;
  vertical-align: -.125em;
  border: .18em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ios-spin .7s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .15em; }
@keyframes ios-spin { to { transform: rotate(360deg); } }

/* ── Tooltip (Bootstrap JS — menang dari .tooltip milik F7) ───── */
.tooltip {
  position: absolute;
  z-index: 13000;
  font-family: var(--font-sans);
  font-size: .6875rem;
  opacity: 0;
}
.tooltip.show { opacity: 1; }
.tooltip-inner {
  max-width: 220px;
  padding: .375rem .625rem;
  color: #fff;
  text-align: center;
  background-color: rgba(28, 28, 30, .92);
  border-radius: var(--radius-sm);
}
.tooltip-arrow { display: none; }

/* ════════════════════════════════════════════════════════════════
   06. STAT CARD (tile ringkasan bisa diklik — dipakai view lama)
   ════════════════════════════════════════════════════════════════ */
.stat-card {
  display: block;
  color: inherit;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.32, .72, .28, 1), box-shadow .18s ease;
}
.stat-card:hover {
  opacity: 1;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.stat-card:active { transform: scale(.97); box-shadow: var(--shadow-card); }
.stat-card .card-body { padding: 1rem 1.125rem; }
.stat-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
}
.stat-ic i { font-size: 22px; line-height: 1; }
.stat-ic-primary { background: rgba(var(--primary-rgb), .13); color: var(--primary); }
.stat-ic-success { background: rgba(var(--success-rgb), .14); color: var(--success); }
.stat-ic-warning { background: rgba(var(--warning-rgb), .16); color: var(--warning); }
.stat-ic-danger  { background: rgba(var(--danger-rgb), .14);  color: var(--danger); }
.stat-ic-info    { background: rgba(var(--info-rgb), .16);    color: var(--info); }
.stat-ic-indigo  { background: rgba(88, 86, 214, .14);  color: #5856d6; }
.stat-ic-pink    { background: rgba(255, 45, 85, .12);  color: #ff2d55; }
body.dark .stat-ic-indigo { color: #7d7aff; }
body.dark .stat-ic-pink   { color: #ff375f; }

.stat-card-primary { background-image: linear-gradient(135deg, rgba(var(--primary-rgb), .15), rgba(var(--primary-rgb), 0) 62%); }
.stat-card-success { background-image: linear-gradient(135deg, rgba(var(--success-rgb), .16), rgba(var(--success-rgb), 0) 62%); }
.stat-card-warning { background-image: linear-gradient(135deg, rgba(var(--warning-rgb), .17), rgba(var(--warning-rgb), 0) 62%); }
.stat-card-danger  { background-image: linear-gradient(135deg, rgba(var(--danger-rgb), .15),  rgba(var(--danger-rgb), 0) 62%); }
.stat-card-info    { background-image: linear-gradient(135deg, rgba(var(--info-rgb), .17),    rgba(var(--info-rgb), 0) 62%); }
.stat-card-indigo  { background-image: linear-gradient(135deg, rgba(88, 86, 214, .16), rgba(88, 86, 214, 0) 62%); }
.stat-card-pink    { background-image: linear-gradient(135deg, rgba(255, 45, 85, .14), rgba(255, 45, 85, 0) 62%); }
.stat-chev {
  font-size: 20px;
  color: var(--text-3);
  transition: transform .18s ease, color .18s ease;
}
.stat-card:hover .stat-chev { transform: translateX(3px); color: var(--text-2); }
.card .stat-value, .stat-value {
  margin-top: .875rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-label {
  margin-top: .125rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .stat-card .card-body { padding: .6875rem .75rem; }
  .stat-ic { width: 32px; height: 32px; border-radius: 10px; }
  .stat-ic i { font-size: 17px; }
  .stat-chev { font-size: 16px; }
  .card .stat-value, .stat-value { margin-top: .5625rem; font-size: 1.25rem; }
  .stat-label { font-size: .6563rem; }
}

/* Alias petak ikon sec-head lama (ios) → palet ss-f7 baru */
.sec-head .sh-ic-primary { background: rgba(0,122,255,.14);  color: #007aff; }
.sec-head .sh-ic-success { background: rgba(52,199,89,.16);  color: #34c759; }
.sec-head .sh-ic-warning { background: rgba(255,149,0,.16);  color: #ff9500; }
.sec-head .sh-ic-danger  { background: rgba(255,59,48,.14);  color: #ff3b30; }
.sec-head .sh-ic-info    { background: rgba(48,176,199,.15); color: #30b0c7; }

/* ════════════════════════════════════════════════════════════════
   07. SKIN VENDOR
   ════════════════════════════════════════════════════════════════ */

/* ── Select2 ──────────────────────────────────────────────────── */
/* Tinggi & radius mengikuti .form-control (seragam kolom login) */
.select2-container { width: 100% !important; font-size: 16px; font-family: var(--font-sans); }
.select2-container--default .select2-selection--single {
  height: 44px;
  display: flex;
  align-items: center;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  color: var(--text);
  padding-left: 14px;
  padding-right: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-3); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-3) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-3) transparent;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 8px;
  color: var(--text-3);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .13);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--fill-2);
  color: var(--text-2);
}
.select2-dropdown {
  z-index: 99999;
  background-color: var(--elevated-bg);
  border: 1px solid var(--separator);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.select2-search--dropdown { padding: .5rem; }
.select2-search--dropdown .select2-search__field {
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  padding: .4rem .6rem;
  outline: none;
}
.select2-search--dropdown .select2-search__field:focus { border-color: var(--primary); }
.select2-results__options { max-height: 240px; overflow-y: auto; }
.select2-container--default .select2-results__option { color: var(--text); padding: .4375rem .75rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(var(--primary-rgb), .1);
  color: var(--primary);
}
.select2-results__option[role=group] .select2-results__group {
  font-weight: 600;
  font-size: .6563rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
}

/* ── SweetAlert2 ──────────────────────────────────────────────── */
.swal2-container { z-index: 999999 !important; }
.swal2-popup {
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--elevated-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-pop) !important;
}
.swal2-title { font-size: 1.125rem !important; font-weight: 600 !important; color: var(--text) !important; }
.swal2-html-container { font-size: .875rem !important; color: var(--text-2) !important; }
.swal2-actions { gap: .5rem; }

/* ── Chart (ApexCharts / Chart.js) ────────────────────────────── */
.apexcharts-canvas text { font-family: var(--font-sans) !important; fill: var(--text-2); }
.apexcharts-tooltip {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-pop) !important;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   08. GAYA HALAMAN SPESIFIK
   ════════════════════════════════════════════════════════════════ */

/* operator/dashboard — header kartu chart */
.chart-card-header {
  padding: 1.125rem 1.5rem .75rem;
  border-bottom: 1px solid var(--separator);
}

/* operator/turnamen/show — kolom # & Klub sticky saat tabel digeser */
.klasemen-table th:nth-child(1), .klasemen-table td:nth-child(1) {
  position: sticky; left: 0; z-index: 2;
  background-color: var(--card-bg);
}
.klasemen-table th:nth-child(2), .klasemen-table td:nth-child(2) {
  position: sticky; left: 40px; z-index: 2;
  background-color: var(--card-bg);
  box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .15);
}
.klasemen-table thead th:nth-child(1), .klasemen-table thead th:nth-child(2) {
  z-index: 3;
  background-color: var(--bg);
}

/* operator/dashboard — kartu chart & kalender pilih turnamen */
.chart-box { height: 300px; position: relative; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.cal-dot-green { background: #34c759; }
.cal-dot-blue  { background: #0a84ff; }
.cal-rank { font-size: 1rem; }
.cal-rank-1 { color: #f6c90e; }
.cal-rank-2 { color: #b0b0b0; }
.cal-rank-3 { color: #cd7f32; }
.cal-team-logo {
  width: 28px; height: 28px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-team-logo-empty { background: rgba(var(--primary-rgb), .1); color: var(--primary); }
img.ss-row-ic.cal-logo-img { object-fit: cover; }

/* partials/pemain-card — kartu pemain iOS kompak (foto kiri full-height, minimalis) */
.pemain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.pemain-card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 76px;
  background-color: var(--card-bg);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  /* visible (bukan hidden) supaya dropdown titik-tiga tidak terpotong tepi kartu.
     Pembulatan foto full-height dipindah ke .pemain-card__photo di bawah. */
  overflow: visible;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pemain-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

/* Hero = area klik (foto + isi); tombol menu di luar anchor */
.pemain-card__hero {
  display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; color: inherit;
}
a.pemain-card__hero:hover { opacity: 1; }

/* Foto pemain: penuh setinggi kartu di sisi kiri */
.pemain-card__photo {
  position: relative; flex-shrink: 0;
  width: 76px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--primary-rgb), .1); color: var(--primary); font-size: 24px;
  overflow: hidden;
  /* Bulatkan sudut kiri sendiri karena kartu kini overflow:visible */
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
.pemain-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Nomor punggung — badge kecil di pojok foto */
.pemain-card__num {
  position: absolute; left: 5px; bottom: 5px;
  min-width: 20px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(0, 0, 0, .58); color: #fff;
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* Titik status di pojok atas foto */
.pemain-card__dot {
  position: absolute; top: 5px; right: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9); background: var(--text-3);
}
.pemain-card__dot.on        { background: var(--success); }
.pemain-card__dot.injured   { background: var(--warning); }
.pemain-card__dot.suspended { background: var(--danger); }

/* Isi ringkas di kanan foto */
.pemain-card__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 7px 34px 7px 11px;
}
.pemain-card__name {
  display: flex; align-items: center; gap: 3px;
  font-size: .82rem; font-weight: 650; color: var(--text); letter-spacing: -.01em;
}
.pemain-card__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pemain-card__name .ri-verified-badge-fill { flex-shrink: 0; color: var(--success); font-size: .82rem; }
.pemain-card__meta {
  font-size: .68rem; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pemain-card__chips { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 1px; overflow: hidden; }
.pemain-chip {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  padding: .2em .5em; font-size: .6rem; font-weight: 600; line-height: 1;
  border-radius: 6px; background: var(--fill); color: var(--text-2); white-space: nowrap;
}
.pemain-chip i { font-size: .72rem; }
.pemain-chip--pos     { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.pemain-chip--success { background: rgba(var(--success-rgb), .14); color: #1a8a3d; }
body.dark .pemain-chip--success { color: var(--success); }
.pemain-chip--warn    { background: rgba(var(--warning-rgb), .16); color: #c77700; }
body.dark .pemain-chip--warn { color: var(--warning); }
.pemain-chip--danger  { background: rgba(var(--danger-rgb), .13); color: var(--danger); }
.pemain-chip--muted   { background: var(--fill); color: var(--text-3); }
/* Nama klub afiliasi terkini pemain (Player::displayTeam) — boleh menyusut
   dan terpotong elipsis agar nama panjang tidak meluber dari kartu */
.pemain-chip--klub {
  background: rgba(var(--primary-rgb), .12); color: var(--primary);
  min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis;
}
.pemain-chip--klub i { flex-shrink: 0; }

/* Tombol titik-tiga di pojok kanan atas kartu */
.pemain-card__menu {
  position: absolute; top: 4px; right: 4px; z-index: 2;
}
.pemain-card__menu > .klub-act--more {
  width: 28px; height: 28px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 1rem;
  transition: background-color .15s ease, color .15s ease;
}
.pemain-card__menu > .klub-act--more:hover { background: var(--fill); color: var(--text); }

/* Saat dropdown titik-tiga terbuka, angkat kartu di atas kartu lain. Tanpa ini
   dropdown tertutup kartu di bawahnya: parent .pemain-card__menu (z-index:2 +
   absolute) membentuk stacking context yang mengurung z-index dropdown. */
.pemain-card:has(.dropdown-menu.show) { z-index: 30; }

/* Dropdown aksi kartu pemain — minimalis, warna item mengikuti tombol Edit
   (warning) & Hapus (danger) pada halaman Manajemen Klub (.klub-act--*). */
.pemain-menu { min-width: 9rem; padding: 5px; border-radius: 12px; }
.pemain-menu .dropdown-item {
  display: flex; align-items: center;
  padding: 7px 10px; border-radius: 8px;
  font-size: .78rem; font-weight: 600;
}
.pemain-menu .dropdown-item i { font-size: .95rem; }
.pemain-menu__edit { color: var(--warning); }
.pemain-menu__edit:hover, .pemain-menu__edit:focus { color: var(--warning); background: rgba(var(--warning-rgb), .13); }
.pemain-menu__del { color: var(--danger); }
.pemain-menu__del:hover, .pemain-menu__del:focus { color: var(--danger); background: rgba(var(--danger-rgb), .12); }

/* Aksi yang dinonaktifkan Super Admin: tampil abu-abu tapi TETAP bisa diklik
   supaya bisa memunculkan popup penjelasan (jangan pakai .disabled Bootstrap
   yang mematikan pointer-events). Dipakai kartu pemain & tombol header. */
.pemain-act-off { color: var(--text-3) !important; opacity: .6; cursor: not-allowed; }
.pemain-act-off:hover, .pemain-act-off:focus { color: var(--text-3) !important; background-color: transparent; }

/* Bila dipasang pada TOMBOL (mis. "Buat Pemain Baru"): tampil abu-abu penuh,
   lebar tetap mengikuti panjang teks (btn sudah inline-flex). */
.btn.pemain-act-off {
  width: auto;
  background-color: var(--fill) !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
  opacity: 1;
}
.btn.pemain-act-off:hover, .btn.pemain-act-off:focus {
  background-color: var(--fill) !important;
  color: var(--text-2) !important;
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════
   09. HALAMAN MANDIRI (auth & error — tanpa cangkang F7)
   Font Rubik dideklarasikan di sini karena style.css tidak dimuat.
   ════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}

body.ss-standalone {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ss-standalone.dark { color-scheme: dark; }
/* Selektor tanpa elemen `body` agar spesifisitas tetap (0,1,0) — kalau
   pakai `body.ss-standalone` jadi (0,1,1) dan mengalahkan .btn (teks
   tombol-anchor jadi biru di atas biru = tak terlihat). */
.ss-standalone :where(a:not(.btn)) { color: var(--primary); text-decoration: none; }
.ss-standalone :where(a:not(.btn)):hover { opacity: .82; }
body.ss-standalone p { margin: 0 0 1rem; }
body.ss-standalone ul, body.ss-standalone ol { padding-left: 1.5rem; margin-top: 0; }

/* Logo per tema — konvensi publik: logo-dark utk latar terang, logo-light utk gelap */
body.ss-standalone:not(.dark) .logo-light { display: none; }
body.ss-standalone.dark .logo-dark { display: none; }

/* ── Halaman auth ─────────────────────────────────────────────── */
.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
}
.authentication-inner { width: 100%; display: flex; align-items: center; justify-content: center; }
.authentication-bg { background-color: var(--card-bg); }
.auth-cover-brand {
  position: absolute;
  z-index: 5;
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
}
.auth-cover-brand img { height: 40px; }
.authentication-wrapper .authentication-bg {
  border-radius: 0;
  min-height: 100vh;
  width: 100%;
}
@media (min-width: 992px) {
  .authentication-wrapper { background-color: var(--bg); }
  .authentication-wrapper .authentication-bg {
    max-width: 560px;
    min-height: auto;
    margin: 3.5rem auto;
    border-radius: 24px;
    box-shadow: var(--shadow-card);
  }
}

/* ── Halaman error ────────────────────────────────────────────── */
.error-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.error-page {
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 520px;
  width: 100%;
}
.error-page > .error-brand img { height: 38px; }
.error-code {
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;
}
.error-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.error-icon-wrap i { font-size: 2.2rem; }
.error-divider {
  width: 48px; height: 4px;
  border-radius: 2px;
  margin: 1rem auto;
}

/* ════════════════════════════════════════════════════════════════
   10. GLUE F7 — perilaku konten jembatan di dalam page-content
   ════════════════════════════════════════════════════════════════ */
/* Flash session di atas konten */
.ss-flash { padding: 12px 16px 0; }
.ss-flash .alert:last-child { margin-bottom: 0; }

/* Pembungkus kartu bridge di halaman native (page-content tanpa padding samping) */
.ss-pad { padding: 0 16px; }

/* Kartu di mode gelap butuh garis tepi (selaras aturan ss-f7.css) */
body.dark .pemain-card,
body.dark .list-group-item,
body.dark .modal-content { border: 1px solid rgba(255, 255, 255, .13); }

/* ════════════════════════════════════════════════════════════════
   11. KARTU KLUB — grid kartu iOS (manajemen/klub/index)
   ════════════════════════════════════════════════════════════════ */
/* Bar sortir cepat — teks pil minimalis, tiap pil selebar labelnya & membungkus
   ke baris berikut bila sempit (tidak tersembunyi di kanan). */
.klub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.klub-filter {
  flex: 0 0 auto;
  width: auto;
  padding: 5px 12px;
  border: 0;
  border-radius: 50rem;
  background: linear-gradient(180deg, var(--fill-2), var(--fill));
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
a.klub-filter { text-decoration: none; } /* chip bisa berupa <a> (sortir server-side) */
.klub-filter:hover { color: var(--text); background: linear-gradient(180deg, var(--fill), var(--fill)); }
.klub-filter.on { color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.klub-filter__n {
  margin-left: 5px;
  font-size: .6875rem;
  font-weight: 700;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.klub-filter.on .klub-filter__n { opacity: .85; }

.klub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.klub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.klub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
body.dark .klub-card { border: 1px solid rgba(255, 255, 255, .13); }

/* Aksen tipis di sisi kiri — biru untuk klub aktif, merah kalau terkunci */
.klub-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: .9;
}
.klub-card.is-locked::before { background: var(--danger); }

/* Bagian atas: logo + identitas (klik → detail) */
.klub-card__hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  color: inherit;
}
.klub-card__hero:hover { opacity: 1; }
.klub-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary);
  font-size: 22px;
  overflow: hidden;
}
.klub-card__logo img { width: 100%; height: 100%; object-fit: cover; }

.klub-card__id { min-width: 0; flex: 1 1 auto; }
.klub-card__name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.klub-card__meta {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titik status aktif/nonaktif */
.klub-card__state {
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 4px;
}
.klub-card__state.on  { background: var(--success); box-shadow: 0 0 0 3px rgba(var(--success-rgb), .18); }
.klub-card__state.off { background: var(--text-3); }

/* Baris chip info */
.klub-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 14px;
}
.klub-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .3em .6em;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
  background: var(--fill);
  color: var(--text-2);
}
.klub-chip i { font-size: .85rem; }
.klub-chip--user   { background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 600; }
.klub-chip--warn   { background: rgba(var(--warning-rgb), .15); color: #c77700; }
body.dark .klub-chip--warn { color: var(--warning); }
.klub-chip--danger { background: rgba(var(--danger-rgb), .13); color: var(--danger); font-weight: 600; }

/* Baris aksi */
.klub-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--separator);
}
.klub-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  flex: 1 1 auto;
  white-space: nowrap;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.klub-act:active { transform: scale(.95); }

/* Varian sama-rata (halaman Klub manajemen): ketiga tombol sama lebar. */
.klub-card__actions--fit .klub-act { flex: 1 1 0; }

/* Varian satu baris (halaman Akun Operator EO): tombol tidak membungkus
   ke bawah, lebar tiap tombol mengikuti panjang teksnya. */
.klub-card__actions--row { flex-wrap: nowrap; }
.klub-card__actions--row .klub-act { flex: 0 0 auto; white-space: nowrap; }

/* Setiap aksi punya warna sendiri: latar tint lembut + ikon warna penuh */
.klub-act--pemain { color: var(--success); background: rgba(var(--success-rgb), .12); }
.klub-act--pemain:hover { background: rgba(var(--success-rgb), .2); }
.klub-act--warn   { color: var(--warning); background: rgba(var(--warning-rgb), .13); }
.klub-act--warn:hover { background: rgba(var(--warning-rgb), .22); }
.klub-act--reset  { color: var(--info); background: rgba(var(--info-rgb), .14); }
.klub-act--reset:hover { background: rgba(var(--info-rgb), .24); }
.klub-act--danger { color: var(--danger); background: rgba(var(--danger-rgb), .12); }
.klub-act--danger:hover { background: rgba(var(--danger-rgb), .22); }

/* ════════════════════════════════════════════════════════════════
   12. POPUP GLOBAL — kartu kaca + gradien (gaya "Segera Hadir")
   Mesin: ss-popup engine di cs-confirm.js; menggantikan SEMUA SweetAlert
   di admin (window.Swal di-alias). Nada warna per-tone: danger | warning |
   success | primary | info — ikon & tombol utama ikut gradiennya.
   ════════════════════════════════════════════════════════════════ */
.ss-cs-overlay {
  position: fixed; inset: 0; z-index: 13600;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 20px);
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.ss-cs-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

.ss-cs-card {
  /* Default tone = primary; tiap kelas tone menimpanya */
  --cs-grad: linear-gradient(140deg, #4facff 0%, #0a84ff 55%, #0060df 100%);
  --cs-glow: rgba(10, 132, 255, .42);
  position: relative; width: 100%; max-width: 300px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 22px 20px 18px; border-radius: 22px; text-align: center;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 56px rgba(20, 10, 40, .38), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: scale(.86) translateY(16px); opacity: 0;
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.3), opacity .3s ease;
}
.ss-cs-overlay.open .ss-cs-card { transform: scale(1) translateY(0); opacity: 1; }
body.dark .ss-cs-card {
  background: rgba(30, 30, 34, .9); border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.ss-cs-danger  { --cs-grad: linear-gradient(140deg, #ff6b61 0%, #ff3b30 55%, #d70015 100%); --cs-glow: rgba(255, 59, 48, .42); }
.ss-cs-warning { --cs-grad: linear-gradient(140deg, #ffc14d 0%, #ff9500 55%, #e57a00 100%); --cs-glow: rgba(255, 149, 0, .42); }
.ss-cs-success { --cs-grad: linear-gradient(140deg, #5fdd77 0%, #34c759 55%, #1ea94e 100%); --cs-glow: rgba(52, 199, 89, .42); }
.ss-cs-primary { --cs-grad: linear-gradient(140deg, #4facff 0%, #0a84ff 55%, #0060df 100%); --cs-glow: rgba(10, 132, 255, .42); }
.ss-cs-info    { --cs-grad: linear-gradient(140deg, #64d2ff 0%, #32ade6 55%, #0a84ff 100%); --cs-glow: rgba(50, 173, 230, .42); }

/* Ikon gradien + pendar mengambang */
.ss-cs-icon {
  position: relative; width: 60px; height: 60px; margin: 0 auto 14px;
  border-radius: 19px;
  background: var(--cs-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px var(--cs-glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: ss-cs-bob 3.4s ease-in-out infinite;
}
@keyframes ss-cs-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.ss-cs-icon i { color: #fff; font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .25)); }
.ss-cs-spark { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 7px rgba(255, 255, 255, .9); }
.ss-cs-spark-1 { width: 5px; height: 5px; top: -4px; right: 6px; animation: ss-cs-twinkle 1.8s ease-in-out infinite; }
.ss-cs-spark-2 { width: 4px; height: 4px; bottom: 1px; left: -5px; animation: ss-cs-twinkle 2.3s ease-in-out .5s infinite; }
.ss-cs-spark-3 { width: 3px; height: 3px; top: 7px; right: -6px; animation: ss-cs-twinkle 2s ease-in-out .9s infinite; }
@keyframes ss-cs-twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }

.ss-cs-title { margin: 0 0 5px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.ss-cs-desc { margin: 0 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ss-cs-desc:last-child { margin-bottom: 0; }
.ss-cs-desc b { color: var(--text); font-weight: 700; }
.ss-cs-desc p { margin: 0 0 .5rem; }
.ss-cs-desc p:last-child { margin-bottom: 0; }

/* Gambar pratinjau di dalam popup ([data-img-popup]) */
.ss-cs-desc .ss-cs-img {
  display: block; max-width: 100%; max-height: 62vh;
  margin: 4px auto 0; border-radius: 12px;
  object-fit: contain;
}

/* Field input di dalam popup (select/date/text) */
.ss-cs-field { margin: 0 0 14px; text-align: left; }
.ss-cs-input {
  display: block; width: 100%;
  padding: 9px 12px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 12px;
  appearance: none;
}
select.ss-cs-input {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 13px;
}
.ss-cs-input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
.ss-cs-error { margin: -8px 0 12px; font-size: 12px; font-weight: 600; color: var(--danger); }

/* row-reverse: markup [OK, Batal] → Batal di kiri, OK di kanan */
.ss-cs-actions { display: flex; flex-direction: row-reverse; gap: 8px; }
.ss-cs-actions:only-child, .ss-cs-btn:only-child { }
.ss-cs-btn {
  flex: 1; min-height: 42px; padding: 6px 14px; border: 0; border-radius: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.1px;
  background: var(--cs-grad);
  box-shadow: 0 8px 18px var(--cs-glow);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1.4), box-shadow .2s ease, filter .2s ease;
}
.ss-cs-btn:active { transform: scale(.95); }
@media (hover: hover) { .ss-cs-btn:hover { filter: brightness(1.06); transform: translateY(-2px); } }
/* Varian kecil untuk tombol di DALAM konten popup (mis. Download QR) —
   chip gradasi lembut: latar tint biru bergradasi + teks biru; lebar
   mengikuti panjang teksnya (inline-flex + width fit-content) */
.ss-cs-btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: fit-content; min-height: 30px; padding: 3px 14px;
  border: 0; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #0a84ff; letter-spacing: -.1px;
  background: linear-gradient(140deg, rgba(79, 172, 255, .22) 0%, rgba(10, 132, 255, .14) 100%);
  transition: transform .18s ease, background-color .2s ease, filter .2s ease;
}
.ss-cs-btn-sm:active { transform: scale(.95); }
@media (hover: hover) { .ss-cs-btn-sm:hover { filter: brightness(1.05); background: linear-gradient(140deg, rgba(79, 172, 255, .3) 0%, rgba(10, 132, 255, .2) 100%); } }
body.dark .ss-cs-btn-sm { color: #4facff; }
.ss-cs-cancel {
  flex: 1; min-height: 42px; padding: 6px 14px; border: 0; border-radius: 13px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--fill);
  transition: background-color .2s ease, transform .15s ease;
}
.ss-cs-cancel:active { transform: scale(.96); background: var(--fill-2); }

/* Fokus: tanpa cincin hitam bawaan; hanya tampil saat navigasi keyboard */
.ss-cs-btn:focus, .ss-cs-cancel:focus, .ss-cs-input:focus { outline: none; }
.ss-cs-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.ss-cs-cancel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ss-cs-overlay, .ss-cs-card { transition: opacity .2s ease; }
  .ss-cs-card { transform: none; }
  .ss-cs-icon, .ss-cs-spark { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   13. JUDUL MONOKROM — judul card & section selalu warna teks utama
   (gelap saat light, terang saat dark), TANPA aksen warna. Tidak
   menyentuh badge, tombol, atau isi non-judul. Selector diberi
   spesifisitas > .text-* (utility Bootstrap yang ber-!important).
   ════════════════════════════════════════════════════════════════ */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .card-title, .sec-head h2 {
  color: var(--title-color, var(--text)) !important;
}
.card h1 i, .card h2 i, .card h3 i, .card h4 i, .card h5 i, .card h6 i,
.card .card-title i {
  color: var(--title-color, var(--text)) !important;
}
/* Ikon-chip pada judul section → monokrom (abu netral, ikon gelap) */
.sec-head .sh-ic {
  background: rgba(120, 120, 128, .14) !important;
  color: var(--title-color, var(--text)) !important;
}
body.dark .sec-head .sh-ic { background: rgba(255, 255, 255, .12) !important; }

/* ════════════════════════════════════════════════════════════════
   SUSUNAN PEMAIN TURNAMEN (operator/turnamen/{id}/pemain)
   Kartu laga collapsible + roster gaya daftar iOS — mobile-first
   ════════════════════════════════════════════════════════════════ */

/* Ringkasan aturan turnamen: grid statistik responsif */
.lnp-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
}
.lnp-rule .l { display: block; font-size: .72rem; color: var(--text-3); margin-bottom: 2px; }
.lnp-rule .v { display: block; font-weight: 600; font-size: .85rem; color: var(--text); }

/* Pil status kecil (dipakai di header laga, kolom klub, & aturan) */
.lnp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.lnp-pill.green { background: rgba(var(--success-rgb), .13); color: var(--success); }
.lnp-pill.gray  { background: var(--fill); color: var(--text-3); }
.lnp-pill.red   { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
.lnp-pill.blue  { background: rgba(var(--info-rgb), .14); color: var(--info); }

/* Daftar laga */
.lnp-list { display: flex; flex-direction: column; }
.lnp-item { border-top: 1px solid var(--separator); }
.lnp-item:first-child { border-top: 0; }

.lnp-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 16px;
  background: none; border: 0; text-align: left;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: background-color .15s ease;
}
.lnp-head:hover { background: var(--fill); }
.lnp-info { min-width: 0; flex: 1 1 auto; }
.lnp-teams {
  display: block; font-weight: 600; font-size: .875rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnp-teams em { font-style: normal; font-weight: 500; font-size: .72rem; color: var(--text-3); padding: 0 2px; }
.lnp-meta { display: block; font-size: .72rem; color: var(--text-3); margin-top: 1px; }
.lnp-flags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.lnp-caret { color: var(--text-3); font-size: 1.15rem; transition: transform .2s ease; }
.lnp-head:not(.collapsed) .lnp-caret { transform: rotate(180deg); }

.lnp-body { padding: 2px 16px 16px; }
.lnp-lockinfo {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .74rem; color: var(--text-3);
  background: var(--fill); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px;
}
.lnp-lockinfo i { flex-shrink: 0; margin-top: 1px; }

/* Dua kolom klub → satu kolom di ponsel */
.lnp-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 767.98px) { .lnp-sides { grid-template-columns: 1fr; } }

.lnp-side {
  min-width: 0;
  border: 1px solid var(--separator);
  border-radius: 14px;
  padding: 12px 14px;
}
.lnp-side__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.lnp-side__name {
  font-weight: 600; font-size: .84rem; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Roster: nomor punggung bulat + nama + chip posisi */
.lnp-group {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin: 10px 2px 4px;
}
.lnp-roster { list-style: none; margin: 0; padding: 0; }
.lnp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px; border-top: 1px solid var(--separator);
}
.lnp-roster .lnp-row:first-child { border-top: 0; }
.lnp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px;
  background: rgba(var(--primary-rgb), .1); color: var(--primary);
  font-size: .72rem; font-weight: 700;
}
.lnp-roster--sub .lnp-num { background: var(--fill); color: var(--text-3); }
.lnp-pname {
  flex: 1 1 auto; min-width: 0;
  font-size: .8rem; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnp-cap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; border-radius: 5px;
  background: rgba(var(--warning-rgb), .18); color: #c77700;
  font-size: .6rem; font-weight: 800;
}
body.dark .lnp-cap { color: var(--warning); }
.lnp-pos {
  flex-shrink: 0; font-size: .68rem; font-weight: 600; color: var(--text-3);
  background: var(--fill); border-radius: 6px; padding: 2px 7px;
}

.lnp-note { font-size: .7rem; color: var(--text-3); margin-top: 8px; }
.lnp-empty { font-size: .78rem; color: var(--text-3); margin: 6px 0 0; }
.lnp-lockform { margin-top: 10px; }
.lnp-lockform__group { max-width: 170px; }

/* Kartu kosong (tidak ada laga) */
.lnp-none { text-align: center; color: var(--text-3); padding: 40px 16px; font-size: .85rem; }
.lnp-none i { display: block; font-size: 1.8rem; margin-bottom: 6px; opacity: .6; }

/* ════════════════════════════════════════════════════════════════
   BAGAN BABAK GUGUR (detail turnamen) — kolom per babak + garis
   penghubung antar laga. Geometri: tiap kolom direntang setinggi
   kolom terpanjang, tiap laga menempati "slot" ber-flex:1 sehingga
   titik tengah slot babak N tepat di tengah pasangan feedernya.
   ══════════════════════════════════════════════════════════════ */
.bk-wrap {
  --bk-line: rgba(115, 103, 240, .4);
  display: flex;
  column-gap: 24px;
  align-items: stretch;
  min-width: max-content;
  padding: 2px 6px 6px 2px;
}
body.dark .bk-wrap { --bk-line: rgba(154, 143, 255, .5); }
.bk-round { width: 210px; min-width: 210px; display: flex; flex-direction: column; }
.bk-col { flex: 1; display: flex; flex-direction: column; }
.bk-slot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}
/* Garis KELUAR (kanan): stub mendatar di tengah laga + ruas vertikal
   menuju titik temu pasangan (ganjil turun, genap naik) */
.bk-round:not(:last-child) .bk-slot::after {
  content: '';
  position: absolute;
  right: -12px;
  width: 12px;
  border-right: 2px solid var(--bk-line);
}
.bk-round:not(:last-child) .bk-slot:nth-child(odd)::after  { top: 50%;    height: 50%; border-top: 2px solid var(--bk-line); }
.bk-round:not(:last-child) .bk-slot:nth-child(even)::after { bottom: 50%; height: 50%; border-bottom: 2px solid var(--bk-line); }
/* Laga ganjil tanpa pasangan di bawahnya: garis lurus saja */
.bk-round:not(:last-child) .bk-slot:nth-child(odd):last-child::after { height: 0; border-right: 0; }
/* Garis MASUK (kiri) dari babak sebelumnya */
.bk-round:not(:first-child) .bk-slot::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 12px;
  top: 50%;
  border-top: 2px solid var(--bk-line);
}
/* Perebutan Tempat 3: digantung di bawah bagan, menjorok di antara kolom
   Semi Final dan Final. Dijangkar ke DASAR kolom Final (semua kolom sama
   tinggi karena align-items: stretch) sehingga jaraknya pasti, lalu ruang
   bawahnya dipesan lewat padding bk-has-p3 — tidak mungkin menimpa konten. */
.bk-wrap.bk-has-p3 { padding-bottom: 150px; }
.bk-round.bk-anchor-p3 { position: relative; }
.bk-p3-hang {
  position: absolute;
  /* Sejajar lurus di bawah kolom Final, sedikit di bawah kartu Final
     (kartu Final ter-tengah di kolom → 50% + setengah tinggi kartu + jarak). */
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: 76px;
}
.bk-p3-label {
  text-align: center; font-weight: 700; text-transform: uppercase;
  font-size: .68rem; letter-spacing: .5px; color: var(--text-3);
  margin-bottom: 6px;
}
/* Fallback: P3 tanpa Semi Final 2 laga → kolom lepas tanpa garis penghubung */
.bk-round.bk-detached .bk-slot::before,
.bk-round.bk-detached .bk-slot::after,
.bk-round:has(+ .bk-detached) .bk-slot::after,
.bk-detached + .bk-round .bk-slot::before { content: none; }

/* ── Bagan bertautan (bk-linked) ──────────────────────────────────
   Jadwal menyimpan laga sumbernya (home/away_source_fixture_id) →
   garis digambar dari relasi NYATA oleh skrip di ss-f7-bridge.js
   sebagai overlay SVG; garis posisional odd/even di atas dimatikan
   karena hanya asumsi bagan biner standar. */
.bk-wrap.bk-linked { position: relative; }
.bk-wrap.bk-linked .bk-slot::before,
.bk-wrap.bk-linked .bk-slot::after { content: none; }
.bk-wrap.bk-linked .bk-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bk-wrap.bk-linked .bk-svg path {
  fill: none;
  stroke: var(--bk-line);
  stroke-width: 2;
}
/* Kartu laga di atas garis + latar pejal supaya garis lintas kolom tak menembus kartu */
.bk-wrap.bk-linked .bk-match {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
}

/* Nama slot kartu bagan: tidak dipotong — label panjang
   ("Pemenang Play-off Semi Final") turun baris apa adanya */
.bk-match .bk-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* ── Strip meta kartu bagan: tanggal·jam kiri, lapangan kanan ─────
   Gradasi tipis memakai warna aksen babak (--bk-accent = "r,g,b",
   di-set per kolom .bk-round / .bk-p3-hang dari Blade). */
.bk-match .bk-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  font-size: .6rem;
  border-top: 1px solid rgba(var(--bk-accent, 115, 103, 240), .18);
  background: linear-gradient(90deg,
    rgba(var(--bk-accent, 115, 103, 240), .18),
    rgba(var(--bk-accent, 115, 103, 240), .03));
}
.bk-match .bk-meta .bk-meta-venue {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
  color: rgb(var(--bk-accent, 115, 103, 240));
}
body.dark .bk-match .bk-meta {
  background: linear-gradient(90deg,
    rgba(var(--bk-accent, 154, 143, 255), .26),
    rgba(var(--bk-accent, 154, 143, 255), .05));
}

/* ════════════════════════════════════════════════════════════════
   TURNAMEN SAYA (manajemen) — kartu per turnamen berisi baris klub:
   strip tenggat/agenda di kepala kartu, progres pemain per klub
   ══════════════════════════════════════════════════════════════ */
/* Strip tenggat & agenda (TM, biodata, input pemain) di kepala kartu */
.ts-facts {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 13px; padding-top: 11px;
  border-top: 1px dashed rgba(120, 120, 128, .28);
}
.ts-fact {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600; color: var(--text-2);
}
.ts-fact i { font-size: .875rem; color: var(--primary); }
.ts-fact.warn { color: #c76b00; }
.ts-fact.warn i { color: #ff9500; }
.ts-fact.off { color: var(--text-3); }
.ts-fact.off i { color: var(--text-3); }
body.dark .ts-fact.warn { color: #ff9f0a; }

/* Baris klub — rata dengan padding card-body, dipisah hairline */
.ts-rows { margin-top: 14px; border-top: 1px solid rgba(120, 120, 128, .14); }
.ts-row { display: flex; align-items: center; gap: 10px; padding: .8rem 1.25rem; }
.ts-row + .ts-row { border-top: 1px solid rgba(120, 120, 128, .12); }
.ts-row-main { flex: 1 1 auto; min-width: 0; }
.ts-row-date { font-size: .6875rem; color: var(--text-3); margin-top: 3px; }

/* Sub-baris: progres pemain + laga terdekat */
.ts-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 5px; }
.ts-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; color: var(--text-2);
}
.ts-note i { font-size: .875rem; }
.ts-note.warn { color: #c76b00; font-weight: 600; }
body.dark .ts-note.warn { color: #ff9f0a; }
.ts-prog {
  width: 90px; height: 5px; border-radius: 20px; overflow: hidden;
  background: var(--fill); flex-shrink: 0;
}
.ts-prog-fill {
  display: block; height: 100%; border-radius: 20px;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #34c759, #2fb84f);
}

/* ── Pill perjalanan status pendaftaran (Turnamen Saya) ──
   Satu pill per baris klub; bila berupa <a> = tombol menuju aksi tahapnya. */
.ts-journey {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: .7188rem; font-weight: 700; letter-spacing: .1px;
  text-decoration: none; white-space: nowrap;
}
.ts-journey i { font-size: .875rem; }
.ts-journey .ts-journey-go { margin: 0 -4px 0 -2px; opacity: .7; }
span.ts-journey { opacity: .92; }
a.ts-journey { transition: filter .15s ease, transform .15s ease; }
a.ts-journey:hover { filter: brightness(.92); }
a.ts-journey:active { transform: scale(.97); }

/* ── Lapangan susunan pemain (formasi + ikon pemain yang bisa digeser) ──
   Warna lapangan sengaja tetap (hijau) di light & dark mode. */
.ss-pitch {
  position: relative; width: 100%; max-width: 430px; margin: 0 auto;
  aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 44px, rgba(255, 255, 255, 0) 44px 88px),
    linear-gradient(180deg, #2f9e55 0%, #1e7b3f 100%);
  border: 2px solid rgba(255, 255, 255, .3);
  touch-action: none;
}
.ss-pitch-mid {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255, 255, 255, .35); pointer-events: none;
}
.ss-pitch-circle {
  position: absolute; top: 0; left: 50%; width: 30%; aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, .35); border-top: none;
  border-radius: 0 0 300px 300px; pointer-events: none;
}
.ss-pitch-box {
  position: absolute; left: 24%; right: 24%; bottom: 0; height: 16%;
  border: 2px solid rgba(255, 255, 255, .35); border-bottom: none;
  pointer-events: none;
}
.ss-pitch-chip {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 68px; text-align: center; z-index: 2;
  cursor: grab; user-select: none; touch-action: none;
}
.ss-pitch-chip.dragging { cursor: grabbing; z-index: 3; }
.ss-pitch[data-editable="0"] .ss-pitch-chip { cursor: default; }
.ss-pitch-ava {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: #fff; color: #1e7b3f; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35); pointer-events: none;
}
.ss-pitch-ava img { width: 100%; height: 100%; object-fit: cover; }
.ss-pitch-no {
  position: absolute; top: -5px; right: 8px; z-index: 3;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #0a84ff; color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35); pointer-events: none;
}
.ss-pitch-name {
  max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 600; line-height: 1.15;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); pointer-events: none;
}

/* ── Varian lapangan bersama dua tim (kartu line-up kelola pertandingan):
   kandang paruh bawah (chip biru), tamu paruh atas dicerminkan (chip merah) ── */
.ss-pitch--full { aspect-ratio: 7 / 10; }
.ss-pitch--full .ss-pitch-mid { top: 50%; margin-top: -1px; }
.ss-pitch--full .ss-pitch-circle {
  top: 50%; width: 26%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%;
}
.ss-pitch--full .ss-pitch-box { height: 9%; }
.ss-pitch-box--top {
  position: absolute; left: 24%; right: 24%; top: 0; height: 9%;
  border: 2px solid rgba(255, 255, 255, .35); border-top: none;
  pointer-events: none;
}
.ss-pitch-chip--static { cursor: default; width: 60px; }
.ss-pitch-chip--static .ss-pitch-ava { width: 36px; height: 36px; font-size: 19px; border-color: #0a84ff; }
.ss-pitch-chip--static .ss-pitch-name { max-width: 60px; font-size: 9.5px; }
.ss-pitch-chip--static .ss-pitch-no { right: 4px; min-width: 17px; height: 17px; font-size: 10px; }
.ss-pitch-chip--away .ss-pitch-ava { border-color: #ff3b30; }
.ss-pitch-chip--away .ss-pitch-no { background: #ff3b30; }
.ss-pitch-cap {
  position: absolute; top: 26px; right: 8px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffcc00; color: #6b5300; font-size: 9.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3); pointer-events: none;
}
.ss-pitch-tag {
  position: absolute; left: 8px; z-index: 1; font-size: 9px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4); pointer-events: none;
}
.ss-pitch-tag--top { top: 6px; }
.ss-pitch-tag--bottom { bottom: 6px; }
.ss-lu-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; }
.ss-lu-dot--away { background: #ff3b30; }
/* Label form ekstra kecil (mis. nama klub di stepper Update Skor Live) */
.ss-label-xs { font-size: .7rem; letter-spacing: .1px; }

/* Versi ringkas: lintasan pil proses di kartu status input pemain (vertikal) */
.ts-journey-track { gap: 2px; }
.ts-journey-track .ts-journey {
  padding: 2px 8px; gap: 3px;
  font-size: .6563rem; font-weight: 600;
}
.ts-journey-track .ts-journey i { font-size: .75rem; }
.ts-journey-track .ts-journey.on { box-shadow: 0 0 0 1.5px currentColor; }
.ts-journey-track > i { font-size: .8125rem; opacity: .55; margin-left: 8px; line-height: 1; }

.ts-journey.amber  { background: rgba(255, 149, 0, .14);  color: #c76b00; }
.ts-journey.blue   { background: rgba(10, 132, 255, .13); color: #0a84ff; }
.ts-journey.cyan   { background: rgba(48, 176, 199, .16); color: #1b7a8c; }
.ts-journey.purple { background: rgba(88, 86, 214, .14);  color: #5856d6; }
.ts-journey.green  { background: rgba(52, 199, 89, .16);  color: #248a3d; }
.ts-journey.red    { background: rgba(255, 59, 48, .13);  color: #d70015; }
.ts-journey.gray   { background: rgba(120, 120, 128, .14); color: var(--text-2); }
.ts-journey.live   { background: rgba(255, 59, 48, .13);  color: #d70015; }
.ts-journey.live i:first-child { animation: hm-pulse 1.2s ease-in-out infinite; }
@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ts-journey.live i:first-child { animation: none; } }

body.dark .ts-journey.amber  { color: #ff9f0a; }
body.dark .ts-journey.blue   { color: #64b5ff; }
body.dark .ts-journey.cyan   { color: #4dd0e4; }
body.dark .ts-journey.purple { color: #9d9bff; }
body.dark .ts-journey.green  { color: #30d158; }
body.dark .ts-journey.red,
body.dark .ts-journey.live   { color: #ff6961; }