html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Rich-text note editor --- */
.note-editor__toolbar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.note-editor__btn {
  border: 1px solid var(--bs-border-color);
  background: #fff;
  border-radius: 0.25rem;
  min-width: 2rem;
  padding: 0.15rem 0.4rem;
  line-height: 1;
  cursor: pointer;
}

.note-editor__btn:hover {
  background: var(--bs-light);
}

.note-editor__area {
  min-height: 4.5rem;
  height: auto;
  overflow-y: auto;
}

.note-editor__area:empty::before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color);
}

.note-editor__area p:last-child {
  margin-bottom: 0;
}

/* Rendered note content (portal + logged lists): keep long links from overflowing. */
.note-content {
  overflow-wrap: anywhere;
}

.note-content p:last-child {
  margin-bottom: 0;
}

/* Date pickers on the time views (day and week). A native date input renders its own locale format
   and can't be restyled, so it sits transparently over a label we format ourselves and we call
   showPicker() on click. Styled to match the btn-outline-secondary nav buttons it sits between;
   each view sets its own fixed width so those buttons never shift as the label changes length. */
.date-field {
  position: relative;
  cursor: pointer;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}

.date-field input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.date-field:has(input:focus-visible) {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

/* Error tooltips (e.g. a failed Xero push on Invoicing). The message is multi-line — one headline
   plus a bullet per detail Xero returned — so keep the line breaks and give it room to read. */
.error-tip {
  cursor: help;
}

.tooltip-inner {
  max-width: 380px;
  text-align: left;
  white-space: pre-line;
}

/* --- "AI translate" (day view) ---
   A gradient border needs two background layers: the rainbow painted into the border box, and the
   body colour painted over the padding box on top of it. Anything simpler (an outline, a shadow)
   can't follow the border radius. The animation slides the rainbow rather than recolouring it.
   The tile is three times the button's width, and a background-position percentage resolves against
   (element − tile), so 150% is exactly one tile along and the loop is seamless. */
.btn-ai {
  border: 2px solid transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--bs-body-color);
  background:
    linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box,
    linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #a855f7, #f43f5e) border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  animation: ai-shimmer 6s linear infinite;
}

@keyframes ai-shimmer {
  to { background-position: 0 0, 150% 0; }
}

.btn-ai:hover {
  box-shadow: 0 0 0.65rem rgba(168, 85, 247, 0.4);
}

.btn-ai:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.btn-ai:disabled {
  opacity: 0.65;
  animation: none;
}

/* Same rainbow, used as text — for the modal heading that the button opens. */
.ai-gradient-text {
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .btn-ai { animation: none; }
}

/* A card that is itself a link (the dashboard's client-feedback card). Lifts on hover and takes a
   focus ring, so it reads as clickable and is reachable from the keyboard. */
.card-clickable {
    /* No display override — Bootstrap's .card flex column still applies. */
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.card-clickable:hover {
    border-color: #adb5bd;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.card-clickable:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .card-clickable {
        transition: none;
    }

    .card-clickable:hover {
        transform: none;
    }
}