@charset "utf-8";
/* CSS Document */

#p_all{
	width: 1000px;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: none;
}

/*#p_head{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 12px;
	width: 1000px;
	height: 100px;
	background-color: white;
	position: absolute;
	left: 0px;
	top: 0px;
}*/

#p_head {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 12px;
    width: 1000px; /* Maintain your fixed width */
    height: 100px; /* Fixed height */
    background-color: white; /* Keep the background color */
    position: absolute; /* Keep the absolute positioning */
    left: 0px; /* Align to the left */
    top: 0px; /* Align to the top */
    display: flex; /* Add Flexbox for horizontal layout */
    align-items: center; /* Center child elements vertically */
    justify-content: space-between; /* Evenly distribute space between children */
    padding: 0 10px; /* Optional: Add padding for spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect the overall width */
}

/* Logo container */
#logo_hold {
    width: 320px; /* Fixed width for the logo */
    display: flex;
    align-items: center; /* Center the logo vertically */
}

/* Flex containers for the remaining space */
#p_head > div:not(#logo_hold) {
    flex: 1; /* Share the remaining space equally */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center;
}

/* Image inside the logo container */
#logo_hold img {
    height: 100%; /* Ensure the image scales to the height of the container */
    width: auto; /* Maintain aspect ratio */
}

/* Links styling */
#p_head a {
    color: #007bff; /* Default link color */
    text-decoration: none; /* Remove underline */
    font-size: 14px;
    font-weight: bold;
}

#p_head a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* END of topbar layout */

#p_left{
    /*padding: 10px;*/
	width: 150px;
	height: 550px;
	background-color: white;
	position: absolute;
	left: 0px;
	top: 100px;		
}

#p_foot{
	font-family: calibri;
	width: 1000px;
	min-height: 50px;
	background-color: white;
	position: absolute;
	left: 0px;
	top: 600px;
    z-index: 2000;
}

#p_right{
	width: 850px;
	height: 550px;
	background-color: white;
	position: absolute;
	left: 150px;
	top: 100px;
	scroll-behavior: auto;
}

/* Unified styling for both buttons and select fields */
#p_left button, select {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    width: 90%;
    padding: 3px 0;
    font-size: 11px;
    color: #FFFFFF; /* Dark text color */
    background-color: #1E8C76; /* Windows NT green */
    border: 1px solid #004d00; /* Darker green border */
    border-radius: 2px;
    height: 24px;
    margin-bottom: 6px;
    box-sizing: border-box;
    text-indent: 4px; /* Align text within select fields */
    appearance: none; /* Remove default browser styling */
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Specific styling for active and disabled buttons */
#p_left button.link-active, select:focus {
    background-color: #1E8C76;
    color: #ffffff;
    border-color: #003300;
}

#p_left button.selected {
    background-color: #7B7B7B;
}

#p_left button.link-disabled {
    background-color: #1E8C76;
    color: #aaaaaa;
    border-color: #006400;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hover effect for buttons */
#p_left button:hover, select:hover {
    background-color: #004d00; /* Darker green on hover */
    color: #ffffff; /* White text on hover */
}

#useradm_ext_topbar {
	width: 100%;
    height: 70px;
    padding: 15px;
    border: 1px dotted gray;
	top: 0px;
	left: 0px;
}

#useradm_grid_content::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

#useradm_grid_content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

#useradm_grid_content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}

#useradm_grid_content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Grid Container */
#useradm_grid.p840_grid-container {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 12px;
    display: grid;
    grid-template-rows: auto 1fr; /* Allows dynamic row height */
    width: 100%;
    overflow: hidden;
}

/* Scrollable Content */
#useradm_grid_content {
    overflow-y: auto; /* Allow vertical scrolling */
    height: 330px; /* Ensure content height matches desired layout */
    display: grid;
    grid-template-rows: auto; /* Dynamic row height */
    padding-right: 0px; /* Adjust for scrollbar width */
    box-sizing: content-box;
}

