/* Highlight the first column in reflow mode with your color */
@media screen and (orientation: portrait) {  /* adjust width to match your stacked breakpoint */
    /* 1. Force ALL cells to align label and input on one line */
    .ui-table-reflow:not(#gradingSelectTable):not(#gradingTable):not(#importOptionsTable) td {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; /* Vertical center alignment */
        justify-content: flex-start !important;
        gap: 0px !important; /* Gap between "Active?" and the checkbox */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
       
   .ui-table-reflow td input[type="checkbox"] {
           margin: 0 !important;
           margin-top: 4px !important; /* Corrects the offset from scale(1.75) */
           flex-shrink: 0;
       }
       
    /* 2. Fix the generated Label so it doesn't take 100% width */
    .ui-table-reflow td .ui-table-cell-label {
        display: inline-block !important;
        width: 110px !important; /* Let it shrink to text size */
        margin: 0 !important;
        min-width: 110px !important; /* Optional: keeps inputs starting at same point */
        text-transform: none !important;
        white-space: wrap;
    }

    .ui-table-reflow .ui-select,
    .ui-table-reflow .ui-input-text {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 !important;       /* Removes invisible spacing around JQM widgets */
        flex-shrink: 0;
    }
        
  .ui-table-reflow:not(#importOptionsTable) tbody tr td:first-child {
 /*   background-color: #2AA9E0; */
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px 0 0 4px;
  }

  /* Remove highlight if only 1 row */
  .ui-table-reflow:not(#importOptionsTable) tbody tr:first-child:last-child td:first-child {
    background-color: transparent;
  }

  /* 1. Reset the display for gradingTable cells to allow complex alignment */
  #gradingTable.ui-table-reflow td {
      display: block !important;
      width: 100% !important;
      clear: both !important;
      padding: 15px 10px !important;
  }

  /* 2. Style the Technique Name (Header Row 1) as a full-width block */
  #gradingTable.ui-table-reflow td .ui-table-cell-label-top {
      display: block !important;
      width: 100% !important;
      float: none !important;
      font-size: 1.2em !important;
      font-weight: bold !important;
      color: #000;
      margin-bottom: 8px !important;
      border-bottom: 1px solid #ccc;
  }

  /* 3. Make Pass? and Comments sit on the same line (the "Tab" look) */
  #gradingTable.ui-table-reflow td .ui-table-cell-label:not(.ui-table-cell-label-top) {
      display: inline-block !important;
      width: 80px !important; /* Fixed width for "Pass?" label */
      min-width: 80px !important;
      margin-top: 5px !important;
  }

  /* 4. Position the checkbox next to "Pass?" label */
  #gradingTable.ui-table-reflow td input[type="checkbox"] {
      display: inline-block !important;
      margin-right: 30px !important; /* The "tab tab tab" space */
      vertical-align: middle !important;
  }

  /* 5. Position the comments box */
  #gradingTable.ui-table-reflow td .ui-input-text {
      display: inline-block !important;
      width: calc(100% - 150px) !important; /* Takes up remaining space */
      vertical-align: middle !important;
  }

  /* 6. Special handling for the first cell (Judoka & Belt) */
  #gradingTable.ui-table-reflow td:first-child .ui-table-cell-label {
      display: block !important;
      width: 100% !important;
      background-color: #f0f0f0;
      padding: 5px;
  }

  /* Hide the auto-generated "Judoka Name" label in reflow mode */
  #gradingTable.ui-table-reflow td:first-child .ui-table-cell-label {
      display: none !important;
  }

  /* Ensure the cell content (Name & Belt) starts at the top of the block */
  #gradingTable.ui-table-reflow td:first-child {
      padding-top: 15px !important;
  }
  
  /* Center the Judoka Name and Belt in Reflow Mode */
  #gradingTable.ui-table-reflow td:first-child .judoka-profile-container {
      text-align: center !important;
      width: 100% !important;
      display: block !important;
      margin: 0 auto !important;
  }

  /* Ensure the name is prominent */
  #gradingTable.ui-table-reflow td:first-child b {
      font-size: 20px !important;
      display: block !important;
      margin-bottom: 5px;
  }

  /* Ensure the belt image is centered and sized correctly */
  #gradingTable.ui-table-reflow td:first-child .judoka-belt-img {
      display: inline-block !important;
      margin: 0 auto !important;
      max-width: 150px; /* Adjust based on your belt image sizes */
      height: auto;
  }
}

