/* iPhone SE screen size */

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

#app {
  padding-top: env(safe-area-inset-top);
}

*, *::before, *::after {
  box-sizing: border-box;  /* keeps padding inside the width */
}

body {
  margin: 0;
  background: #f5f5f5;
  font-family: system-ui, sans-serif;
}

#app {
  position: relative;
  width: 375px;
  height: 667px;
  margin: auto;
  background: #fff;
  overflow: hidden;
}

h1 {
  text-align: center;
  font-size: 22px;
  margin: 0.3rem 0rem 0rem 0rem;
}

h2 {
  text-align: center;
  font-size: 16px;
}

hr { margin: 2px; }

#login-name {
  padding: 4px;
}
#login-grouping {
  min-width: 13em;
  padding: 4px;
}
#login-grouping.placeholder { color: gray; }
#login-grouping { color: black; }

#profile-grouping {
  height: 2.4em;
  min-width: 13em;
  padding: 3px;
}
#profile-grouping.placeholder { color: gray; }
#profile-grouping { color: black; }

.screen {
  display: none;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.screen.active { display: block; }

.splash-container {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.splash-container img,
.splash-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#splash-play-btn {
  position: absolute;
  z-index: 10;
  bottom: 8.3px;
  right: 44px;
  font-size: 14px;
  color: white;
  text-shadow: 0 0 6px black;
}
#splash-mute-btn {
  position: absolute;
  z-index: 10;
  bottom: 8px;
  right: 8px;
  padding: 1.6px 2px 1.4px 2px;
}

.font10 { font-size: 10px; }
.font12 { font-size: 12px; }

.marginL5 { margin-left: 5px; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.just-left { justify-self: start; }
.just-center { justify-self: center; }
.just-right { justify-self: end; }

.vert-center { vertical-align: middle; }

.bold { font-weight: bold; }
.unbold { font-weight: 350; }

.background-white { background: #fff; }

.color-red { color: red; }

.dustyrose {
  background-color: #D8A7B1;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
}

.dense-shade {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 2px,
      transparent 2px,
      transparent 4px
    );
}
.hatch-sparse {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.05) 0,
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 12px
    );
}

.back-arrow {
  position: absolute;       /* take it out of flow */
  top: 1.5rem;
  left: 0.4rem;
  cursor: pointer;
  z-index: 1000;            /* ensure it stays clickable */
}
.back-arrow .icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
.back-arrow .spinner {
  position: absolute;
  top: 0.3rem;
  left: 1.5rem;
}
.back-arrow:hover,
.back-arrow:focus-visible {
  background: rgba(0,0,0,0.08);
}

.back-arrow:active {
  background: rgba(0,0,0,0.15);
  transform: scale(0.95);
}

.spinner {
  display: inline-block;        /* gives it box layout */
  width: 14px;                  /* width of spinner */
  height: 14px;                 /* height of spinner */
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;             /* spacing from button */
  vertical-align: middle;       /* align with button text */}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#legend { margin-top: 10px; }

.legend-box {
  width: 40px;
  height: 20px;
  margin: 10px;
  background: white;
  border-radius: 10px;
  position: relative;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.12),
    0 10px 24px rgba(0,0,0,0.08);
}

.legend-row {
  display: flex;
  align-items: center;
  height: 32px;
}