/* Header Row */
#useradm_grid .p840_grid-header {
    display: grid;
    grid-template-columns: 160px 160px 120px repeat(4, 1fr); /* Match container columns */
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0; /* Stick to the top of the container */
    z-index: 1; /* Ensure it's above scrollable content */
    border-bottom: 2px solid #ddd;
    margin-right: 16px;
}

/* Data Rows */
#useradm_grid .p840_grid-row {
    display: grid;
    grid-template-columns: 160px 160px 120px repeat(4, 1fr); /* Match container columns */
}

/* Items */
#useradm_grid .p840_grid-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Fixed Columns */
#useradm_grid .p840_grid-item.fixed {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
}


/* Checkbox Columns */
#useradm_grid .p840_grid-item input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Dropdown Styling */
#useradm_grid .p840_grid-item select {
    width: 80%;
    padding: 5px;
    font-size: 12px;
}

/* Highlight Rows on Hover */
#useradm_grid .grid-row:hover .grid-item {
    background-color: #4cf9f9;
}

/* Hidden Rows */
#useradm_grid .hidden-row {
    display: none;
}

#useradm_ext {
	width: 800px;
	position: absolute;
	top: 75px;
	left: 0px;
}

#useradm_ext .userdata {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 13px;
    width: 100%;
    height: 40px;
    background-color: yellow;
    color: #000000;
}

#useradm_ext .username {
    width: 60px;
    border: 2px dotted green;
    background-color: transparent;
    color: #A3384E;
}

#useradm_ext .data {
    width: 60px;
    border: 2px dotted green;
    background-color: transparent;
    color: #A3384E;
}

#div_menu{
	font-family: verdana;
	font-size: 12px;
	text-align: center;
	background-color: cornflowerblue;
	width: 120px;
	border: 1px dashed black;
	padding: 4px;
	margin: 5px auto;
}

#div_topmenu{
	font-family: verdana;
	font-size: 12px;
	text-align: center;
	background-color: cornflowerblue;
	width: 120px;
	border: 1px dashed black;
	padding: 4px;
	margin: 5px auto;
}

#productlist{
	font-family: verdana;
	font-size: 12px;
	text-align: left;
	margin: 5px;
	padding: 5px;
	width: 500px;
	height: 500px;
	line-height: 150%;
	overflow-y: auto;
	text-overflow: ellipsis;
	border: 1px dashed black;
}

#p_loginscreen {
  width: 410px;
  height: 500px; /* Adjusted height */
  margin: 0 auto;
  position: relative;
  border: none;
}

#p_loginhead {
  width: 410px;
  height: 100px;
  background-color: darkcyan;
  position: absolute;
  top: 0;
  left: 0;
}

#p_loginbody {
	width: 400px;
	height: 500px;
	background-color: white;
	border: 3px dotted black;
	position: relative; /* Changed from absolute to relative */
	padding-top: 20px; /* Space above content */
	margin-left: 20px auto;
	text-align: center;
	font-family: Calibri;
}

#p_loginbody img {
	width: 100%;
	max-width: 400px;
	margin-bottom: 20px; /* Adds space below the logo */
}

#login {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align fields to the left */
  margin: 0 auto;
  width: 80%;
  max-width: 300px;
}

.seasonDiv {
    margin-top: 10px;
}

.seasonQuizDiv {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    display: flex;
    width: 70%;
    justify-content: flex-start;
    padding: 0px 0px 0 0px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
    overflow-y: auto;
    /*border: 1px solid lightgray; /* Optional border for visualization */
}

.seasonQuizDateNr {
    padding: 5px 0px 0px 5px;
    border: 1px solid #939393;
    width: 150px; /* Fixed width */
    box-sizing: content-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
    flex: 0 0 auto; /* Prevent flex-grow from overriding the width */
}

.seasonQuizDetails {
    padding: 5px 0px 0px 5px;
    width: 400px; /* Percentage width works */
    border: 1px solid #939393;
    box-sizing: content-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
    text-align: left;
    flex: 0 0 auto; /* Prevent flex-grow from overriding the width */
}

