@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&family=Inconsolata:wght@400;600&display=swap");

/* css toggle slider */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.check {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 20px;
  transition: .4s;
  width: 100%;
  height: 100%;
}

.check::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

input:checked + .check {
  background-color: #485fc7;
}

input:checked + .check::before {
  transform: translateX(18px);
}

/* end toggle slider */

.theme-toggle-item {
  gap: 0.75rem;
  width: 100%;
}

.theme-toggle-item label.fixed-label {
  flex: 1 1 auto;
  min-width: 0;
}

.theme-toggle-item .switch {
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.theme-toggle-item .switch .check {
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12);
}

[data-theme='dark'] .theme-toggle-item .switch .check {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}


html, body {
  transition: background-color 0.1s ease, color 0.1s ease;
}

:root {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/* modal styling */

.modal-box > form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modal-box::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.modal-box {
  width: 80vw;
  height: 80vh;
  padding: 2rem;
  border: none;
  border-radius: 8px;
  max-width: none;
  max-height: none;
}

dialog.modal-box {
  background-color: #fff;
  color: #363636;
  padding: 2rem;
  border-radius: 8px;
  border: none;
  width: 80vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

dialog.modal-box::backdrop {
  background: rgba(10, 10, 10, 0.45);
}


dialog.modal-box {
  display: none;
  padding: 0;
  border: none;
}

dialog.modal-box[open] {
  display: flex;
  flex-direction: column;
  width: 80vw;
  height: 80vh;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--bulma-border);
  overflow: auto;
  background-color: var(--bulma-background);
  color: var(--bulma-text);
  box-shadow: var(--bulma-shadow);
}
/* end modal styling */

/* main sections styling */
.info-section {
  height: 13vh;
}
.project-list-section {
  height: 65vh;
  overflow: auto;
}
.full-height-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

.section.info-section {
  padding-left: 8vw;
  padding-right: 8vw;
}
.section.project-list-section {
  padding-left: 8vw;
  padding-right: 8vw;
} /* <-- FIXED: added missing closing brace */

/* end main section styling */

.ph-spinner {
  animation: spin 2s linear infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.tag.is-success.pulse {
  animation: pulse 1.5s infinite ease-in-out;
}


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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 rgba(220, 53, 69, 0); }
  50% { box-shadow: 0 0 8px rgba(220, 53, 69, 0.6); }
}
.tag.is-danger.glow {
  animation: glow 1s infinite ease-in-out;
}

/* Utility helper: allow Bulma dropdown menus inside table containers to render outside the scroll box */
.table-container.has-visible-overflow {
  overflow-y: visible;
}

.table-container.has-visible-overflow .dropdown-menu {
  z-index: 30;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.tag.is-warning.blink {
  animation: blink 1.2s infinite;
}

/* project table lives in the main user view */

#project-table {
  table-layout: fixed;
}

#project-table th,
#project-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-table th:nth-child(1),
#project-table td:nth-child(1) {
  width: 3%;
}

#project-table th:nth-child(2),
#project-table td:nth-child(2) {
  width: 3%;
}

#project-table th:nth-child(3),
#project-table td:nth-child(3) {
  width: 7%;
}

#project-table th:nth-child(4),
#project-table td:nth-child(4) {
  width: 15%;
}

#project-table th:nth-child(5),
#project-table td:nth-child(5) {
  width: 10%;
}

#project-table th:nth-child(6),
#project-table td:nth-child(6) {
  width: 10%;
}

#project-table th:nth-child(7),
#project-table td:nth-child(7) {
  width: 10%;
}

#project-table th:nth-child(8),
#project-table td:nth-child(8) {
  width: 15%;
}

#project-table th:nth-child(9),
#project-table td:nth-child(9) {
  width: 10%;
}

#project-table th:nth-child(10),
#project-table td:nth-child(10) {
  width: 10%;
}

#project-table th:nth-child(11),
#project-table td:nth-child(11) {
  width: 10%;
}


/* end project table */

.tags-input {
  background-color: var(--bulma-background);
  border-color: var(--bulma-border);
  color: var(--bulma-text);
}

.tags-input input {
  background-color: transparent;
  color: inherit;
  border: none;
}

.tags-input .tag {
  background-color: var(--bulma-background-hover);
  border: 1px solid var(--bulma-border);
  color: var(--bulma-text-strong);
}

.tags-input .tag.is-info {
  background-color: var(--bulma-info);
  color: var(--bulma-info-invert);
  border-color: transparent;
}

.tags-input .tag .delete {
  color: var(--bulma-text-weak);
}

.tags-input .dropdown-content {
  background-color: var(--bulma-background);
  border-color: var(--bulma-border);
  color: var(--bulma-text);
  box-shadow: var(--bulma-shadow);
}

.tags-input .dropdown-item {
  background-color: transparent;
  color: inherit;
}

.tags-input .dropdown-item:hover,
.tags-input .dropdown-item.is-active {
  background-color: var(--bulma-link);
  color: var(--bulma-link-invert);
}