body {
    position: absolute;
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
}

body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 47px !important;
    z-index: 100 !important;
    display: block !important;
    pointer-events: none !important;
    background-color: #ffffff;
}

/* Override the generated labels */
.ui-table-reflow th .ui-table-cell-label-top,
.ui-table-reflow td .ui-table-cell-label-top {
    text-transform: none !important;
    font-weight: bold !important;       /* optional */
    font-size: 1.2em !important;        /* optional */
    padding: 8px 0 !important;          /* optional vertical spacing */
}

label.missing  {
	color:#FF0000;
}

.dkjNormal {
    font-size: 16px;
    font-weight: normal !important;
}

.ui-li-static{
    font-weight: normal !important;
}

ul.normalText li a {
    font-weight: normal !important;
}

ul.normalText li{
    font-weight: normal !important;
}
.has-odd-thumb li a {
    padding-left: 70px !important;
}

.ui-dkj-checkbox input {
    position: absolute;
    padding-left: 100px !important;
}

.thumbContainer {
    position: absolute;
    left: 2px; top: 5px; bottom: 5px; right: 0;
    width: 60px;
}
.thumbContainer img {
    position: absolute;
    margin: auto;
    bottom: 0; left: 0px; top: 0; right: 0;
}

.headpad-left {
    padding-left:5px;
}

.headpad-right {
    padding-left:5px;
    padding-right:5px;
}

.footpad {
    padding-left:5px;
    padding-bottom:10px;
    padding-right:5px;
}

[data-role="header"] .page-title-bar span {
    display :block !important;
    width: 100% !important;
    padding: 0.3em 0.5em !important;
    margin: 0 !important;
}

.ui-header.css-fixed-header {
    position: fixed !important;
/*
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
*/
    display: block !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;        /* Kill ghost padding */
    border: none !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    padding-top: env(safe-area-inset-top) !important;
}

.page-title-bar {
    height: 50px !important;
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background-color: #eeeeee !important; /* Optional: Bottom row color */
}

.ui-header.css-fixed-header h2,
.ui-header.css-fixed-header span {
    padding: 0 !important;
    line-height: 50px !important;
    height: 50px !important;
    display: inline-block !important; 
    vertical-align: middle;
}

.ui-header.css-fixed-header + .ui-content {
    padding-top: 100px !important;
}

/* The "Power-Hide" class */
.hide-important {
    display: none !important;
}

.main-header-bar .ui-btn-left {
    position: absolute !important;
    left: 5px !important;
    top: 0 !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 20 !important;
    background: transparent !important;
}

.main-header-bar .ui-btn-left a:active {
    filter: brightness(1.5) saturate(1.2);
    transform: scale(1.05);
    transition: filter 0.3s ease;
}

.main-header-bar .ui-btn-right a:active {
    filter: brightness(1.5) saturate(1.2);
    transform: scale(1.05);
    transition: filter 0.3s ease;
}

/* This targets the title H2/Span */
.main-header-bar .ui-title {
    margin: 0 0 0 50px !important; /* PUSHES TEXT 50px RIGHT SO LOGO IS VISIBLE */
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
    background: transparent !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    line-height: 50px !important;
}
.ui-page {
    position: relative !important;
    transform: none !important;
    overflow-y: auto !important;
}

.content-with-fixed-header-spacing {
    padding-top: 90px !important;
}

/* ADD: Ensure the page container itself has no rogue margin/padding */
.ui-page-active {
    margin: 0 !important;
    padding: 0 !important;
}