.notice {
    color: red;
    font-size: 11px;
}

.future {
    color: darkgreen;
    font-size: 12px;
}

/*.seasonQuizDiv {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
    overflow-y: auto;
}

.seasonQuizDateNr {
    flex: 1;
    padding: 10px 0 0 10px;
    border: 1px solid #939393;
    width: 150px;
    /* box-sizing: border-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
}

.seasonQuizDetails {
    flex: 1;
    padding: 10px 0 0 10px;
    width: 40%;
    border: 1px solid #939393;
    align-content: flex-start;
    box-sizing: border-box;
    font-size: clamp(12px, 1vw + 0.5em, 16px);
    text-align: left;
}*/

.scorediv {
    display: flex;
    justify-content: space-between;
}

.scoretablediv {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    font-size: clamp(14px, 1vw + 0.5em, 18px);
    overflow-y: auto;
}

#stilling_samlet {
    width: 50%;
}

.score-table {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%; /* Table fills the entire parent div */
    table-layout: fixed; /* Ensures columns respect their defined widths */
    border-collapse: collapse;
    border: solid 1px;
}

.score-table td {
    padding: 5px; /* Add some padding for content */
    border: solid 1px; /* Optional: Border for visualization */
}

.score-table td:first-child {
    width: 15%; /* First column takes 15% of the width */
    vertical-align: top;
    text-align: center;    
}

.score-table td:last-child {
    width: 85%; /* Second column takes the remaining space */
    vertical-align: top;
}

.restricted {
    display: none;
}

#score_right1 {
	width: 800px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#score_right2 {
	width: 380px;
	position: absolute;
	top: 0px;
	left: 450px;
}

#score_bottom {
	width: 800;
	position: absolute;
	top: 370px;
	left: 0px;
}

#scorebutton {
	width: 50px;
}
.username, .pwd {
  margin: 10px 0;
  padding: 8px;
  width: 100%; /* Matches form width */
}

table.top{
	position: relative;
	left: 0px;
	top: 0px;
	border: none;
	float: left;
    border-collapse: collapse;
}

td.top{
	height: 95px;
	width: 200px;
	border: solid 1px;
	text-align: center;
	vertical-align: middle;
}

table.footer{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 50px;
	width: 1000px;
	border: collapse;
	float: left;
	
}

.footer td {
	width: 100px;
	min-height: 18px;
	border: 1px dotted gray;
	text-align: center;
	vertical-align: middle;
	font-family: calibri;
	font-size: 14px;
	float: left;
}

.footer th {
	width: 100px;
	border: 1px dotted gray;
	text-align: center;
	vertical-align: middle;
	font-family: calibri;
	font-weight: 600;
	font-size: 14px;
	float: left;
}

h1 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 600;
	font-size: 20px;
}
h2 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 400;
	font-size: 16px;
}
p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 14px;
}
.textinput td {
    
	width: 200px;
	border: 2px dotted gray;
	align-content: center;
}
.textinput th {
	width: 200px;
	border: 2px dotted gray;
	align-content: left;
	align-items: left;
}

.dagensret {
    width: 100%;
}
.dagensret th {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 650;
	font-size: 15px;
    text-align: left;
    padding: 4px;
	width: 150px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}
.dagensret td {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 200;
	font-size: 13px;
    text-align: left;
    vertical-align: middle;
    padding: 4px;
    width: 200px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}

.rundeplan {
    width: 100%;
    max-width: 1100px;
}

.rundeplan th {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 550;
	font-size: 15px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
	width: 200px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}
.rundeplan td {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 200;
	font-size: 14px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
    width: 200px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}
.rundeplan_alter {
    width: 100%;
    max-width: 1100px;
}
.rundeplan_alter th {
    background-color: rgba(171,82,83,0.60);
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 600;
	font-size: 16px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
	width: 200px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}