.tags-input .dropdown-item.is-active .tag {
  color: inherit;
}

.sparkle-loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 2px solid #FF3D00;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 4px;
  top: 4px;
  border: 2px solid #FFF;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.tab-content { display: none; }
.is-active.tab-content { display: block; }

[hx-get]:hover { cursor: pointer; }

.sidebar { display: flex; flex-direction: column; height: 100%; }
.sidebar-top { flex-grow: 1; }

.menu-tile { min-height: 15vh; }
#main-content-container { min-height: 70vh; }

.header, .footer { padding: 1rem; text-align: center; }

.main-margin { margin-top: 5vh; }

.level-right { align-items: center; }
.hidden-poller { display: none; }

/* ---------- Global: table cell vertical centering ---------- */
.table td,
.table th { vertical-align: middle; }

td.is-valign-top, th.is-valign-top,
.is-valign-top td, .is-valign-top th { vertical-align: top !important; }

td.is-valign-bottom, th.is-valign-bottom,
.is-valign-bottom td, .is-valign-bottom th { vertical-align: bottom !important; }

.tags-input {
  min-height: auto;

  .input {
    border: 0;
    height: initial;
    margin: initial;
  }
}

/* ================================
   Termbases: wide table ergonomics
   ================================ */

/* Scroll container around the concepts grid */
.wide-scroll {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid rgba(10,10,10,.1);
}

/* Sticky header */
.table.is-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Frozen first & last columns */
.table .is-sticky-left {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}
.table .is-sticky-right {
  position: sticky;
  right: 0;
  z-index: 2;
  background: inherit;
}

/* Compact density toggle */
.table.is-compact td,
.table.is-compact th {
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.input.is-compact,
.textarea.is-compact {
  padding: .35rem .5rem;
  font-size: .85rem;
}
.buttons.is-compact .button {
  height: 2rem;
  line-height: 1.2;
  font-size: .8rem;
}

/* Hideable language columns */
.is-col-hidden { display: none !important; }

/* Make small inputs look neat inside table cells */
.table .input.is-small,
.table .textarea.is-small {
  width: 100%;
}

/* Termbase styles  */
/* Light header separators for many-column headers */
.table.concept-table thead th {
  white-space: nowrap;
  border-bottom: 1px solid rgba(10,10,10,.08);
}

tr.concept-row.is-dirty { background: #fffbeb; }                        /* warning-light */
tr.is-dirty td { box-shadow: inset 0 -1px 0 #ffe08a33; }    /* subtle divider */

/* Field-level cue */
input.ts-dirty { background: #fffdf2; box-shadow: 0 0 0 2px #ffdd5733; }

/* Unsaved badge */
[data-unsaved]{ display:none; margin-right:.5rem; }
tr.concept-row.is-dirty [data-unsaved]{ display:inline-flex; }

/* Save button gating */
[data-save][disabled]{ opacity:.45; pointer-events:none; }

/* Quick “saved” flash (applied to the row you return after save) */
tr.concept-row.flash-saved { animation: savedFlash 1.25s ease-out 1; }
input.ts-dirty{ background:#fffdf2; box-shadow:0 0 0 2px #ffdd5733; }

@keyframes savedFlash {
  0% { box-shadow: inset 0 0 0 9999px rgba(35,209,96,.18); }
  100% { box-shadow: inset 0 0 0 0 rgba(35,209,96,0); }
}
.tb-dot{ display:none; width:.5rem; height:.5rem; border-radius:50%;
         background:#ffdd57; box-shadow:0 0 0 2px #ffdd5733; margin-right:.4rem; }
tr.concept-row.is-dirty .tb-dot{ display:inline-block; }

/* gives the shell some height so centering is visible */
.hx-shell {

    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;

    }

/* ===========================
   Translator Scandinavia — Spinner
   =========================== */
.ts-loader{
  /* internal defaults */
  --_size: 48px;
  --_border: 1px;
  --_speed: 2s;
  --_timing: linear;
  --_radius: 0;

  /* public API (override anywhere) */
  width: var(--ts-size, var(--_size));
  height: var(--ts-size, var(--_size));
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  color: var(--ts-color, #000);
  border: var(--ts-border-width, var(--_border)) solid currentColor;
  border-radius: var(--ts-radius, var(--_radius));
  animation: ts-fill var(--ts-speed, var(--_speed)) var(--ts-timing, var(--_timing)) infinite alternate;
}

@keyframes ts-fill{
  0%   { box-shadow: inset 0 0 0 0 currentColor; }
  100% { box-shadow: inset 0 calc(-1 * var(--ts-size, var(--_size))) 0 0 currentColor; }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ts-loader{ animation: none }
}

/* Optional: horizontal fill variant (simple) */
.ts-loader--x{ transform: rotate(90deg); }

.control.has-icons-right .icon.is-right.js-password-toggle {
  pointer-events: auto;
  cursor: pointer;
}