.ui-page, .ui-page-active {
    /* CRITICAL: Must allow viewport scrolling */
    overflow: visible !important;
    overflow-x: hidden !important;
    
    /* CRITICAL: Nullifies any ancestral transform that defeats position: fixed */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    
    /* JQM standard geometry resets */
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

span.ui-btn-right a {
    display: inline-block;
    margin: 0 !important;
    padding-top:2px !important;
}

/* Target the right-aligned container */
.ui-btn-right.headpad-right {
    /* Critical: Force the container to start at the top edge */
    top: 0 !important;
    
    /* Ensure the container fills the height and centers contents vertically */
    display: flex !important;
    align-items: center !important; /* Centers content vertically */
    height: 100% !important;
}


/* 1. Reset the outer containers so they don't stack */
.custom-back-btn,
.custom-back-btn .ui-btn-left {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
}

/* 2. Style the Anchor as the "Notes" circle */
.custom-back-btn .ui-btn-left a {
    /* Position it exactly where you want */
    position: absolute !important;
    top: 5px !important;
    
    /* Create the Circle */
    width: 34px !important;
    height: 34px !important;
    background-color: rgba(255, 255, 255, 255) !important;
    border-radius: 50% !important;
    
    /* Align the image inside the circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Clean up JQM defaults */
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* 3. Style the image inside to prevent it from stretching */
.custom-back-btn .ui-btn-left a img {
    width: 25px !important;
    height: auto !important;
    display: block !important;
    margin: 0 0 0 3px !important;
    position: static !important;
}

/* 1. Correct the vertical position of the entire right container */
.right-nav-container {
    white-space: nowrap !important;
}

/* 2. Fix the Help Circle and the ? alignment */
.help-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background-color: rgba(255, 255, 255, 255) !important;
    border-radius: 50% !important;
    margin-right: 5px !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* 3. The Rounded Rectangle Group */
.icon-group-rect {
    display: inline-flex !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 255) !important;
    border-radius: 10px !important;
    padding: 0 5px !important;      /* Minimal padding for tight fit */
    height: 32px !important;        /* Match the height of the circle */
    vertical-align: middle !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    margin-top: -15px !important;
}

/* 4. Ensure images inside stay centered and don't shift */
.right-nav-container a img {
    width: 22px !important;
    height: 22px !important;        /* Force square aspect for centering */
    display: block;
    margin: 0 auto !important;      /* Critical for "?" centering */
    position: static !important;
}

/* Specific adjustment for the links inside the rectangle */
.icon-group-rect a {
    padding: 0 6px !important;
    display: inline-flex;
    background: none !important;
    border: none !important;
    text-decoration: none !important;
    vertical-align: middle;
}

/* Apply to all images inside the header */
[data-role="header"] img {
    vertical-align: top !important;
    margin-left: 40px !important;
    margin-right: 0px !important;
    margin-top: 8px !important;
    padding: 0 !important;
}

/*
[data-role="header"] .ui-btn-right img {
    margin-right: 5px !important;
    margin-left: 0px !important;
}
*/

.senseiHelp,
.notSenseiHelp {
    display: inline-block;
}

/* second row in header */
[data-role="header"] .page-title-bar img {
    vertical-align: top !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 5px !important;
}

/* 1. APPLY TO EVERYTHING IN THE HEADER */
/* This forces the border to be calculated INSIDE the 50px/100px height */
.ui-header.css-fixed-header,
.ui-header.css-fixed-header *,
.ui-header.css-fixed-header *:before,
.ui-header.css-fixed-header *:after {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* 2. THE MAIN CONTAINER */
.ui-header.css-fixed-header {
    height: 100px !important; /* Total height includes borders now */
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    background-color: #eeeeee !important;
    position: absolute;
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
}

/* 3. ROW 1 (Top Bar) */
.main-header-bar {
    height: 50px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background-color: #eeeeee !important;
}

/* 4. ROW 2 (Bottom Bar) */
.page-title-bar {
    height: 50px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background-color: #eeeeee !important;
}
.ui-name {
    word-wrap: break-word;
    width: 140px;
    display:inline-block;    
    vertical-align:middle;
    font-weight:bold;
    font-size:16px;
    text-align:left;
    margin-left:10px;
}

.ui-row-image {
    height:54px;
    width:60px;
}

.ui-row-image-list {
/*    height:72px; */
    width:80px;
}

.ui-col-image {
    max-width: 85%;
    max-height: 85%;
    height: auto;
    width: auto;
}

.ui-col-image-detail {
    max-width: 150px;
    max-height: 135px;
}

.ui-icon-dollar:after {
	background-image: url("../img/dollar.gif");
	background-size: 18px 18px;
}

.ui-icon-dollar-email:after {
    background-image: url("../img/dollar.gif");
    background-size: 24px 24px;
}

.ui-icon-trash:after {
    background-image: url("../img/trash.gif");
    background-size: 16px 16px;
}

.ui-icon-copy:after {
    background-image: url("../img/copy-icon.gif");
    background-size: 22px 22px;
}

.ui-icon-etransfer:after {
    background-image: url("../img/etransfer.gif");
    background-size: 16px 16px;
}

.ui-icon-add-missing:after {
    background-image: url("../img/add-missing.gif");
    background-size: 16px 16px;
}

.ui-icon-print:after {
    background-image: url("../img/print.gif");
    background-size: 17px 17px;
}

.ui-icon-download:after {
    background-image: url("../img/download.gif");
    background-size: 14px 14px;
}

.ui-icon-sendemail:after {
    background-image: url("../img/sendemail.gif");
    background-size: 17px 17px;
}

.ui-icon-handwave:after {
    background-image: url("../img/handwave.gif");
    background-size: 20px 20px;
}

.ui-photxxxo {
   height: 10em;
    padding-left: 5px !important; 
}

.ui-input-text {
    border-style: none;
}
.ui-photxxxo {
    padding-left: 5px !important; 
    margin-left: 150px;
    max-width: 150px;
    max-height: 150px;
    border-radius:50%;
}


.ui-photxxxo p {
   margin: 0;
   position: absolute;               
   top: 120px;                         
}

.ui-row-image-belt {
    max-width  : 75%;
    max-height: 75%;
    height : auto;    
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin: 0px;
    position: absolute;
}

.ui-title {
    margin-left: 20% !important;
    margin-right: 20% !important;
}

a {
    text-decoration: none;
}

.shortInput { 
/*	width: 120px !important; */
	margin: 0px !important;
/*	display: inline-block; */
	text-align: right;
	padding: 5px !important;
    min-width: 120px !important;
}

.dateInput {
    width: 90px !important;
    margin: 0px !important;
    display: inline-block;
    text-align: right;
    padding: 0px !important;
}

.longInput {
    width: 240px !important;
    margin: 0px !important;
    display: inline-block;
    text-align: right;
    padding: 0px !important;
}

@media ( min-width: 29.9999em ) {
  /* Show the table header rows and set all cells to display: table-cell */
  .my-custom-breakpoint td,
  .my-custom-breakpoint th,
  .my-custom-breakpoint tbody th,
  .my-custom-breakpoint tbody td,
  .my-custom-breakpoint thead td,
  .my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
  }
  /* Hide the labels in each cell */
  .my-custom-breakpoint td .ui-table-cell-label,
  .my-custom-breakpoint th .ui-table-cell-label {
    display: none;
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media print {
     @page {
		size: auto;
        margin-bottom: 0;
      }
     .table td,
     .table th {
       background-color: #fff !important;
     }
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#judokaDetailTable tr {
    border-bottom: 0px;
    border-top: 0px;
}

#judoYearTable {
    border: 0;
	border-spacing: 0;
}

#judoYearAndItemTable {
    border: 0;
	border-spacing: 0;
}

#judokaDetailTable td {
    padding: 3px;
}

