:root{--primary:#102b52;--secondary:#174a83;--accent:#e5b84d;--on-primary:#fff;--on-accent:#172338;--navy:var(--primary);--blue:var(--secondary);--gold:var(--accent);--bg:#f3f6fa;--ink:#172338;--muted:#6c7a90;--line:#e5eaf1;--white:#fff;--green:#198754;--red:#b33d43;--shadow:0 10px 28px color-mix(in srgb,var(--primary) 6%,transparent)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}.topbar{background:var(--navy);color:var(--on-primary);padding:9px 5vw;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.4px}.topbar span:last-child{color:color-mix(in srgb,var(--on-primary) 84%,transparent)}.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.headin{max-width:1240px;margin:auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;font-weight:900;color:var(--navy);letter-spacing:.3px;white-space:nowrap}.brand:hover{text-decoration:none}.brand small{display:block;font-size:9px;color:var(--muted);font-weight:650;letter-spacing:1.15px}.logo{width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;color:var(--gold);font-size:22px}.nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.nav a,.navlink{border:0;background:transparent;display:inline-block;padding:9px 10px;border-radius:9px;color:#526078;cursor:pointer;font-weight:650;font-size:13px}.nav a.active,.nav a:hover,.navlink:hover{background:color-mix(in srgb,var(--blue) 10%,white);color:var(--blue);text-decoration:none}.inline{display:inline}.wrap{max-width:1200px;margin:27px auto;padding:0 22px;min-height:60vh}.hero{border-radius:22px;overflow:hidden;background:linear-gradient(110deg,color-mix(in srgb,var(--navy) 97%,#000),color-mix(in srgb,var(--blue) 89%,transparent)),radial-gradient(circle at 80% 10%,var(--blue),transparent 40%);color:white;padding:39px;position:relative;min-height:255px;box-shadow:var(--shadow)}.hero:after{content:'🏅';position:absolute;right:7%;top:15%;font-size:120px;opacity:.15}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:1.9px;font-weight:850}.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:10px 0}.hero p{color:#d5e1ef;max-width:610px;margin:0 0 23px;position:relative;z-index:1}.btn{display:inline-block;border:0;background:var(--gold);color:var(--on-accent);font-weight:850;padding:10px 16px;border-radius:9px;cursor:pointer;text-decoration:none}.btn:hover{text-decoration:none;filter:brightness(.97)}.btn.secondary{background:color-mix(in srgb,var(--blue) 10%,white);color:var(--blue)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0 25px}.stat,.panel,.tile{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow)}.stat strong{font-size:26px;display:block;color:var(--navy)}.stat small{color:var(--muted);font-size:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:17px 0}.panel{margin-bottom:17px}.panel h2,.tile h3{font-size:18px;margin:0 0 12px;color:var(--navy)}.panel p{margin:8px 0}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.pagehead{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:8px 0 20px}.pagehead h1{font-size:30px;color:var(--navy);margin:4px 0}.muted{color:var(--muted)}.small{font-size:12px}.block{display:block}.notice{background:#fff8e8;border:1px solid #f2dfb4;color:#775b1c;padding:12px 14px;border-radius:10px;font-size:13px;margin:12px 0}.danger-note{background:#fff4f3;border-color:#efd0cf;color:#7e3237}.tag{display:inline-block;font-size:11px;padding:4px 8px;border-radius:30px;background:color-mix(in srgb,var(--blue) 10%,white);color:var(--blue);font-weight:750;white-space:nowrap}.tag.ok{background:#e8f6ef;color:var(--green)}.tag.warn{background:#fff4df;color:#986600}.tag.danger{background:#fff0f0;color:var(--red)}.medalpanel{padding:22px}.medalgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}.medalgrid div{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fafbfd}.medalgrid small{display:block;color:var(--muted);font-size:12px}.medalgrid strong{display:block;font-size:32px;color:var(--navy)}.medalgrid.compact strong{font-size:26px}.goldtext{color:#bd8b22!important}.silvertext{color:#8190a2!important}.bronztext{color:#a96a3d!important}.snapshotnote{border-top:1px solid var(--line);margin-top:17px;padding-top:13px;color:var(--muted);font-size:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tile{box-shadow:none}.tile h3{margin:8px 0 5px}.tile p{color:var(--muted);font-size:13px;margin:0 0 8px}.sporticon{font-size:25px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:570px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;background:#f7f9fc}td,th{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}td:first-child{font-weight:650}.empty{text-align:center;padding:27px;color:var(--muted)}.authcard{max-width:450px;margin:34px auto;background:white;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.authcard h1{margin:5px 0;color:var(--navy)}.stack{display:grid;gap:11px}.stack label,.formgrid label{display:grid;gap:5px;font-size:13px;font-weight:700;color:#526078}.stack input,.stack select,.stack textarea,.stack label>textarea,.stack label>input,.stack label>select{width:100%;padding:10px 11px;border:1px solid #dce3ec;border-radius:8px;background:white;color:var(--ink)}.stack input:focus,.stack select:focus,.stack textarea:focus{outline:2px solid color-mix(in srgb,var(--blue) 24%,white);border-color:var(--blue)}.stack .check{display:flex;align-items:center;gap:8px}.stack .check input{width:auto}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-grid .panel{margin:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.alert{padding:12px 14px;border-radius:9px;margin:12px 0}.alert.success{background:#e8f6ef;color:#16643c}.alert.warning{background:#fff4df;color:#785a08}.alert.danger{background:#fff0f0;color:#8a3137}.recordlist{display:grid;gap:10px}.record{border:1px solid var(--line);border-radius:11px;padding:12px}.record summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.record summary::-webkit-details-marker{display:none}.recordbody{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:13px}.recordbody p{margin:9px 0}.vitals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.vitals div{background:#f7f9fc;padding:9px;border-radius:8px}.vitals small,.vitals b{display:block}.vitals small{color:var(--muted);font-size:11px}.errorbox{white-space:pre-wrap;overflow-wrap:anywhere;background:#f7f9fc;padding:12px;border-radius:8px;color:#9c1f2c}.footer{background:var(--navy);color:var(--on-primary);padding:24px 5vw;margin-top:38px;text-align:center;font-size:11px}@media(max-width:980px){.headin{align-items:flex-start;flex-direction:column}.nav{width:100%;overflow:auto;flex-wrap:nowrap}.nav a,.navlink{white-space:nowrap}.stats{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.wrap{padding:0 13px;margin:16px auto}.hero{padding:27px 21px;min-height:auto}.hero:after{font-size:80px;right:4%}.stats{gap:9px}.stat{padding:12px}.stat strong{font-size:22px}.grid,.cards,.two,.three{grid-template-columns:1fr}.medalgrid{gap:6px}.medalgrid div{padding:9px 4px}.medalgrid strong{font-size:25px}.topbar{padding:8px 13px}.topbar span:last-child{display:none}.pagehead h1{font-size:25px}.authcard{padding:20px}.vitals{grid-template-columns:repeat(2,1fr)}}

/* Site image settings */
.logo img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}.hero-photo{background-position:center;background-size:cover;background-repeat:no-repeat}.image-preview{display:flex;align-items:center;justify-content:center;min-height:150px;padding:14px;margin:12px 0 16px;border:1px dashed #cbd5e1;border-radius:12px;background:#f7f9fc;color:var(--muted);overflow:hidden}.image-preview img{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:8px}.logo-preview{width:190px;height:190px;min-height:190px}.logo-preview img{width:100%;height:100%;max-height:180px}.banner-preview{min-height:190px;background:#f0f3f8}.banner-preview img{width:100%;max-height:320px;object-fit:cover}.settings-form{max-width:620px}.settings-form input[type=file]{background:#f8fafc}.settings-form .btn{justify-self:start}


/* Admin theme palette controls */
.theme-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.theme-color-grid label{display:grid;gap:7px;font-size:13px;font-weight:750;color:#526078}
.color-input-row{display:flex;align-items:center;gap:10px}
.color-input-row input[type=color]{width:54px;height:42px;padding:3px;border:1px solid #dce3ec;border-radius:9px;background:#fff;cursor:pointer}
.color-input-row code{font-size:12px;color:var(--muted);font-weight:650}
.theme-preview{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:4px 0 8px;background:#fff}
.theme-preview-top{padding:13px 16px;background:var(--preview-primary);color:#fff;font-size:12px;font-weight:850;letter-spacing:.5px}
.theme-preview-body{padding:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink)}
.theme-preview-body strong{color:var(--preview-secondary);margin-right:auto}
.theme-preview-body span{font-size:12px;color:var(--muted)}
.theme-preview-button{display:inline-block;padding:7px 11px;border-radius:8px;background:var(--preview-accent);color:#172338;font-size:12px}
@media(max-width:700px){.theme-color-grid{grid-template-columns:1fr}}

/* Unified logo treatment: use the uploaded image as-is, with no tile or crop. */
.header .brand .logo {
  width: 48px;
  height: 60px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--primary);
  font-size: 22px;
}
.header .brand .logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 60px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

/* Checkerboard is limited to the admin preview so transparent pixels are visible. */
.logo-preview {
  width: 190px;
  height: 170px;
  min-height: 170px;
  background-color: #fff;
  background-image: linear-gradient(45deg, #eef1f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef1f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef1f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef1f5 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.logo-preview img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 145px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* V1.1.1: cumulative header theme + reliable uploaded banner rendering. */
.topbar {
  background: color-mix(in srgb, var(--primary) 82%, #000 18%);
  color: var(--on-primary);
}
.topbar span:last-child {
  color: color-mix(in srgb, var(--on-primary) 86%, transparent);
}
.header {
  background: var(--primary);
  color: var(--on-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary) 18%, transparent);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--primary) 12%, transparent);
}
.header .brand,
.header .brand:visited { color: var(--on-primary); }
.header .brand small { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.header .nav a,
.header .navlink { color: color-mix(in srgb, var(--on-primary) 92%, transparent); }
.header .nav a.active { background: var(--accent); color: var(--on-accent); }
.header .nav a:hover:not(.active),
.header .navlink:hover { background: color-mix(in srgb, var(--on-primary) 15%, transparent); color: var(--on-primary); }
.header .nav a.active:hover { background: color-mix(in srgb, var(--accent) 88%, #fff 12%); color: var(--on-accent); }

/* V1.1.3: keep the crest fully inside the header; preserve transparent PNG pixels. */
.header .headin {
  box-sizing: border-box;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.header .brand {
  min-width: 0;
  align-items: center;
}
.header .brand .logo {
  box-sizing: border-box;
  width: 46px;
  height: 58px;
  min-width: 46px;
  max-width: 46px;
  flex: 0 0 46px;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: transparent !important;
  overflow: hidden;
}
.header .brand .logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
@media (max-width: 980px) {
  .header .headin { min-height: 0; }
  .header .brand .logo {
    width: 44px;
    height: 54px;
    min-width: 44px;
    max-width: 44px;
    flex-basis: 44px;
  }
}

/* The uploaded banner is rendered as an actual img element (not a CSS variable).
   This avoids custom-property URL parsing issues and matches the settings preview. */
.hero.hero-photo {
  isolation: isolate;
  position: relative;
  background: #17395f;
  min-height: clamp(300px, 28vw, 380px);
}
.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.hero-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(100deg, rgba(5, 13, 25, .66) 0%, rgba(5, 13, 25, .40) 58%, rgba(5, 13, 25, .22) 100%);
}
.hero.hero-photo > :not(.hero-background) {
  position: relative;
  z-index: 1;
}
.hero.hero-photo::after {
  z-index: 2;
  pointer-events: none;
  opacity: .10;
}
.banner-preview {
  width: 100%;
  height: 260px;
  min-height: 0;
  padding: 0;
  background: #e9edf3;
}
.banner-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}
@media (max-width: 620px) {
  .hero.hero-photo { min-height: 350px; }
  .banner-preview { height: 180px; }
}


/* V1.1.4: compact the Ciamis crest and keep visible breathing room inside the header.
   This block intentionally appears last to override earlier logo sizing rules. */
.header .headin {
  box-sizing: border-box;
  min-height: 82px !important;
  padding: 12px 22px !important;
  align-items: center !important;
}
.header .brand {
  min-height: 48px;
  align-items: center !important;
  gap: 11px;
}
.header .brand .logo {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 48px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}
.header .brand .logo img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 980px) {
  .header .headin {
    min-height: 0 !important;
    padding: 10px 18px !important;
    align-items: flex-start !important;
  }
  .header .brand .logo {
    width: 35px !important;
    height: 46px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    flex-basis: 35px !important;
  }
}
@media (max-width: 620px) {
  .header .headin { padding: 9px 13px !important; }
  .header .brand .logo {
    width: 33px !important;
    height: 43px !important;
    min-width: 33px !important;
    max-width: 33px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    flex-basis: 33px !important;
  }
}


/* V1.5.0 — Klasemen medali per cabang olahraga */
.medal-summary-panel { margin-bottom: 24px; }
.medal-table-title { position: relative; z-index: 1; display: flex; justify-content: center; margin: 10px 0 -14px; padding: 0 8px; text-align: center; }
.medal-table-title span { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 9px 22px; border-radius: 12px; background: #102b66; color: #fff; font-size: clamp(14px, 2vw, 21px); line-height: 1.2; font-weight: 900; letter-spacing: .25px; text-align: center; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 3px 8px rgba(16,43,102,.14); }
.cabor-medal-panel { border: 2px solid #102b66; border-radius: 20px; padding: 15px 14px 13px; overflow: hidden; }
.cabor-medal-table-wrap { overflow-x: auto; border-radius: 11px; }
.cabor-medal-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; }
.cabor-medal-table th { padding: 14px 10px; text-align: center; background: #fff; color: #172338; font-size: 12px; letter-spacing: .35px; border-bottom: 1px solid #cbd3df; white-space: nowrap; }
.cabor-medal-table th.cabor-name-head { text-align: left; }
.cabor-medal-table td { padding: 11px 10px; text-align: center; vertical-align: middle; font-size: 15px; border-bottom: 1px solid #e2e6ed; }
.cabor-medal-table tbody tr:nth-child(odd) { background: #f0f1f3; }
.cabor-medal-table tbody tr:nth-child(even) { background: #fff; }
.cabor-medal-table tbody tr:last-child td { border-bottom: 1px solid #cbd3df; }
.cabor-medal-table .cabor-rank-head, .cabor-medal-table .cabor-rank-cell { width: 58px; }
.cabor-medal-table .cabor-rank-cell { color: #596579; font-weight: 800; }
.cabor-medal-table .cabor-name-cell { text-align: left; min-width: 250px; }
.sport-medal-identity { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.sport-medal-identity img { display: block; width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; object-position: center; padding: 3px; border: 1px solid #e2e6ed; border-radius: 50%; background: #fff; }
.sport-medal-identity span { font-weight: 750; color: #172338; }
.medal-head { font-size: 17px; margin-right: 3px; }
.gold-head, .gold-cell { color: #c49115 !important; }
.silver-head, .silver-cell { color: #8492a3 !important; }
.bronze-head, .bronze-cell { color: #bd7b45 !important; }
.cabor-medal-table .gold-cell, .cabor-medal-table .silver-cell, .cabor-medal-table .bronze-cell { font-weight: 800; font-variant-numeric: tabular-nums; }
.cabor-medal-table .cabor-total-cell { color: #102b66; font-weight: 900; }
.cabor-medal-table tfoot th { padding: 14px 10px; background: #fff; border-top: 1px solid #aab5c5; border-bottom: 0; font-size: 15px; font-weight: 900; }
.cabor-medal-note { margin: 11px 3px 0; color: var(--muted); font-size: 11px; }
@media (max-width: 620px) {
  .cabor-medal-panel { padding: 12px 9px; border-radius: 15px; }
  .medal-table-title span { padding: 7px 14px; font-size: 14px; letter-spacing: .1px; }
  .cabor-medal-table { min-width: 650px; }
  .sport-medal-identity img { width: 36px; height: 36px; flex-basis: 36px; }
}

/* V1.5.5 — Compact fit for the medals page only (desktop/laptop viewport). */
@media (min-width: 981px) {
  .wrap.medals-page {
    min-height: 0;
    margin-top: 7px;
    margin-bottom: 7px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .medals-page .medals-pagehead {
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
  }
  .medals-page .medals-pagehead .eyebrow {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 1.2px;
  }
  .medals-page .medals-pagehead h1 {
    font-size: 23px;
    line-height: 1.15;
    margin: 2px 0 3px;
  }
  .medals-page .medals-pagehead p {
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
  }
  .medals-page .medals-pagehead .btn {
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .medals-page .medal-table-title {
    margin: 5px 0 -13px;
    padding: 0 8px;
  }
  .medals-page .medal-table-title span {
    padding: 6px 16px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
  }
  .medals-page .cabor-medal-panel {
    padding: 8px 10px 7px;
    margin-bottom: 8px;
    border-radius: 16px;
    border-width: 1px;
  }
  .medals-page .cabor-medal-table {
    min-width: 0;
    table-layout: fixed;
  }
  .medals-page .cabor-medal-table th {
    padding: 6px 7px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: .2px;
  }
  .medals-page .cabor-medal-table td {
    padding: 5px 7px;
    font-size: 13px;
    line-height: 1.15;
  }
  .medals-page .cabor-medal-table .cabor-rank-head,
  .medals-page .cabor-medal-table .cabor-rank-cell {
    width: 66px;
  }
  .medals-page .cabor-medal-table .cabor-name-cell {
    min-width: 0;
  }
  .medals-page .sport-medal-identity {
    gap: 8px;
  }
  .medals-page .sport-medal-identity img {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    padding: 2px;
  }
  .medals-page .sport-medal-identity span {
    font-size: 12px;
    line-height: 1.15;
  }
  .medals-page .medal-head {
    font-size: 13px;
    margin-right: 1px;
  }
  .medals-page .cabor-medal-table tfoot th {
    padding: 7px 7px;
    font-size: 12px;
    line-height: 1.15;
  }
  .medals-page .cabor-medal-note {
    margin: 5px 3px 0;
    font-size: 9px;
    line-height: 1.25;
  }

  .medals-page .medal-summary-panel {
    padding: 9px 10px 8px;
    margin-bottom: 0;
  }
  .medals-page .medal-summary-panel .medalgrid {
    gap: 8px;
  }
  .medals-page .medal-summary-panel .medalgrid > div {
    padding: 6px 5px;
    border-radius: 9px;
  }
  .medals-page .medal-summary-panel .medalgrid small {
    font-size: 10px;
    line-height: 1.2;
  }
  .medals-page .medal-summary-panel .medalgrid strong {
    font-size: 23px;
    line-height: 1.1;
  }
  .medals-page .medal-summary-panel .snapshotnote {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 10px;
    line-height: 1.25;
  }
}

/* Short laptop viewports need a little more vertical compression. */
@media (min-width: 981px) and (max-height: 820px) {
  .wrap.medals-page {
    margin-top: 3px;
    margin-bottom: 3px;
  }
  .medals-page .medals-pagehead {
    margin-bottom: 4px;
  }
  .medals-page .medals-pagehead h1 {
    font-size: 21px;
  }
  .medals-page .medal-table-title span {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
  }
  .medals-page .cabor-medal-panel {
    padding-top: 6px;
    padding-bottom: 5px;
  }
  .medals-page .cabor-medal-table th {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .medals-page .cabor-medal-table td {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .medals-page .sport-medal-identity img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  .medals-page .cabor-medal-table tfoot th {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .medals-page .medal-summary-panel {
    padding-top: 7px;
    padding-bottom: 6px;
  }
  .medals-page .medal-summary-panel .medalgrid > div {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .medals-page .medal-summary-panel .medalgrid strong {
    font-size: 21px;
  }
  .medals-page .medal-summary-panel .snapshotnote {
    margin-top: 5px;
    padding-top: 4px;
  }
}


/* V1.5.6 — Mobile usability: shared compact navigation + medals-only responsive layout. */
@media (max-width: 620px) {
  /* Shared site header: keep the brand readable and make the full menu swipeable. */
  .topbar {
    padding: 7px 12px;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .2px;
  }
  .header .headin {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 7px;
    padding: 8px 12px 7px !important;
  }
  .header .brand {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    white-space: normal;
    font-size: 14px;
    line-height: 1.2;
  }
  .header .brand > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .header .brand small {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: .65px;
  }
  .header .brand .logo {
    width: 32px !important;
    height: 42px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 32px !important;
  }
  .header .nav {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    overflow: visible;
    padding: 1px 0 2px;
  }
  .header .nav > a,
  .header .nav > .inline {
    flex: 0 0 auto;
  }
  .header .nav a,
  .header .navlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 7px;
    white-space: nowrap;
    font-size: 10.5px;
  }
  .header .nav .inline button { white-space: nowrap; }

  /* Only the Klasemen page is compacted and reformatted below. */
  .wrap.medals-page {
    width: 100%;
    min-height: 0;
    margin: 10px auto 18px;
    padding: 0 11px;
    overflow-x: clip;
  }
  .medals-page .medals-pagehead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 12px;
  }
  .medals-page .medals-pagehead > div {
    width: 100%;
    min-width: 0;
  }
  .medals-page .medals-pagehead .eyebrow {
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 1.25px;
    overflow-wrap: anywhere;
  }
  .medals-page .medals-pagehead h1 {
    margin: 4px 0 5px;
    font-size: 24px;
    line-height: 1.15;
  }
  .medals-page .medals-pagehead p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
  }
  .medals-page .medals-pagehead .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .medals-page .medal-table-title {
    margin: 11px 0 -10px;
    padding: 0 7px;
  }
  .medals-page .medal-table-title span {
    width: 100%;
    max-width: 360px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
    overflow-wrap: normal;
  }
  .medals-page .cabor-medal-panel {
    margin-bottom: 9px;
    padding: 8px 6px 7px;
    border-width: 1px;
    border-radius: 14px;
  }
  .medals-page .cabor-medal-table-wrap {
    width: 100%;
    overflow-x: visible;
  }
  .medals-page .cabor-medal-table {
    display: table;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }
  .medals-page .cabor-medal-table thead th {
    padding: 8px 2px;
    font-size: 0 !important;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
  }
  .medals-page .cabor-medal-table thead th:nth-child(1) { width: 8%; }
  .medals-page .cabor-medal-table thead th:nth-child(1)::after {
    content: '#';
    font-size: 9px;
  }
  .medals-page .cabor-medal-table thead th:nth-child(2) {
    width: 40%;
    text-align: left;
  }
  .medals-page .cabor-medal-table thead th:nth-child(2)::after {
    content: 'CABOR';
    font-size: 8px;
  }
  .medals-page .cabor-medal-table thead th:nth-child(3) { width: 12%; }
  .medals-page .cabor-medal-table thead th:nth-child(3)::after {
    content: 'EMAS';
    font-size: 8px;
  }
  .medals-page .cabor-medal-table thead th:nth-child(4) { width: 12%; }
  .medals-page .cabor-medal-table thead th:nth-child(4)::after {
    content: 'PERAK';
    font-size: 8px;
  }
  .medals-page .cabor-medal-table thead th:nth-child(5) { width: 15%; }
  .medals-page .cabor-medal-table thead th:nth-child(5)::after {
    content: 'BRG';
    font-size: 8px;
  }
  .medals-page .cabor-medal-table thead th:nth-child(6) { width: 13%; }
  .medals-page .cabor-medal-table thead th:nth-child(6)::after {
    content: 'TOTAL';
    font-size: 8px;
  }
  .medals-page .cabor-medal-table .medal-head { display: none; }
  .medals-page .cabor-medal-table tbody td {
    padding: 8px 2px;
    font-size: 12px;
    line-height: 1.15;
    vertical-align: middle;
    overflow-wrap: normal;
  }
  .medals-page .cabor-medal-table .cabor-rank-head,
  .medals-page .cabor-medal-table .cabor-rank-cell {
    width: 8%;
  }
  .medals-page .cabor-medal-table .cabor-rank-cell {
    font-size: 11px;
  }
  .medals-page .cabor-medal-table .cabor-name-cell {
    width: 40%;
    min-width: 0 !important;
    text-align: left;
  }
  .medals-page .sport-medal-identity {
    min-width: 0;
    gap: 6px;
  }
  .medals-page .sport-medal-identity img {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    padding: 2px;
  }
  .medals-page .sport-medal-identity span {
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .medals-page .cabor-medal-table .gold-cell,
  .medals-page .cabor-medal-table .silver-cell,
  .medals-page .cabor-medal-table .bronze-cell,
  .medals-page .cabor-medal-table .cabor-total-cell {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }
  .medals-page .cabor-medal-table tfoot th {
    padding: 8px 2px;
    font-size: 11px;
    line-height: 1.1;
  }
  .medals-page .cabor-medal-note {
    margin: 7px 2px 0;
    font-size: 9px;
    line-height: 1.3;
  }
  .medals-page .medal-summary-panel {
    margin: 0;
    padding: 9px 8px 8px;
    border-radius: 13px;
  }
  .medals-page .medal-summary-panel .medalgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .medals-page .medal-summary-panel .medalgrid > div {
    min-width: 0;
    padding: 8px 2px;
    border-radius: 8px;
  }
  .medals-page .medal-summary-panel .medalgrid small {
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .medals-page .medal-summary-panel .medalgrid strong {
    font-size: 22px;
    line-height: 1.15;
  }
  .medals-page .medal-summary-panel .snapshotnote {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 9px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}


/* V1.5.7: official Ciamis match schedule/results page only */
.schedule-pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px}.schedule-source-btn{white-space:nowrap}
.schedule-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 10px}
.schedule-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow)}.schedule-kpi strong{display:block;color:var(--navy);font-size:25px;line-height:1.1}.schedule-kpi small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.schedule-snapshot-note{font-size:11px;color:var(--muted);margin:0 0 14px;line-height:1.55}.schedule-board{display:grid;gap:13px}.schedule-block{margin:0;padding:16px}.schedule-block .panelhead{margin-bottom:10px}.schedule-block .panelhead h2{font-size:17px;margin:0}.official-match-list{display:grid;gap:7px}.official-match{display:grid;grid-template-columns:106px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}.official-match-date strong,.official-match-date small{display:block}.official-match-date strong{font-size:12px;color:var(--navy)}.official-match-date small{font-size:11px;color:var(--muted);margin-top:3px}.official-match-title{font-size:13px;font-weight:750;color:var(--navy);line-height:1.4}.official-match-meta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45}.official-match-result{font-size:12px;font-weight:700;color:var(--ink);margin-top:5px}.official-match-side{display:grid;justify-items:end;gap:7px}.schedule-full-results{margin:12px 0 0}.manual-match-block{margin-top:14px}.manual-match-block .tablewrap{max-width:100%}
@media(max-width:760px){.schedule-pagehead{align-items:flex-start;flex-direction:column}.schedule-source-btn{width:100%;text-align:center}.schedule-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.official-match{grid-template-columns:1fr;gap:6px}.official-match-side{display:flex;justify-content:space-between;justify-items:stretch;align-items:center;flex-wrap:wrap}.schedule-block{padding:13px}.schedule-block .panelhead h2{font-size:15px}}


/* V1.5.10 — Daily medical service report; scoped to Data Medis only. */
.medical-report-head { margin-bottom: 12px; }

.medical-date-filter { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.medical-date-filter label { display:grid; gap:4px; color:var(--muted); font-size:12px; font-weight:750; }
.medical-date-filter input { padding:9px 10px; border:1px solid #dce3ec; border-radius:8px; color:var(--ink); background:#fff; }
.medical-report-title { display:grid; gap:3px; text-align:center; margin:4px 0 14px; color:var(--navy); font-size:13px; }
.medical-report-title span { color:var(--muted); font-size:12px; font-weight:500; }
.medical-report-table { min-width:940px; font-size:12px; }
.medical-report-table th { text-align:center; vertical-align:middle; text-transform:none; letter-spacing:0; color:var(--ink); font-size:11px; background:#f2f4f7; border:1px solid #cfd5dd; }
.medical-report-table td { border:1px solid #d8dee7; vertical-align:middle; }
.medical-report-table .center { text-align:center; }
.medical-report-table .medical-mark { color:#1763b1; font-size:17px; font-weight:900; }
.medical-report-footnote { margin:12px 0 0; }
@media print {
  body { background:#fff; }
  .topbar,.header,.footer,.medical-date-filter,.medical-report-input,.alert { display:none !important; }
  .wrap { max-width:none; margin:0; padding:0; }
  .medical-report-panel { border:0; box-shadow:none; padding:0; }
  .medical-report-table { min-width:0; font-size:10px; }
  .medical-report-table th,.medical-report-table td { padding:5px 4px; }
}
@media(max-width:620px) {
  .medical-date-filter { align-items:stretch; }
  .medical-date-filter label,.medical-date-filter input,.medical-date-filter .btn { width:100%; }
  .medical-report-panel { padding:12px; }
  .medical-report-table { min-width:860px; }
}


/* V1.5.11 — searchable athlete picker; Data Medis input only. */
.medical-athlete-picker { display:grid; gap:7px; }
.medical-athlete-picker > label { margin:0; }
.medical-athlete-picker input[type="search"] { width:100%; min-height:48px; padding:12px 14px; border:1px solid #d7dfeb; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.medical-athlete-picker input[type="search"]:focus { outline:3px solid rgba(105,75,190,.16); border-color:#7952c7; }
.medical-athlete-picker input[type="search"]:disabled { background:#f3f5f8; color:var(--muted); cursor:not-allowed; }
.medical-athlete-picker .small { margin:0; }
.medical-athlete-empty { display:grid; gap:8px; margin:4px 0 2px; }
.medical-athlete-empty code { overflow-wrap:anywhere; }
.medical-import-command { display:block; padding:9px 11px; border-radius:8px; background:#17243a; color:#fff; font-size:12px; white-space:normal; }
@media(max-width:620px) {
  .medical-athlete-picker input[type="search"] { min-height:46px; font-size:16px; }
  .medical-athlete-empty { font-size:12px; }
}


/* V1.5.14 — admin dashboard portal cards */
.admin-portal-section{margin:20px 0 26px}
.admin-portal-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
.admin-portal-heading h2{font-size:23px;color:var(--navy);margin:5px 0 4px}
.admin-portal-heading p{margin:0;font-size:13px}
.admin-portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-portal-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.admin-portal-card-head{display:flex;align-items:center;gap:13px}
.admin-portal-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--blue) 10%,white);font-size:23px}
.admin-portal-card h3{font-size:19px;color:var(--navy);margin:5px 0 0}
.admin-portal-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0;max-width:62ch}
.admin-portal-action{margin-top:2px}
.admin-portal-shortcuts{width:100%;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:13px;margin-top:auto}
.admin-portal-shortcuts a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#f8fafd;color:var(--blue);font-size:12px;font-weight:750}
.admin-portal-shortcuts a:hover{background:color-mix(in srgb,var(--blue) 9%,white);text-decoration:none}
@media(max-width:760px){.admin-portal-grid{grid-template-columns:1fr}.admin-portal-card{padding:17px}.admin-portal-heading h2{font-size:20px}}


/* V1.5.15 — collapsible input card for Data Medis; only this card is affected. */
.medical-report-input {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
}
.medical-report-input-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.medical-report-input-summary::-webkit-details-marker { display: none; }
.medical-report-input-summary::marker { content: ""; }
.medical-report-input-summary h2 {
  margin: 0 !important;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.35;
}
.medical-report-collapse-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafd;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.medical-report-collapse-open,
.medical-report-collapse-closed { display: none; }
.medical-report-input[open] .medical-report-collapse-open { display: inline; }
.medical-report-input:not([open]) .medical-report-collapse-closed { display: inline; }
.medical-report-collapse-icon::before {
  content: "⌃";
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform .18s ease;
}
.medical-report-input:not([open]) .medical-report-collapse-icon::before {
  transform: rotate(180deg);
}
.medical-report-input-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
}
.medical-report-input-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 28%, white);
  outline-offset: -3px;
}
@media (max-width: 620px) {
  .medical-report-input-summary { padding: 13px 14px; gap: 9px; }
  .medical-report-input-summary h2 { font-size: 16px; }
  .medical-report-collapse-control { min-height: 34px; padding: 6px 9px; font-size: 11px; }
  .medical-report-input-body { padding: 13px 14px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .medical-report-collapse-icon::before { transition: none; }
}


/* V1.5.17 — Admin athlete roster and date-of-birth verification */
.athlete-verification-stats { margin: 12px 0 20px; }
.athlete-roster-search { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin: 12px 0 18px; }
.athlete-roster-search input[type="search"] { flex:1 1 280px; min-width:0; }
.athlete-verification-table td { vertical-align:top; }
.athlete-dob-editor { min-width: 150px; }
.athlete-dob-editor > summary { cursor:pointer; color:var(--secondary); font-weight:700; }
.athlete-dob-form { min-width:260px; max-width:360px; padding:12px; margin-top:8px; border:1px solid var(--line, #d7dee8); border-radius:12px; background:var(--surface, #fff); }
.athlete-dob-form .check { display:flex; align-items:flex-start; gap:8px; }
.athlete-dob-form .check input { margin-top:4px; }
@media (max-width: 700px) {
  .athlete-roster-search { align-items:stretch; }
  .athlete-roster-search input[type="search"] { flex-basis:100%; }
  .athlete-dob-form { min-width:min(260px, calc(100vw - 64px)); }
}


/* V1.5.18 — read-only contingent reports and controlled sharing of saved reports. */
.medical-report-share-cell { min-width: 210px; }
.medical-report-share-form { display:grid; gap:7px; min-width:190px; }
.medical-report-share-form label { display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:700; }
.medical-report-share-form input[type="date"] { width:100%; min-width:0; padding:7px 8px; border:1px solid #dce3ec; border-radius:7px; color:var(--ink); background:#fff; font:inherit; }
.medical-report-share-form .btn { width:100%; white-space:normal; font-size:11px; padding:8px 9px; }
.medical-report-share-cell .tag { display:inline-flex; margin-bottom:4px; }
@media(max-width:620px) {
  .medical-report-share-cell { min-width:205px; }
}


/* V1.5.23: safer medical-report form workflow and visible readiness guidance */
.medical-draft-notice { margin: 12px 0 16px; }
.medical-draft-actions, .medical-readiness-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.medical-athlete-readiness { margin: 10px 0 4px; padding: 11px 13px; }
.medical-athlete-readiness[hidden] { display:none !important; }
.medical-athlete-readiness p { margin:0; }
.medical-athlete-readiness.warning { border-left:4px solid #c98921; }
.medical-readiness-links .btn { white-space:normal; }
.athlete-dob-editor[open] { min-width:260px; }

/* V1.5.24: evidence-backed, reusable medical consent panel */
.medical-consent-recorder{margin:0 0 16px}.medical-consent-recorder>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer;list-style:none}.medical-consent-recorder>summary::-webkit-details-marker{display:none}.medical-consent-recorder>summary:after{content:"+";margin-left:auto;font-size:1.2rem;font-weight:700}.medical-consent-recorder[open]>summary:after{content:"−"}.medical-consent-recorder>div{margin-top:14px}.medical-consent-record-form{padding:12px;border:1px solid var(--line,#d7deea);border-radius:12px;background:var(--surface,#fff)}.medical-consent-recorder .tablewrap{margin-top:10px}.medical-consent-recorder td small{display:block}.medical-consent-recorder .tag.danger{background:#fee2e2;color:#991b1b}


/* V1.5.25: searchable consent athlete picker, age preview, and history actions. */
.consent-athlete-search-wrap{display:grid;gap:7px;padding:12px;border:1px solid var(--line,#d7deea);border-radius:12px;background:var(--surface,#fff)}
.consent-athlete-search-wrap>label{margin:0}
#consent-athlete-search{width:100%;min-height:48px;padding:12px 14px;border:1px solid #d7dfeb;border-radius:10px;background:#fff;color:var(--ink);font:inherit}
#consent-athlete-search:focus{outline:3px solid rgba(105,75,190,.16);border-color:#7952c7}
.consent-athlete-search-wrap p{margin:0}
.consent-athlete-age{font-weight:650;color:var(--ink,#172338)}
#consent-active-status{padding:8px 10px;border-radius:8px;background:var(--surface-soft,#f4f6fa)}
#consent-active-status a{font-weight:650;margin-left:4px}
.consent-history-actions{display:grid;gap:8px;min-width:130px}
.consent-history-actions form{margin:0;gap:6px}
.consent-history-actions input[name="revocation_note"]{min-width:120px}
@media(max-width:640px){.consent-history-actions{min-width:0}.consent-history-actions .btn{width:100%}#consent-athlete-search{font-size:16px}}

/* V1.5.27 — Executive medal dashboard and branch contribution chart */
.medal-dashboard-panel {
  margin: 10px 0 18px;
  padding: 20px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: linear-gradient(115deg,#102b52 0%,#174a83 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(16,43,82,.12);
}
.medal-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
}
.medal-dashboard-head .eyebrow { color: #f0cb70; }
.medal-dashboard-head h2 {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 23px;
}
.medal-dashboard-head p {
  margin: 0;
  color: #d4e0ef;
  font-size: 12px;
}
.medal-dashboard-head > a {
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.medal-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}
.medal-kpi {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.09);
}
.medal-kpi small,.medal-kpi strong,.medal-kpi span { display: block; }
.medal-kpi small {
  color: #dce6f2;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .8px;
}
.medal-kpi strong {
  margin: 3px 0 1px;
  color: #fff;
  font-size: 31px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.medal-kpi span { color: #d4e0ef; font-size: 10px; }
.medal-kpi-gold strong { color: #f4ce63; }
.medal-kpi-silver strong { color: #e0e7f0; }
.medal-kpi-bronze strong { color: #e2a477; }
.medal-kpi-total { background: rgba(255,255,255,.16); }
.medal-dashboard-foot {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.17);
  color: #d4e0ef;
  font-size: 11px;
}
.medal-dashboard-foot a { color: #fff; font-weight: 750; }
.medal-chart-panel { padding: 19px 20px; }
.medal-chart-heading { margin-bottom: 10px; }
.medal-chart-heading h2 { margin-bottom: 3px; }
.medal-chart-heading p { margin: 0; }
.medal-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 14px;
  color: #526078;
  font-size: 11px;
}
.medal-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.medal-chart-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.legend-gold,.medal-segment-gold { background: #d5a52e; }
.legend-silver,.medal-segment-silver { background: #9ba8b8; }
.legend-bronze,.medal-segment-bronze { background: #b8794d; }
.medal-chart-list { display: grid; gap: 11px; }
.medal-chart-row {
  display: grid;
  grid-template-columns: minmax(155px,220px) minmax(80px,1fr) 28px;
  align-items: center;
  gap: 13px;
}
.medal-chart-sport {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #26364d;
  font-size: 12px;
  font-weight: 750;
}
.medal-chart-sport img {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  padding: 2px;
  object-fit: contain;
  border: 1px solid #e5eaf1;
  border-radius: 50%;
  background: #fff;
}
.medal-chart-track {
  display: flex;
  width: 100%;
  height: 13px;
  overflow: hidden;
  border-radius: 20px;
  background: #edf1f6;
}
.medal-segment { display: block; height: 100%; }
.medal-chart-total {
  color: #102b52;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
@media(max-width:760px) {
  .medal-dashboard-panel { padding: 15px; }
  .medal-dashboard-head { align-items: flex-start; flex-direction: column; }
  .medal-dashboard-head h2 { font-size: 20px; }
  .medal-dashboard-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .medal-kpi { padding: 10px; }
  .medal-kpi strong { font-size: 27px; }
  .medal-chart-panel { padding: 15px; }
  .medal-chart-row {
    grid-template-columns: minmax(110px,145px) minmax(60px,1fr) 22px;
    gap: 8px;
  }
  .medal-chart-sport { font-size: 11px; gap: 6px; }
  .medal-chart-sport img { width: 23px; height: 23px; flex-basis: 23px; }
}
@media(max-width:420px) {
  .medal-dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .medal-chart-row {
    grid-template-columns: minmax(105px,125px) minmax(45px,1fr) 20px;
    gap: 6px;
  }
  .medal-chart-sport { font-size: 10px; }
  .medal-chart-track { height: 11px; }
}

/* V1.5.28 — Mobile-first medal dashboard refinement */
@media (max-width: 620px) {
  .medals-page .medal-dashboard-panel {
    margin: 8px 0 13px;
    padding: 13px;
    border-radius: 14px;
  }

  .medals-page .medal-dashboard-head {
    margin-bottom: 11px;
    gap: 5px;
  }

  .medals-page .medal-dashboard-head h2 {
    font-size: 20px;
    margin: 3px 0;
  }

  .medals-page .medal-dashboard-head p {
    font-size: 11px;
  }

  .medals-page .medal-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .medals-page .medal-kpi {
    min-width: 0;
    padding: 9px 8px;
    border-radius: 10px;
  }

  .medals-page .medal-kpi small {
    font-size: 9px;
    letter-spacing: .4px;
  }

  .medals-page .medal-kpi strong {
    font-size: 25px;
    margin: 4px 0 2px;
  }

  .medals-page .medal-kpi span {
    font-size: 9px;
    line-height: 1.2;
  }

  .medals-page .medal-kpi-total {
    grid-column: span 2;
  }

  .medals-page .medal-dashboard-foot {
    margin-top: 9px;
    padding-top: 8px;
    font-size: 10px;
  }

  /* Table title must not overlap the table header */
  .medals-page .medal-table-title {
    margin: 13px 0 8px;
    padding: 0 4px;
  }

  .medals-page .medal-table-title span {
    width: auto;
    max-width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 9px;
  }

  .medals-page .cabor-medal-panel {
    margin-bottom: 10px;
    padding: 7px 5px;
    border-radius: 12px;
  }

  .medals-page .cabor-medal-table {
    width: 100%;
    table-layout: fixed;
  }

  .medals-page .cabor-medal-table thead th {
    padding: 8px 2px;
    font-size: 0 !important;
  }

  .medals-page .cabor-medal-table thead th:nth-child(1) { width: 7%; }
  .medals-page .cabor-medal-table thead th:nth-child(2) { width: 42%; }
  .medals-page .cabor-medal-table thead th:nth-child(3) { width: 12%; }
  .medals-page .cabor-medal-table thead th:nth-child(4) { width: 12%; }
  .medals-page .cabor-medal-table thead th:nth-child(5) { width: 14%; }
  .medals-page .cabor-medal-table thead th:nth-child(6) { width: 13%; }

  .medals-page .cabor-medal-table tbody td {
    padding: 8px 2px;
    font-size: 11px;
  }

  .medals-page .cabor-medal-table .cabor-rank-cell {
    font-size: 10px;
  }

  .medals-page .cabor-medal-table .cabor-name-cell {
    width: 42%;
  }

  .medals-page .sport-medal-identity {
    gap: 5px;
  }

  .medals-page .sport-medal-identity img {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .medals-page .sport-medal-identity span {
    font-size: 10.5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .medals-page .cabor-medal-table .gold-cell,
  .medals-page .cabor-medal-table .silver-cell,
  .medals-page .cabor-medal-table .bronze-cell,
  .medals-page .cabor-medal-table .cabor-total-cell {
    font-size: 11px;
  }

  .medals-page .cabor-medal-table tfoot th {
    padding: 9px 2px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .medals-page .medal-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .medals-page .medal-kpi-total {
    grid-column: span 1;
  }

  .medals-page .medal-dashboard-kpis .medal-kpi:nth-child(5) {
    grid-column: auto;
  }

  .medals-page .sport-medal-identity img {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .medals-page .sport-medal-identity span {
    font-size: 9.5px;
  }
}

/* V1.5.29 — Blue identity badge for mobile medal page */
@media (max-width: 620px) {
  .medals-page .medals-pagehead .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 7px;
    padding: 7px 10px;
    border-left: 3px solid #e5b84d;
    border-radius: 6px;
    background: #102b52;
    color: #ffffff;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: .65px;
    white-space: normal;
  }
}

/* V1.5.30 — Compact mobile medal page heading */
@media (max-width: 620px) {
  .medals-page .medals-pagehead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
    row-gap: 3px;
    margin: 0 0 9px;
  }

  .medals-page .medals-pagehead > div {
    display: contents;
  }

  .medals-page .medals-pagehead .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 2px;
    padding: 5px 8px;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .4px;
  }

  .medals-page .medals-pagehead h1 {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-size: 21px;
    line-height: 1.15;
  }

  .medals-page .medals-pagehead > .btn {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.15;
  }

  .medals-page .medals-pagehead p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 1px 0 0;
    font-size: 11px;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .medals-page .medals-pagehead h1 {
    font-size: 19px;
  }

  .medals-page .medals-pagehead > .btn {
    padding: 6px;
    font-size: 9px;
  }
}


/* V1.5.31: compact mobile home */
@media (max-width: 620px) {
  .hero.hero-photo {
    min-height: 0;
    padding: 22px 18px 20px;
  }
  .hero.hero-photo::after { display: none; }
  .hero.hero-photo .eyebrow {
    max-width: 92%;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.2px;
  }
  .hero.hero-photo h1 {
    max-width: 16ch;
    font-size: clamp(25px, 7vw, 31px);
    line-height: 1.08;
    margin: 9px 0;
  }
  .hero.hero-photo p {
    max-width: 100%;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
  }
  .hero.hero-photo .btn {
    margin: 0 5px 5px 0;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: top;
  }
  .grid { gap: 10px; margin: 12px 0; }
  .grid .panel { margin-bottom: 0; padding: 15px; }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 18px;
  }
  .stat { padding: 10px 11px; border-radius: 12px; }
  .stat strong { font-size: 21px; line-height: 1.1; margin-bottom: 4px; }
  .stat small { display: block; font-size: 11px; line-height: 1.35; }
}
/* Header jadwal dibuat ringkas seperti halaman klasemen */
.schedule-pagehead{
  align-items:center;
  gap:10px;
  margin:0 0 12px;
}
.schedule-pagehead .eyebrow,
.schedule-pagehead p{
  display:none;
}
.schedule-pagehead h1{
  margin:0;
  font-size:25px;
}
.schedule-source-btn{
  width:auto;
  flex-shrink:0;
  text-align:center;
  padding:8px 11px;
  font-size:12px;
}
@media(max-width:760px){
  .schedule-pagehead{
    flex-direction:row;
    align-items:center;
  }
  .schedule-source-btn{
    width:auto;
  }
}

/* Dashboard statistik jadwal mengikuti gaya klasemen */
.schedule-summary {
  padding: 13px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: linear-gradient(115deg,#102b52 0%,#174a83 100%);
  box-shadow: 0 10px 26px rgba(16,43,82,.12);
  gap: 8px;
  margin-bottom: 10px;
}
.schedule-kpi {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  box-shadow: none;
}
.schedule-kpi strong {
  color: #fff;
  font-size: 27px;
  line-height: 1.15;
}
.schedule-kpi small {
  color: #dce6f2;
  font-size: 10px;
  margin-top: 4px;
}
@media(max-width:760px) {
  .schedule-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 11px;
  }
  .schedule-kpi {
    padding: 10px;
  }
}

/* Tampilkan kembali label emas halaman jadwal */
.schedule-pagehead .eyebrow {
  display: block;
  color: #bd8b22;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .8px;
  margin: 0 0 4px;
}

/* Dashboard jadwal: konsisten dengan dashboard klasemen */
.schedule-pagehead {
  align-items: center;
  margin: 0 0 10px;
  gap: 8px;
}
.schedule-pagehead h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}
.schedule-source-btn {
  width: auto;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.15;
}
.schedule-dashboard {
  margin: 10px 0 12px;
  padding: 16px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: linear-gradient(115deg,#102b52 0%,#174a83 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(16,43,82,.12);
}
.schedule-dashboard-head {
  margin-bottom: 14px;
}
.schedule-dashboard-head .eyebrow {
  display: block;
  margin: 0 0 5px;
  color: #f0cb70;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 1px;
  font-weight: 850;
}
.schedule-dashboard-head h2 {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 23px;
  line-height: 1.2;
}
.schedule-dashboard-head p {
  margin: 0;
  color: #d4e0ef;
  font-size: 12px;
}
.schedule-dashboard .schedule-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.schedule-dashboard .schedule-kpi {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  box-shadow: none;
}
.schedule-dashboard .schedule-kpi strong {
  display: block;
  margin: 3px 0 1px;
  color: #fff;
  font-size: 31px;
  line-height: 1.15;
}
.schedule-dashboard .schedule-kpi small {
  display: block;
  margin-top: 4px;
  color: #dce6f2;
  font-size: 10px;
}
@media(max-width:760px) {
  .schedule-pagehead {
    flex-direction: row;
    align-items: center;
  }
  .schedule-pagehead h1 {
    font-size: 21px;
  }
  .schedule-source-btn {
    width: auto;
    padding: 6px 8px;
    font-size: 10px;
  }
  .schedule-dashboard {
    padding: 14px;
  }
  .schedule-dashboard-head h2 {
    font-size: 21px;
  }
  .schedule-dashboard .schedule-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .schedule-dashboard .schedule-kpi {
    padding: 10px;
  }
  .schedule-dashboard .schedule-kpi strong {
    font-size: 27px;
  }
}

/* Header jadwal mengikuti susunan header klasemen */
.schedule-pagehead {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 3px;
  margin: 8px 0 10px;
}
.schedule-pagehead > div {
  display: contents;
}
.schedule-pagehead h1 {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
}
.schedule-pagehead > .schedule-source-btn {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.15;
}
.schedule-pagehead p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.3;
}
@media(max-width:380px) {
  .schedule-pagehead h1 { font-size: 19px; }
  .schedule-pagehead > .schedule-source-btn {
    padding: 6px;
    font-size: 9px;
  }
}

/* Tampilkan keterangan header jadwal seperti halaman klasemen */
.schedule-pagehead p {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

/* Samakan tombol sumber jadwal dengan tombol klasemen */
.schedule-pagehead > .schedule-source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: center;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 6px 8px;
  margin: 0;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  transform: translateY(-2px);
}

/* Presisi tombol jadwal mengikuti tombol klasemen */
.schedule-pagehead > .schedule-source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: center;
  height: 32px;
  min-height: 32px;
  padding: 6px 8px;
  margin: 0;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  transform: translateY(-2px);
}

/* Footer dashboard jadwal mengikuti footer klasemen */
.schedule-dashboard-foot {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.17);
  color: #d4e0ef;
  font-size: 11px;
  line-height: 1.4;
}

/* Presisi posisi kotak dan teks judul tabel medali */
.medals-page .medal-table-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.medals-page .medal-table-title span {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-indent: 0;
  white-space: normal;
}

/* Koreksi final posisi teks di dalam badge judul medali */
.medals-page .medal-table-title span {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 36px;
  padding: 0 22px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle;
  box-sizing: border-box;
}


/* V1.5.12 — Compact medical report redesign */
.medical-report-head {
  margin: 0 0 14px;
  padding: 17px 18px;
  border-radius: 15px;
  background: linear-gradient(115deg,#102b52 0%,#174a83 100%);
  color: #fff;
}
.medical-report-head .eyebrow {
  color: #f0cb70;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.medical-report-head h1 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.25;
}
.medical-report-head p {
  margin: 5px 0 0;
  color: #d7e4f5;
  font-size: 11px;
  line-height: 1.45;
}
.medical-date-filter {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: end;
  gap: 9px;
  margin: 0 0 13px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.medical-date-filter label {
  grid-column: 1 / -1;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}
.medical-date-filter input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
}
.medical-date-filter .btn {
  min-height: 38px;
  padding: 8px 13px;
  white-space: nowrap;
}
.medical-report-panel {
  border-radius: 13px;
}
.medical-report-panel .panelhead {
  margin-bottom: 10px;
}
.medical-report-panel .panelhead h2 {
  font-size: 16px;
}
@media(max-width:620px) {
  .medical-report-head {
    padding: 15px;
    border-radius: 13px;
  }
  .medical-report-head h1 {
    font-size: 19px;
  }
  .medical-date-filter {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 10px;
  }
  .medical-date-filter label {
    grid-column: 1 / -1;
  }
  .medical-date-filter input {
    grid-column: 1 / -1;
  }
  .medical-date-filter .btn {
    width: auto;
  }
}


/* V1.5.13 — Medical report mobile cards */
.medical-report-cards { display:none; }
@media(max-width:620px) {
  .medical-report-desktop-table { display:none !important; }
  .medical-report-cards { display:grid; gap:11px; margin:0 0 14px; }
  .medical-report-card {
    padding:14px;
    background:#fff;
    border:1px solid #dce4ee;
    border-radius:13px;
    box-shadow:0 3px 12px rgba(16,43,82,.06);
  }
  .medical-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding-bottom:9px;
    border-bottom:1px solid #e8edf3;
    color:#64748b;
    font-size:11px;
  }
  .medical-card-number {
    color:#174a83;
    font-weight:800;
  }
  .medical-report-card h3 {
    margin:11px 0;
    color:#102b52;
    font-size:15px;
    line-height:1.35;
  }
  .medical-card-detail {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:8px 0;
    border-top:1px solid #edf1f5;
    font-size:12px;
  }
  .medical-card-detail span { color:#64748b; }
  .medical-card-detail strong {
    color:#102b52;
    text-align:right;
    max-width:60%;
    overflow-wrap:anywhere;
  }
  .medical-card-muted { color:#64748b; font-size:12px; }
  .medical-card-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:12px;
  }
  .medical-card-delete-form { margin:0; }
  .medical-card-actions .btn { width:auto; }
}
/* V1.5.14 — Mobile empty medical reports */
.medical-report-empty-state {
  padding: 22px 15px;
  text-align: center;
  border: 1px dashed #cbd7e5;
  border-radius: 11px;
  background: #f8fafc;
}
.medical-report-empty-state strong {
  display: block;
  color: #102b52;
  font-size: 14px;
}
.medical-report-empty-state p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

/* Penyempurnaan khusus halaman 404 Bebegig */
.error404-card h1 {
    font-size: 23px;
    line-height: 1.3;
    font-weight: 800;
    margin: 8px 0;
}
.error404-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 10px auto 22px;
}
.error404-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.error404-actions .btn {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 24px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 750;
}
@media (max-width: 620px) {
    .error404-card h1 { font-size: 22px; }
    .error404-actions { gap: 9px; }
    .error404-actions .btn {
        min-height: 42px;
        padding: 9px 14px;
        font-size: 12.5px;
    }
}
/* Final tuning 404 mobile */
.error404-card h1 {
    font-size: 20px;
    line-height: 1.35;
    white-space: nowrap;
    letter-spacing: -0.4px;
    margin: 8px 0;
}
.error404-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 9px;
}
.error404-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 42px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 750;
    border-radius: 24px;
}
@media(max-width:390px) {
    .error404-card h1 { font-size: 18px; }
    .error404-actions { gap: 7px; }
    .error404-actions .btn { padding: 9px 10px; font-size: 11px; }
}
/* Perbaikan lebar kartu 404 pada layar mobile */
.error404-wrap {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.error404-card,
.error404-card * {
    box-sizing: border-box;
}
.error404-card {
    width: 100%;
    max-width: 680px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}
.error404-card h1 {
    max-width: 100%;
}
@media (max-width: 620px) {
    .error404-wrap {
        padding: 24px 12px;
    }
    .error404-card {
        padding: 30px 16px;
    }
}
/* Responsifkan teks 404 mengikuti lebar kartu */
.error404-card h1 {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 1.3;
    letter-spacing: -0.3px;
    text-align: center;
}
.error404-card p {
    width: 100%;
    max-width: 460px;
    font-size: clamp(13px, 3.6vw, 15px);
    text-align: center;
}
.error404-actions {
    width: 100%;
    max-width: 100%;
}
@media(max-width: 390px) {
    .error404-actions .btn {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 11px;
    }
}
/* Ukuran tipografi 404 khusus mobile */
@media (max-width: 620px) {
    .error404-card h1 {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        margin: 8px 0 12px !important;
        white-space: normal !important;
    }
    .error404-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin: 8px auto 18px !important;
    }
}
/* Proporsi kompak halaman 404 khusus mobile */
@media (max-width: 620px) {
    .error404-card {
        padding: 24px 14px !important;
        border-radius: 20px;
    }

    .error404-card img {
        width: 150px !important;
        height: 140px !important;
        margin: 0 auto 14px !important;
    }

    .error404-card h1 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 6px auto 10px !important;
        letter-spacing: 0 !important;
    }

    .error404-card p {
        max-width: 280px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin: 8px auto 16px !important;
    }

    .error404-actions {
        gap: 8px !important;
    }

    .error404-actions .btn {
        min-height: 38px !important;
        padding: 8px 11px !important;
        font-size: 11px !important;
    }
}
/* Tombol 404 - desain minimalis */
.error404-actions {
    gap: 8px !important;
}

.error404-actions .btn {
    min-height: 34px !important;
    padding: 7px 13px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, transform .2s ease !important;
}

.error404-actions .btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 390px) {
    .error404-actions .btn {
        min-height: 33px !important;
        padding: 7px 10px !important;
        font-size: 10.5px !important;
    }
}

/* Rapikan tombol aksi laporan medis pada kartu mobile */
@media(max-width:620px) {
  .medical-card-actions {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:12px;
  }
  .medical-card-actions > a.btn,
  .medical-card-actions form .btn {
    display:inline-flex;
    width:auto;
    min-width:65px;
    justify-content:center;
    align-items:center;
  }
  .medical-card-delete-form {
    display:inline-flex;
    margin:0;
  }
}

/* Perbaikan prioritas tata letak tombol aksi kartu medis */
@media (max-width:620px) {
  .medical-report-card .medical-card-actions {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
  .medical-report-card .medical-card-actions > a.btn,
  .medical-report-card .medical-card-actions > form {
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
  }
  .medical-report-card .medical-card-actions > form .btn {
    display:inline-flex !important;
    width:auto !important;
    min-width:65px !important;
    justify-content:center !important;
  }
}