/* cnas css */

/* Site color theme: white background, black text, accents #81A6C6 #AACDDC #F3E3D0 #D2C4B4 */
:root {
  --cnas-bg: #ffffff;
  --cnas-text: #000000;
  --cnas-primary: #81A6C6;
  --cnas-secondary: #AACDDC;
  --cnas-beige: #F3E3D0;
  --cnas-tan: #D2C4B4;
}

body {
  background-color: var(--cnas-bg);
  color: var(--cnas-text);
}

.button.is-primary {
  background-color: var(--cnas-primary);
  border-color: var(--cnas-primary);
}
.button.is-primary:hover {
  background-color: var(--cnas-secondary);
  border-color: var(--cnas-secondary);
}

/* Input / Edit box: light background and border */
.input,
.textarea {
  background-color: var(--cnas-beige);
  border-color: var(--cnas-tan);
  color: var(--cnas-text);
}
.input::placeholder,
.textarea::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

/* Editor / content box: beige background, black text */
.box {
  background-color: var(--cnas-beige) !important;
  color: var(--cnas-text) !important;
}
.box .title,
.box .subtitle,
.box .label,
.box .content,
.box p,
.box .has-text-grey,
.box .has-text-grey-dark,
.box .has-text-grey-light {
  color: var(--cnas-text) !important;
}

/* Grey text utilities → black (all text black) */
.has-text-grey,
.has-text-grey-dark,
.has-text-grey-light {
  color: var(--cnas-text) !important;
}

/* Front/main content: all text black (Welcome, subtitle, Logged in as...) */
.title,
.subtitle,
.section .title,
.section .subtitle,
.section p,
.section p strong,
p,
strong {
  color: var(--cnas-text) !important;
}

.rounded {
  border-radius: 15px;
}

.center-text {
  display: flex;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:wrap;
  justify-content: center;
  align-items: center;
}

.div-bottom {
  align-items: flex-end;
  display: flex;
}

#loading {
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.loading-dialog-panel {
  padding: 1rem 1.75rem;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, #1e293b 0%, #0f172a 55%, #172554 100%);
  background-clip: padding-box;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.45);
}

@keyframes loading-dialog-gradient {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

#loading .loading-dialog-text {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  margin: 0;
  background: linear-gradient(
    90deg,
    #64748b 0%,
    #cbd5e1 22%,
    #f8fafc 50%,
    #cbd5e1 78%,
    #64748b 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: loading-dialog-gradient 2.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #loading .loading-dialog-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: #e2e8f0;
    color: #e2e8f0;
  }
}