#judokaDetailTable2 tr {
    border-top: 0px;
    border-bottom: 0px;
}

#judokaDetailTable2 td {
    padding: 3px;
}

#judokaDetailTable2 input {
    padding-left: 3px;
    padding-right: 0px;
}

#judokaDetailMain {
    padding-left: 1px !important;
    padding-right: 1px !important;
    padding-bottom: 1px !important;
}

#news-feed,
#news-feed-one {
    margin: 0px 5px;
    overflow: hidden;
    height: 70px;
}

.newsFeedBox {
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.newsFeedHeight {
    min-height: 100px !important;
    height: 100px !important;
}

#news-feed img,
#news-feed-one img {
    display: inline-block;
    vertical-align: bottom;    
    width: 60px;
    height: 60px;
    padding: 2px
}

#news-feed-list,
#news-feed-list-one {
    background-color: transparent !important;
    background-image: url('') !important;
    border-width: 0px;
    list-style: none;
    padding:0;
    vertical-align: middle;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
}

#news-feed-list-one li, #news-feed-list li {
    padding: 5px 0 0 15px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    min-height: 100px !important;
    max-height: 100px !important;
    overflow: clip;
}

#news-feed-list-one li:last-child,
#news-feed-list li:last-child {
    border-bottom: none; /* Removes the line for the bottom item */
}

/* Styling for hyperlinks inside news items */
#news-feed-list li a {
    color: #007aff; /* iOS Blue */
    font-weight: bold;
    text-decoration: none;
}

#news-feed-list a {
    text-decoration: none;       
    color: black;
    font-weight:normal    
}

#profileNotes-popup {
    width: 80%;
    left: 10%;
    right: 10%
}

.wrap{
    white-space: normal !important;
}

tr {
    border-bottom: 1px solid #d6d6d6;
}