.rundeplan_alter td {
    background-color: rgba(171,82,83,0.60);
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: 200;
	font-size: 14px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
    width: 200px;
	border: 2px dotted gray;
	align-content: center;
	align-items: center;
}
.blink_me {
	align: center;
	animation: blinker 2s linear infinite;
}

.plantable {
  border-collapse: collapse; /* makes dotted borders meet neatly */
}

.plantable th,
.plantable td {
  font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans",Verdana,"sans-serif";
  text-align: center;
  vertical-align: middle;
  padding: 2px;
  width: 200px;
  border: 2px dotted gray;
  /* align-content / align-items are flexbox-only; remove them */
  /* font-weight per cell type below */
}

.plantable th { font-weight: 600; font-size: 12px; }
.plantable td { font-weight: 400; font-size: 10px; }

.plantable td.status {
  text-align: center;
  font-size: 14px; 
}

.plantable td.status.s1 { 
    color: green;
    font-size: 12px;
}     /* happy */
.plantable td.status.s2 { 
    color: orange;
    font-size: 12px;
}    /* maybe */
.plantable td.status.s3 { 
    color: red;
    font-size: 12px;
}       /* unhappy */
.plantable td forsinket { cursor: pointer; }
.plantable td fl1 {font-weight: 700; }
.plantable td fl2 {
    color: darkmagenta;
    font-size: 10px;
}
.plantable td fl3 {
    font-weight: 700;
    color: blue;
}

.plantable td.status.s0,
.plantable td.status:empty {
  color: #ccc;
}

.plantable td a,
.plantable td a:link,
.plantable td a:visited,
.plantable td a:hover,
.plantable td a:active {
  text-decoration: none;   /* kill underline in all states */
  color: inherit;          /* take the td’s color */
}

/* Table cell footprint stays fixed */
td.status {
  position: relative;
  width: 2.6rem;              /* aligns columns */
  text-align: center;
  padding: .35rem 0;
  vertical-align: middle;

  /* match these to your theme */
  --ring-bg: #fff;            /* inner fill = table background */
  --ansvar-color: black;    /* ring color for ansvar */
}

/* Your existing semantic colors (status) */
td.status.s1 { color: #1e9e43; }  /* green */
td.status.s2 { color: #d07b00; }  /* orange */
td.status.s3 { color: #c62828; }  /* red   */

/* Icon box (holds the emoji) */
td.status .icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1;
}

/* Emoji itself (or any symbol text) */
td.status .icon .glyph {
  font-size: 0.85rem;         /* tweak for iPad legibility */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Helvetica Neue", Arial, sans-serif;
  position: relative; z-index: 1; /* ensure above the ring */
}

/* === The “fat ring” overlay for ansvar ===
   Two concentric discs using ::before (outer) and ::after (inner) */
td.status .icon.ansvar::before,
td.status .icon.ansvar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;                 /* behind the glyph */
}

/* Outer disc = ring color */
td.status .icon.ansvar::before {
  inset: -1px;                /* makes overall diameter a bit larger than icon */
  background: var(--ansvar-color);
}

/* Inner disc = table background → punches the hole */
td.status .icon.ansvar::after {
  inset: 1px;                 /* controls ring thickness (outer - inner)/2 */
  background: var(--ring-bg);
}

.usrname a { pointer-events: none; }


@keyframes blinker {  
  50% { opacity: 0; }
}

/* p150_0x - billetsalg status */

/* Table container */
table.billetstatus {
  width: 100%;
  max-width: 700px;
  margin: 1rem auto;
  border-collapse: collapse;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;   /* ensures even column widths */
}

/* Welcome row */
table.billetstatus .velkommmen {
  background: #f0f4f9;
  color: #333;
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 2px solid #d6dee9;
}

/* Header row */
table.billetstatus th {
  background: #2f5d8a;
  color: #fff;
  padding: 6px;
  text-align: center;
  font-weight: 400;
  border-bottom: 2px solid #d6dee9;
}

/* Force even widths for first four columns */
table.billetstatus th:nth-child(-n+4),
table.billetstatus td:nth-child(-n+4) {
  width: 22%;  /* ~4×22% = 88%, leaves ~12% for button column */
}

/* Data row */
table.billetstatus td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #e1e7ef;
  font-size: 12px;           /* slightly smaller */
  font-weight: normal;       /* no bold */
  color: #333;
}