.bullet-point {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-btn-row {
  display: flex;
  justify-content: space-between;
}

.form {
  max-width: 370px;      /* keeps the form readable */
  margin: 0 auto;        /* centers on page */
  padding: 20px;
  font-family: sans-serif;
}

.fullwidth-box {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #D3D3D3; /* LightGray */
  border-radius: 4px;
  padding: 8px 16px 4px 16px;
  box-sizing: border-box;
}

.field-player {
  display: flex;
  margin-bottom: 8px;
}
.field-player span:first-child {
  width: 80px;   /* fixed label width */
  flex-shrink: 0;
}

.field {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.field input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.msg {
  text-align: left;
  font-size: 12px;
  padding: 4px 2px 6px 4px;
}

.comment {
  margin-top: 6px;       /* spacing below the input */
  font-size: 14px;
  color: #555;
}

.hidden {
  display: none;
}

/* Groupings */
.grouping-hdr {
  display: flex;
  font-size: 11px;
  justify-content: space-between;
}

.grouping-row {
  display: grid;
  grid-template-columns: 1fr auto;
  /* gap: 2px 12px;   row gap, column gap */
  align-items: start;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.grouping-row:nth-child(even) {
  background: #e0f0ff;
}
.grouping-row:nth-child(odd) {
  background: #white;
}
.grouping-row:hover {
  background: #f5f7fa;
  cursor: pointer;
}
.grouping-row:active {
  background: #d0d0d0;
}

.grouping-str {
  overflow-wrap: break-word;
}

.grouping-num {
  text-align: right;
  white-space: nowrap;
}

/* CALENDAR */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  height: 27%;
  margin-top: 6px;
}

.day {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.day {
  background-color: #cfe8d5; /* pine green rgb(207, 232, 213) */
}
.day.alt {
  background-color: #fff1b8; /* egg yolk rgb(255, 241, 184) */
}
.day {
  position: relative;
}
.day span.bullet-point {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.day-number {
  display: grid;           /* better than flex for text centering */
  place-items: center;

  width: 26px;
  height: 26px;

  box-sizing: border-box;
  line-height: 1;          /* kill font metric surprises */
  font-weight: 600;
  font-family: system-ui, sans-serif;

  border-radius: 50%;
}

.day-number.today {
  border: 1px solid #333;
  position: relative;
}

.has-game {
  background-image:
    repeating-linear-gradient(
      150deg,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 2px,
      transparent 2px,
      transparent 12px
    );
}

.is-player {
  background-image:
    repeating-linear-gradient(
      150deg,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 2px,
      transparent 2px,
      transparent 12px
    ),
    repeating-linear-gradient(
      30deg,
      rgba(255, 0, 0, 0.15) 0px,
      rgba(255, 0, 0, 0.15) 2px,
      transparent 2px,
      transparent 12px
    );
}

.is-player-changed {
  background-image:
    repeating-linear-gradient(
      150deg,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 2px,
      transparent 2px,
      transparent 12px
    ),
    repeating-linear-gradient(
      30deg,
      rgba(255,0,0,.15) 0px,
      rgba(255,0,0,.15) 2px,
      transparent 2px,
      transparent 3px,
      rgba(255,0,0,.15) 3px,
      rgba(255,0,0,.15) 5px,
      transparent 5px,
      transparent 12px
    );
}

.day-num-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

/* WEATHER */
.weather-box {
  height: 30%;
  margin-top: 6px;
  margin-bottom: 6px;
  background: #eef3f7;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
}

.weather-box h2 {
  margin: 0px 0px 6px 0px;
}

.forecast-zip {
  padding-left: 5.3rem;
}
button.tiny-button {
  font-size: 10px;
  padding: 1px 3px;
  line-height: 1.0;
}


/* SCREEN 2 */
.header {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  margin-bottom: 6px;
}

.hours {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  height: 40%;
}

.hour {
  background-color: #e0f0ff; /* soft blue */
  border-radius: 50%;
  width: 75%;          /* ← shrink to ~2/3 */
  aspect-ratio: 1 / 1;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.hour.chosen {
  box-shadow: 0 0 0 1px #003a8c; /* dark blue rim */
}
.hour {
  position: relative;
}
.hour span.bullet-point {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

#players-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.player-row img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.player-num {
  background-color: #eef3f7;
}
.player-num.player-is-user {
  box-shadow: -3px 0 0 0 #D8A7B1;
}

.player-notes {
  flex: 1;              /* take remaining space */
  text-align: right;
  font-size: 12px;
  background-color: #eef3f7;
}

.time-range {
  display: flex;
  gap: 1.5rem;
}

.time-input {
  display: inline-flex;
  gap: 4px;
}

.time-input input {
  width: 50px;
  text-align: center;
}

.time-input.error input,
.time-input.error select {
  border: 2px solid #c00;
  background: #ffecec;
}

.game-row {
  display:flex;
  flex-shrink: 0;
  gap: 10px;
  padding: 3px;
  align-items: center;
}

.game-location {
  display: flex;
  align-items: center;
}

.loc-tag {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
}
.loc-text {
  flex: 1;
}
.loc-invisible {
  visibility: hidden;
}

.game-row span:last-child {
  flex: 1;              /* take remaining space */
  min-width: 0;         /* IMPORTANT: allow shrinking */
  font-size: 0.8rem;    /* your small text */
  line-height: 1.2;
}
#game-start {
  font-weight: 500;
}
#game-end {
  font-weight: 500;
}

.changed {
  line-height: 1em;
  width: 4.3em;
  background-color: red;
  color: white;
  font-size: 7px;
  padding: 1px 1px 2px 1px;
}
#players-changed { margin-bottom: 4px; }

.lgame-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #ccc;
  margin-top: 15px;
  font-size: 13px;
}
.lgame-list .lgame-row:not(.lgame-grid-header):hover {
  background: #f5f7fa;
  cursor: pointer;
}

.lgame-row {
  display: grid;
  height: 2em;
  margin-left: 3px;
  grid-template-columns: 33fr 37fr 7fr 23fr;
  align-items: center;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.lgame-row.player-is-user {
  box-shadow: -3px 0 0 0 #D8A7B1; /* left stripe */
}
.lgame-row:focus {
  outline: 2px solid #4a90e2;
}
.lgame-row.selected {
  background: #dde8ff;
}
.lgame-row.selected:focus {
  background: #1f5fbf;
}

.lgame-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: #e6e8eb;
  font-size: 13px;
  padding: 4px;
  margin: 0;
}
.full {
  grid-column: 1 / -1; /* handle long single item in 3-column grid */
}

.lgame-grid-container {
    width: 100%;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}

.lgame-grid-header {
    display: grid;
    grid-template-columns: 33fr 37fr 7fr 23fr;
    align-items: center;
    background: #f3f3f3;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding: 3px;
}

.lgame-grid-body {
    overflow-y: auto;
	overflow-x: hidden;
    flex: 1;
}

.lgame-grid-cell {
	position: relative;
	min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loc-description { margin: 4px; }
#new-game-location { height: 2em; }
#new-game-location select { color: gray; }
#new-game-location select:focus { color: black; }
#new-game-location select option { color: black; }

textarea.game-row {
  resize: none;
  overflow: hidden;
  max-height: 6em;
  min-height: 3em;
  overflow-y: auto;
  font-size: 14px;
}

/* new Location modalL */
/* Dimmer */
#modalL-dimmer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9000;
}

#modalL-dimmer.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Anchored modalL */
#anchored-modalL {
  position: fixed;
  z-index: 9100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 14px;
}

#anchored-modalL.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modalL-content {
  box-sizing: border-box;
  background: white;
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  width: min(260px, 90vw);
}