.ui-table td {
    vertical-align: middle;
    font-size: 14px;
}

#beltTable td {
    padding: 1px !important;
}

#newsTable td {
    padding: 1px !important;
}

.clubLogo {
    width: 30px; 
    height: 30px; 
    vertical-align: middle    
}

.imgCaption {
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: -20px;
}

.ui-state-disabled {
    opacity: .75;
}

.ui-dkj-btn a {
    padding: 0px;
    width: 48px;
    height: 40px;
}

.ui-dkj-btn img {
    width: 80%;
    height: 80%;
}

.ui-input-text.ui-custom {
   border: none;
   box-shadow: none;
   background: none;
}

.ui-nopads.ui-input-text {
   padding:0;
   margin:0;
   display: inline-block;
}

.dkj-header {
    vertical-align: middle !important;
}

.import-icon,
.print-icon,
.back-icon,
.add-icon,
.export-icon,
.save-icon,
.delete-icon,
.edit-icon,
.preview-icon,
.connected-icon,
.not-connected-icon,
.refresh-icon,
.help-icon,
.header-icon
{
    width: 25px !important;
    height: 25px !important;
    vertical-align: middle !important;
}

.belt-icon {
    width: 64px !important;
    height: 25px !important;
    vertical-align: middle !important;
}

.belt2-icon {
    width: 32px !important;
    height: 12px !important;
    vertical-align: middle !important;
}

.belt-full-icon {
    width: 90px !important;
    height: 35px !important;
    vertical-align: middle !important;
}

:root {
    --pulse-color: #0078d4;
}

@keyframes icon-only-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Grows the icon */
        filter: drop-shadow(0 0 8px var(--pulse-color)); /* Glows the icon shape */
    }
    100% {
        transform: scale(1);
    }
}

.edit-icon, .save-icon, .add-icon {
    /* Remove button styles so only the icon is visible */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: icon-only-pulse 2s infinite ease-in-out;
}

.hide-cel-bg {
    background-color: transparent;   
}

table.tablesorter thead tr .header,
table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .headerSortDown {
    background-image: none !important;
}

/* Optional: keep pointer cursor on headers for sortable indication */
table.tablesorter thead tr .header,
table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .headerSortDown {
    cursor: pointer;
}

.ui-datepicker {
  width: 216px;
  height: auto;
  margin: 5px auto 0;
  font: 9pt Arial, sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  z-index: 10000 !important;
}

.ui-datepicker table {
  width: 100%;
  height: 100%;
}

.ui-datepicker-prev, .ui-datepicker-next {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  background-image: url('../img/arrow.png');
  background-repeat: no-repeat;
  line-height: 600%;
  overflow: hidden;
}

.ui-datepicker-prev {
  float: left;
  background-position: center -30px;
}
.ui-datepicker-next {
  float: right;
  background-position: center 0px;
}

/* Style the input */
#search-input {
  width: 200px;
  margin: 0;
}

#importYear-button {
  min-width: 80px !important;
  width: 80px !important;
}

/* Popup dropdown menu */
#importYear-menu {
  min-width: 80px !important;
  width: 80px !important;
}

/*
.ui-input-search {
  width: 300px ;
  height:40px;
  margin-left: 5px;
}
*/

.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.toggle-label {
  margin-bottom: 0.5em;
  font-weight: bold;
  display: block;
}

.disable-click {
    pointer-events: none;
    opacity: 0.5; /* Optional: for visual indication */
}


.file-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top:7px;
}

  /* Make the filename look like a jQuery Mobile input field */
.fake-input {
      display: inline-block;
      padding: 0.6em;
      border: 1px solid #ccc;
      border-radius: .3125em;
      background: #fefefe linear-gradient(#fefefe, #eee);
      color: #333;
      font-size: 16px;
      font-family: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      min-width: 180px;
      cursor: pointer;
      font-weight: 700;
      box-shadow:
        0 1px 3px rgba(0,0,0,.1) inset,
        0 1px 0 rgba(255,255,255,.7);
      -webkit-font-smoothing: antialiased;                          }

#judokaFile {
    display: none;
}

.ui-table-columntoggle-btn {
    float: left !important;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    width: 200px;
    margin:0;
}

/* --------------------------- */
/* General popup styling */
/* --------------------------- */
#gradingTable-popup {
    width:300px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    overflow: hidden;
}