/* Timestamp column a bit lighter still */
table.billetstatus td:first-child {
  font-size: 13px;
  font-weight: normal;
  color: #666;
}

/* Last row border removal */
table.billetstatus tr:last-child td {
  border-bottom: none;
}

/* Button style */
table.billetstatus button {
  background: transparent;
  color: #2f5d8a;
  font-weight: 600;          /* a little stronger than normal, but not heavy */
  border: 1px solid #2f5d8a; /* thinner border */
  padding: 4px 8px;          /* smaller button */
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease-in-out;
}
table.billetstatus button:hover {
  background: #2f5d8a;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  table.billetstatus {
    font-size: 13px;
  }
  table.billetstatus td {
    font-size: 14px;
    padding: 8px;
  }
}

/* teamselection */
.team-controls {
  display: flex; gap: 8px; align-items: center; margin: 8px 0 12px;
  font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
.team-controls .filter-btn {
  border: 1px solid #ccc; background: #f7f7f7; padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.team-controls .filter-btn.active { border-color: #2f5d8a; box-shadow: 0 0 0 2px rgba(47,93,138,0.12) inset; }
#team-search { flex: 1; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.teambox {
  border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px;
  background: #fff; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; font-size: 14px;
}
.teambox:hover { border-color: #2f5d8a; }
.teambox.added { background: #eaf6ea; border-color: #2f8a4b; }
.teambox.disabled { opacity: 0.5; pointer-events: none; }
.teambox .badge {
  font-size: 11px; padding: 2px 6px; border-radius: 999px; border: 1px solid #ccc; color: #666;
}
.hidden { display: none !important; }

#new-team-form input { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }
#new-team-form button { border: 1px solid #2f5d8a; background: #2f5d8a; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
#new-team-form button:hover { filter: brightness(1.05); }
/* Column widths for the input table */
/* Column widths for the input table (w/ Safari fallback) */
#tblInput { table-layout: fixed; }

#tblInput col.c-team    { width: auto; }   /* expands */
#tblInput col.c-score   { width: 56px; }   /* tighter */
#tblInput col.c-actions { width: 78px; }   /* tighter */

/* Fallback for Safari/iPad that sometimes ignores <colgroup> */
#tblInput th:nth-child(2), #tblInput td:nth-child(2) { width: 56px; }
#tblInput th:nth-child(3), #tblInput td:nth-child(3) { width: 78px; }

/* Score input narrow and right-aligned */
#tblInput td input.score {
  width: 100%;
  max-width: 54px;
  box-sizing: border-box;
  text-align: right;
  padding: 4px 6px;
  font-size: 14px;
}

/* Action cell + button compact */
#tblInput td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;   /* avoid stretching */
  text-overflow: ellipsis;
}
#tblInput .row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}
#tblInput .row-actions .btn {
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.1;
  width: 100%;       /* fills the (narrow) column without widening it */
}

.hidden { display: none !important; }

.heads-modal { position: fixed; inset: 0; z-index: 999; }
.heads-modal .heads-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
}
.heads-modal .heads-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: #fff; border-radius: 12px; padding: 16px; min-width: 260px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25); font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
.heads-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.heads-buttons { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 10px; }
.heads-buttons button {
  border: 1px solid #ccc; padding: 8px 0; border-radius: 8px; cursor: pointer; background: #f8f8f8;
}
.heads-actions { display: flex; justify-content: flex-end; }
.heads-actions .cancel {
  border: 1px solid #999; background: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer;
}

.teambox.added { background: #eaf6ea; border-color: #2f8a4b; }
.teambox.disabled { opacity: 0.6; pointer-events: none; }