.modalL-field {
  margin-bottom: 12px;	
}

/* new Location color-tag selection */
.color-radio input {
  display: none;
}

.color-radio label {
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  margin: 0 1px;
  border-radius: 3px;
}
.color-radio label:focus-visible {
  background: rgba(0,0,0,0.1);
}

.color-radio input:checked + label {
  outline: 1px solid #444;
}

.notes-text {
  white-space: pre-wrap; /* as entered eg LF */
  overflow-wrap: break-word;
  max-width: 60ch; /* ~60 chars long */
}

/* avatar file select */
.btn {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  padding: 4px 10px;
  background: #eaeaea;
  border: 1px solid #888;
  border-radius: 3px;
  font-family: sans-serif;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn:active {
  background: #d0d0d0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.btn input {
  display: none;
}

#fileName { margin-left: 8px; color: #555; font-family: sans-serif;}

input[type="file"] {
  min-width: 0;
}

.info-toggle {
  display: none;
}
.info-label {
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
}
.info-box {
  display: none;
  font-size: 12px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border-radius: 6px;
  width: 350px;
}
.info-toggle:checked + .info-label + .info-box {
  display: block;
}

.attention {
  animation: glow 3s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% {
    opacity: 1;
    text-shadow: none;
  }
  50% {
    opacity: 0.75;
    text-shadow: 0 0 8px currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .attention,
  .announcement,
  .bell-text {
    animation: none;
  }
}

.announcement {
  display: inline-block;
  transform-origin: top center;
  animation: ring 1.5s infinite;
}
@keyframes ring {
  0%, 86%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-12deg); }
  90% { transform: rotate(12deg); }
  92% { transform: rotate(-8deg); }
  94% { transform: rotate(8deg); }
  96% { transform: rotate(-4deg); }
  98% { transform: rotate(4deg); }
}
.bell-text {
  animation: glowt 1.5s infinite;
}
@keyframes glowt {
  0%, 90%, 100% { opacity: .5; }
  92%, 98% { opacity: 1; }
}

.editmy-container {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid #ccc;
  font-size: 12px;
}

.editmy-scroll-box {
  max-height: 200px;
  max-width: 345px;
  overflow-y: auto;
  border: 1px solid #ccc;
  touch-action: pan-y; /* long press handling */
}

.editmy-row {
  display: flex;
  gap: 4px;
  padding: 2px;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
  overflow: hidden;
}
.editmy-row .info-icon:hover { cursor: pointer; }
.form-row-avatar .info-icon:hover { cursor: pointer; }
.form-row-avatar .editmy-delete-avatar:hover { cursor: pointer; }

.editmy-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editmy-date-mdy { max-width: 80px; }

.editmy-delete-handle {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  padding: 6px 2px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation; 
}
.editmy-delete-handle.holding {
  background: #ffdddd;
  border-radius: 4px;
}

.editmy-separator {
  border-bottom: 3px double #aaa; 
}

.editmy-game:nth-child(odd),
.editmy-player-note:nth-child(odd),
#editmy-locations .editmy-row:nth-child(odd) {
  background: white;
}

.editmy-game:nth-child(even),
.editmy-player-note:nth-child(even),
#editmy-locations .editmy-row:nth-child(even) {
  background: #e0f0ff;
}