/* --------------------------- */
/* Header styling */
/* --------------------------- */
#gradingTable-popup .grading-popup-header {
    position: relative;
    padding: 8px 10px;
    background: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

/* Title styling */
#gradingTable-popup .grading-popup-header .popup-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    margin-left: 60px;
}

/* Close button styling */
#gradingTable-popup .grading-popup-header .ui-btn-left {
    position: absolute;
    right: 10px;
    top: 0px;
    z-index: 20;
}

/* Filter button styling */
#gradingTable-popup .filter-technique-btn {
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 20;
}

/* Column toggle controls styling */
#gradingTable-popup .column-toggle-controls,
#gradingTable-popup .ui-controlgroup {
    padding: 5px;
    text-align: center;
}

.badge-blue {
    display: inline-block;
    padding: 0.28em 0.65em;
    font-size: 0.9em;                 /* slightly larger = clearer */
    font-weight: 600;                 /* bold but not too bold */
    color: #fff;
    background-color: #0078d4;
    border-radius: 1em;

    /* Helps crispness on iOS + Chrome */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Remove potential blur in shadows */
    text-shadow: none;
}

/* --- New Flexbox Container (Replaces ui-grid-a) --- */
.profile-container {
    display: flex; /* Enable Flexbox layout */
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

/* --- Text Block (Squeeze to content size) --- */
.profile-text-block {
    /* Tell this block to only take the space needed for the content */
    flex-grow: 0;
    flex-shrink: 0;
    /* Optional: Add some spacing between the text and the image */
    margin-right: 15px;
}

/* --- Image Block (Squeeze to content size) --- */
.profile-image-block {
    /* Tell this block to not grow or shrink */
    flex-grow: 0;
    flex-shrink: 0;
}

/* --- Text Alignment Cleanup (Kept from before) --- */
.profile-text-content {
    margin: 0; /* Remove default paragraph margin */
    display: block;
}

/* --- Image Styling (Kept from before) --- */
.profile-pic {
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

/* Rule 1: Set the Fieldset as a Flex Container */
.button-container {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Aligns items to the left/start */
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rule 2: Item Sizing (CRITICAL: Fixed Pixel Width) */
.button-container > div {
    /* Define a fixed width that comfortably holds your image */
    width: 18% !important;
    
    /* ADDING SPACE: Use padding to create the gutter, instead of margin */
    padding: 0px 5px !important; /* Creates 5px horizontal and vertical space inside the wrapper */
    margin: 0px 5px !important;
    
    /* Remove conflicting flex sizing */
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    
    /* Ensure the button never shrinks below its content size */
    min-width: 50px !important;
}

/* Rule 3: Button Wrapper and Image Sizing */
.button-container a[data-role="button"] {
    /* Set a consistent, fixed height for ALL buttons */
    height: 70px !important;
    
    /* Ensures the button fills the 90px div's width */
    width: 100% !important;
    
    /* Center the image inside the button */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Internal padding to protect the image */
    padding: 5px !important;
}

/* Image styling remains the same */
.button-container a[data-role="button"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
/*
    min-width: 50px !important;
    min-height: 50px !important;
*/
    object-fit: contain;
    max-height: 100%;
}

/* --- MINIMUM CSS REQUIRED FOR JQM SPINNER ROTATION --- */
/* The ui-spin class is required for the rotation animation to be defined. */
.ui-spin {
    -webkit-animation: ui-spin 750ms infinite linear;
    animation: ui-spin 750ms infinite linear;
}

@-webkit-keyframes ui-spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes ui-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 1. Target the main loading container */
.ui-loader {
    /* Remove the default semi-transparent background and shadow */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Target the inner element that creates the white box and text area */
.ui-loader .ui-body-a {
    /* Set inner background to transparent, killing the white box */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Ensure the text area is not reserving space (if applicable) */
/* This is a common jQM class for the text container */
.ui-loader h1 {
    display: none !important; /* Hides any residual text that might be rendered */
}

.truncate-text {
    /* 1. Force the element to stay on a single line */
    white-space: nowrap;
    
    /* 2. Hide any text that overflows the element's width */
    overflow: hidden;
    
    /* 3. Display the ellipsis for the overflowed text */
    text-overflow: ellipsis;
    
    /* 4. The span must have a defined width and display style */
    display: inline-block;
    max-width: 300px; /* Set a specific width for truncation to occur */
    word-wrap: break-word;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    margin-left: 80px;
    
}

.truncate-text-small {
    /* 1. Force the element to stay on a single line */
    white-space: nowrap;
    
    /* 2. Hide any text that overflows the element's width */
    overflow: hidden;
    
    /* 3. Display the ellipsis for the overflowed text */
    text-overflow: ellipsis;
    
    /* 4. The span must have a defined width and display style */
    display: inline-block;
    max-width: 120px; /* Set a specific width for truncation to occur */
    word-wrap: break-word;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    margin-left: 80px;
    
}
@media (min-width: 768px) {
    /* When the viewport is wider than 768px, the span gets more room */
    .truncate-text {
        max-width: 350px; /* Text expands to use up to 350px */
    }
    .truncate-text-small {
        max-width: 350px; /* Text expands to use up to 350px */
    }
}

body div.ui-GIF-popup[data-role="popup"] {
    position: fixed !important;
    /* Use vh/vw for the most reliable mobile centering */
    top: 60vh !important;
    left: 50vw !important;
    
    /* The transform actually performs the centering math */
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    
    /* Reset margins that interfere on smaller screens */
    margin: 0 !important;
    
    /* Visual Styling */
    background-color: #ffffff !important;
    border-radius: 20px !important;
    padding: 0 !important;
    width: 90vw !important;
    max-width: 450px !important;
    overflow: visible !important;
    z-index: 10000 !important;
}

body div.ui-GIF-popup[data-role="popup"] .ui-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* Space at top (45px) so the X button doesn't cover the Judo GIF */
    padding: 15px 15px 15px 15px !important;
}

body div.ui-GIF-popup[data-role="popup"] .ui-btn-right {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 11001 !important;
}

body div.ui-GIF-popup[data-role="popup"] img {
    max-width: 100% !important;
    max-height: 70vh !important; /* Prevents tall GIFs from bleeding off-screen */
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
}

.ui-popup-screen {
    top: 0 !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* Soften the dim */
    backdrop-filter: blur(5px); /* Modern frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
}

/* 3. Safety: If your popups are very long, make them scrollable within the box */
.ui-popup {
    border: none !important;
    border-radius: 20px !important; /* Soft modern corners */
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
     max-height: 70vh !important; /* Viewport height - keeps it on screen */
     overflow-y: auto !important;
     margin-top: 50px !important;
     margin-left: 2% !important;
     -webkit-overflow-scrolling: touch !important;
}

.ui-popup-container {
    position: fixed !important;
    top: 15% !important;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px) !important;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.3));
}

body .ui-popup-container:has(.ui-GIF-popup) {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    filter: none !important;
    /* This ensures the container itself doesn't shift the 50vh calculation */
}

/* 1. Turn the popup into a flexbox container */
div[data-role="popup"] {
     box-sizing: border-box !important;
     -webkit-box-sizing: border-box !important;
     display: flex !important;
     flex-direction: column !important;
     padding: 0 !important; /* Remove padding so header touches the edges */
     overflow: hidden !important; /* The main container should not scroll */
    /* Modern Styling */
    border: none !important;
    border-radius: 16px !important; /* Smooth iOS-style corners */
    background: #ffffff !important;
    max-height: 50vh !important;
}

/* 2. Target the Header (usually an h1, h2, or div at the top) */
div[data-role="popup"] > h1,
div[data-role="popup"] > .ui-title,
div[data-role="popup"] > .popup-header {
    flex: 0 0 auto; /* Do not shrink or grow */
    width: 100%;
    margin: 0 !important;
    padding: 18px 0;
    background: #f9f9f9 !important; /* Match your theme color */
    border-bottom: 1px solid #ddd !important;
    z-index: 10;
    font-weight: 700 !important;
    color: #333;
}

/* 3. Target the Body (The scrollable part) */
/* We target everything that isn't the header/footer */
div[data-role="popup"] > .ui-content,
div[data-role="popup"] > form,
div[data-role="popup"] > table {
    flex: 1 1 auto; /* Take up all remaining space */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
}

/* This only hits ui-grid-a if it is inside your new container */
.mailing-list-container .ui-grid-a {
    display: flex !important;
    flex-wrap: wrap !important;
    font-size: 0 !important; /* Kills the 5 injected spaces */
}

.mailing-list-container .ui-grid-a > div {
    display: block !important;
    width: 50% !important;
    font-size: 16px !important; /* Restores text size for your labels/inputs */
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mailing-list-container .ui-grid-a > .ui-block-solo {
    width: 100% !important;
}

.table-hint {
  font-size: 0.85rem;
  color: #6b7280; /* Subtle grey */
  margin-bottom: 8px;
  margin-left: 6px;
  display: block;
  font-style: italic;
}

.nodata-hint {
  font-size: 0.85rem;
  color: #6b7280; /* Subtle grey */
  margin-bottom: 8px;
  margin-left: 6px;
  margin-top: 12px;
  display: block;
  font-style: italic;
}

/* THE CONTAINER */
.judo-form-grid {
    display: grid;
    /* Two columns: 1st fits the label text, 2nd takes the rest */
    grid-template-columns: min-content 1fr;
    row-gap: 0px;
    column-gap: 15px;
    align-items: center;
    font-size: 1.2em;
    margin: 10px 0;
}

/* THE LABELS (Left side) */
.judo-form-grid label {
    font-weight: bold;
    text-align: right;
    white-space: nowrap; /* Keeps "Judo Year:" on one line */
    margin: 0;
}

/* THE INPUTS & BADGE (Right side) */
.input-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the dropdown and the badge */
}

/* RESET SELECT BOX */
/* Browsers add a huge default margin to <select>. This kills it. */
.judo-form-grid .ui-select {
    margin: 0 !important;
    padding: 4px;
}

/* RESET THE BALANCE DIV */
#judokaFinancialBalance {
    margin: 0;
    padding: 4px 0;
}

.judo-form-grid .ui-btn {
    margin: 0 !important;
    /* This controls the actual height of the dropdown button */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 1. Target the images specifically inside the Belt Dialog */
#beltDialog img.ui-row-image-belt {
    height: 45px !important; /* Fixed height is much more stable */
    width: auto !important;
    max-width: none !important; /* Kill the 75% constraint */
    display: inline-block !important;
    margin: 5px !important;
}

/* 2. Force the container to stop jumping */
#beltDialog-popup {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 420px !important;
}

