:root {
  color-scheme: light;
}

body {
  background: #f1f5f9;
}

.toast-enter {
  animation: toastIn 0.3s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(2rem); }
  to { opacity: 1; transform: translateX(0); }
}

.toast-exit {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(2rem); }
}

/* Modals: native <dialog class="app-modal"> with an inner wrapper that carries the look (see site.js openModal). */
dialog.app-modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: calc(100vw - 2rem);
  overflow: visible;
}

dialog.app-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* Icon-only row actions (tables). Always paired with a title and aria-label carrying the words. The width is the icon plus
   a little padding (so a row's buttons sit close together and the actions column stays narrow); on touch screens the target
   is taller and never narrower than 2.25rem so it can be hit with a finger. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.3rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #6a6a64;
  cursor: pointer;
}

.icon-btn:hover {
  background: #efefea;
  color: #0b0b0d;
}

.icon-btn-danger {
  color: #dc2626;
}

.icon-btn-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (pointer: coarse) {
  .icon-btn {
    min-width: 2.25rem;
    height: 2.5rem;
    padding: 0 0.5rem;
  }
}

/* Text buttons (approved 2026-10-08; every page uses these instead of ad-hoc colour classes). One shape, four looks:
   primary = the main action, secondary = everything else, danger = the final irreversible step (a confirm dialog, deleting
   a workspace), danger-ghost = destructive actions in toolbars and forms. One red family: #dc2626, hover #b91c1c, tint #fef2f2. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
}

.btn-lg {
  padding: 0.75rem 1rem;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: #c6f24e;
  color: #0b0b0d;
}

.btn-primary:hover:not(:disabled) {
  background: #8ac400;
}

.btn-secondary {
  background: #efefea;
  color: #35352f;
}

.btn-secondary:hover:not(:disabled) {
  background: #e9e9e3;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-danger-ghost {
  background: #fef2f2;
  color: #b91c1c;
}

.btn-danger-ghost:hover:not(:disabled) {
  background: #fee2e2;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Redirect / expired pages (Pages/ShortLink.cshtml) render their own minimal shell instead of
   the app layout, but still load this stylesheet. */
.redirect-card {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}

.redirect-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #047857;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.5rem;
}

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

.redirect-url {
  color: #047857;
  font-size: 0.75rem;
  margin-top: 0.75rem;
  word-break: break-all;
  opacity: 0.8;
}

.bio-description p + p {
  margin-top: 0.75rem;
}

.bio-description a {
  color: var(--bio-accent);
  text-decoration: underline;
}

/* A scrolling table wrapper must also contain its absolutely positioned descendants (the .sr-only
   header text, for one). Otherwise they escape the clip, sit at the far right of a wide table, and
   widen the whole page on phones. */
.overflow-x-auto {
  position: relative;
}

/* Collapsible panels (Pages/Shared/_PanelSummary.cshtml): open = hide the one-line detail, point the chevron up. */
details[open] > summary .summary-detail {
  display: none;
}

details > summary .summary-chevron {
  transition: transform 0.15s;
}

details[open] > summary .summary-chevron {
  transform: rotate(180deg);
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Pinned actions column. Opt in with data-pin-actions on a <table> whose last column holds the row actions (and which sits in a
   .overflow-x-auto wrapper): when the table is wider than the screen it scrolls sideways behind that last column, so the actions
   are always in reach. Needs the separate-borders model: a collapsed-border table leaves its row lines behind when a cell sticks.
   The lines move from the <tr> (where Tailwind puts them; ignored in this model) to the cells. Backgrounds are opaque and
   match the header (slate-50) and the row hover (slate-50) so nothing shows through. The edge shadow appears only while content
   is actually hidden beneath (site.js adds .pin-shadow to the wrapper). */
table[data-pin-actions] {
  border-collapse: separate;
  border-spacing: 0;
}

table[data-pin-actions] > tbody > tr > td {
  border-bottom: 1px solid #efefea;
}

table[data-pin-actions] > thead > tr > th:last-child,
table[data-pin-actions] > tbody > tr > td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
}

table[data-pin-actions] > thead > tr > th:last-child {
  background: #f7f7f4;
}

table[data-pin-actions] > tbody > tr > td:last-child {
  background: #fff;
}

table[data-pin-actions] > tbody > tr:hover > td:last-child {
  background: #f7f7f4;
}

.pin-shadow > table[data-pin-actions] > thead > tr > th:last-child,
.pin-shadow > table[data-pin-actions] > tbody > tr > td:last-child {
  box-shadow: -8px 0 8px -8px rgba(11, 11, 13, 0.22);
}