.editmy-field {
  min-width: 0;
  width: 100%;
  margin: 2px 0px 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font: inherit;
  background: #f9f9f9;

  user-select: none;  /* long press handling */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.editmy-field:disabled {
  background: #f9f9f9;
  color: #333;
  border-color: #777;
  cursor: text; /* indicates selectable */
}

.editmy-field:enabled {
  background: white;
  border-color: #4a90e2;
  outline: none;
}

.editmy-field[data-field="color"] {
  width: 22px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

.editmy-editing {
  outline: 2px solid #4da3ff;
}

textarea.editmy-field {
  min-height: 20px;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.editmy-start-time,
.editmy-end-time { max-width: 50px; }

.editmy-date-time-range {
  display: flex;
  gap: 13px;
  align-items: center;     /* vertical */
}
.editmy-date-hint {
  display: flex;
  justify-content: space-between;
  background: #eef3f7;
  padding: 2px 4px 6px 4px;
  font-size: 12px;
}

.editmy-game-location,
.editmy-game-notes {
  min-width: 0;
  width: 100%;
  height: 2em;
  margin: 2px 0px 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font: inherit;
  background: #f9f9f9;
}

/* editmy YOU fields*/
.form-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  margin-bottom: 2px;
  gap: 10px;
}
.form-row input.editmy-field {
  width: 90%;
  padding: 2px 8px;
  box-sizing: border-box;
}
.form-row-avatar {
  display: grid;
  grid-template-columns: max-content max-content max-content 1fr;
  align-items: center;
  margin-bottom: 2px;
  gap: 10px;
}

.filter-scroll-box {
  height: 300px;
  max-width: 345px;
  overflow-y: auto;
  border: 1px solid #aaa;
}

.filter-separator {
  border: none;
  height: 14px;
  background: linear-gradient(
    to bottom,
    transparent 0px 2px,
    #cfe8d5 2px 6px,
    transparent 6px 8px,
    #D8A7B1 8px 12px,
    transparent 12px 14px
  );
}

.filter-row { cursor: pointer; }

.filtRowNum {
  text-align: center;
  padding-left: 6px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
}
.filtRowNum.in { background-color: #cfe8d5; }
.filtRowNum.ex { background-color: #D8A7B1; }

.filter-target {
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s, opacity 0.08s, text-shadow 0.15s;
  touch-action: manipulation;
}
.filter-target:hover {
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
.filter-target:active {
  transform: scale(0.85);
  opacity: 0.7;
}
.filter-target:focus {
  outline: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

/* editmy Location color-tag selection */
.editmy-locations-container {
  position: relative;
}

/* new Location color-tag selection */
.color2-radio {
  background-color: #fff;
  padding: 4px;
  outline: 1px solid #000;
  border-radius: 3px;
}

.color2-radio input {
  display: none;
}

.color2-radio label {
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin: 0 1px;
  border-radius: 3px;
}
.color2-radio input:checked + label {
  outline: 1px solid #444;
}

/* Profile Groupings */
.profile-grps-container {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid #ccc;
  font-size: 15px;
}

.profile-grp-top {
  margin-bottom: 6px;
  border: 1px solid #999;
}

.profile-grp-top:nth-child(even) {
  background: #e0f0ff;
}
.profile-grp-top:nth-child(odd) {
  background: #white;
}

.profile-grp-scroll-box {
  max-height: 450px;
  max-width: 345px;
  overflow-y: auto;
}

.profile-grp-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 2px;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
  overflow: hidden;
}

.profile-grp-field {
  min-width: 0;
  width: 100%;
  margin-top: 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  white-space: pre-wrap;
  background: #f9f9f9;
}

/* width layout editmy screen */
.f0 { flex: 0 0 5%; }
.f1 { flex: 0 0 35%; }
.f2 { flex: 0 0 35%; }
.f3 { flex: 0 0 7%; }
.f4 { flex: 0 0 13%; }
.f5 { flex: 1 0 50%; }
.f6 { flex: 1 0 50%; }

/* width layout groupings */
.g1 { flex: 0 0 65%; }
.g2 { flex: 0 0 18%; }
.g3 { flex: 0 0 12%; }
.g4 { flex: 0 0 95%; }

/* floating panel */
.floating-actions {
  position: fixed;
  display: none;
  gap: 6px;
  background: white;
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 999;
  font-size: 12px;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
}

.floating-actions button {
  font-size: 12px;
  padding: 3px 8px;
  margin-right: 4px;
  white-space: nowrap;
}

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

.modal-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 80%;
  width: auto;
  min-width: 250px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  font-family: sans-serif;
}

.modal-text {
  margin-bottom: 20px;
  font-size: 14px;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}