/* 3. Ensure the content area centers the belts */
#beltDialog .ui-content {
    text-align: center !important;
    padding: 10px !important;
}

@media screen and (orientation: landscape), screen and (min-aspect-ratio: 1/1) {
    
    html body .ui-popup-container {
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            display: block !important;
            position: fixed !important;
            z-index: 10000 !important;
        }
    
    html body div[data-role="popup"] {
            position: fixed !important;
            top: 50% !important;  /* Use % instead of vh for better Safari stability */
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            -webkit-transform: translate(-50%, -50%) !important;
            margin: 0 !important;
        }
    
    html body div[data-role="popup"]:not(.ui-GIF-popup) {
            width: 80vw !important;    /* Use width to make text readable */
            max-height: 80vh !important;
            display: flex !important;
            flex-direction: column !important;
            background: #ffffff !important;
            border-radius: 12px !important;
            top: 60% !important;
            left: 100vh;
            transform: translate(-50%, -50%) !important;
            -webkit-transform: translate(-50%, -50%) !important;        }
    
    html body div[data-role="popup"]:not(.ui-GIF-popup) .ui-content {
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            padding: 10px 15px !important;
            flex: 1 !important;
        }

    html body div.ui-GIF-popup[data-role="popup"] {
            width: auto !important;    /* Shrink-wrap the image */
            max-width: 85vw !important;
            background: #ffffff !important;
        }
    
    html body div.ui-GIF-popup[data-role="popup"] img {
            /* CRITICAL: Lock the height so the GIF stays on the small screen */
            max-height: min(45vh, 65vh) !important;
            width: auto !important;
            display: block !important;
            margin: 0 auto !important;
        }
    /* 1. Remove the percentage-based scaling that causes the 'jump' */
    #beltDialog .ui-row-image-belt {
        width: 60px !important;   /* Fixed width for landscape */
        height: auto !important;
        max-width: none !important;
        margin: 10px !important;
        display: inline-block !important;
    }

    /* 2. Force the container to the dead center of the glass, not the page */
    #beltDialog-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        /* This overrides the jumpy 'left' and 'top' pixels JQM injects */
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
        
        /* Ensure it stays on top of the header */
        z-index: 11000 !important;
        
        /* Force a clean width so belts can wrap if needed */
        width: 80vw !important;
        max-width: 450px !important;
    }

    /* 3. Center the content inside the white box */
    #beltDialog .ui-content {
        text-align: center !important;
        padding: 15px !important;
        background: #ffffff !important;
    }
}