/* Kundeportalen — custom styles layered on top of Tailwind (CDN).
   Keeps a Linear/Stripe/Notion feel: subtle borders, soft shadows, calm motion. */

:root {
  --ch-green: 16 185 129; /* emerald-500 */
  --ch-yellow: 245 158 11; /* amber-500 */
  --ch-red: 244 63 94; /* rose-500 */
}

html,
body {
  height: 100%;
}

/* Prevent phantom horizontal scroll on mobile: the off-canvas sidebar
   (position:fixed, translated off-screen left) otherwise lets iOS Safari pan
   the page sideways, so content looks cut off at the right edge. Clipping at
   the root stops the viewport scrolling horizontally while keeping the sticky
   topbar and the intentional inner overflow-x-auto scrollers working. */
html {
  overflow-x: hidden;
}
body {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Thin, subtle scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(212 212 216) transparent;
}
.dark * {
  scrollbar-color: rgb(63 63 70) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background-color: rgb(212 212 216);
  border-radius: 9999px;
}
.dark *::-webkit-scrollbar-thumb {
  background-color: rgb(63 63 70);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Health status helpers */
.dot-green {
  background-color: rgb(var(--ch-green));
}
.dot-yellow {
  background-color: rgb(var(--ch-yellow));
}
.dot-red {
  background-color: rgb(var(--ch-red));
}

/* Fade / scale transitions for overlays */
@keyframes ch-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ch-scale-in {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes ch-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ch-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ch-overlay {
  animation: ch-fade-in 0.15s ease-out;
}
.ch-modal {
  animation: ch-scale-in 0.16s ease-out;
}
.ch-drawer {
  animation: ch-slide-in 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.ch-toast {
  animation: ch-toast-in 0.18s ease-out;
}

/* Page transition */
@keyframes ch-page-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ch-page {
  animation: ch-page-in 0.18s ease-out;
}

/* Kanban / board drag states */
.ch-card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ch-card[draggable="true"] {
  cursor: grab;
}
.ch-card.dragging {
  opacity: 0.4;
}
.ch-col-over {
  outline: 2px dashed rgb(161 161 170);
  outline-offset: -4px;
}

/* Landscape on a short screen (phone / small tablet, where the sidebar is
   auto-shown): collapse the menu to an icon-only rail so it doesn't eat the
   limited height's width. Desktops (taller) and portrait keep full labels. */
@media (orientation: landscape) and (max-height: 600px) and (min-width: 768px) {
  #sidebar {
    width: 4rem;
  }
  #sidebar .ch-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  #sidebar .ch-brand-text {
    display: none;
  }
  #sidebar .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #sidebar .nav-link > span {
    display: none;
  }
  .ch-shell {
    padding-left: 4rem !important;
  }
}

/* Nav active indicator */
.nav-active {
  background-color: rgb(244 244 245);
}
.dark .nav-active {
  background-color: rgb(39 39 42);
}

/* Sortable table header button */
.th-sort {
  cursor: pointer;
  user-select: none;
}

/* Hide number input spinners for a cleaner look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Row hover affordance */
.row-click {
  cursor: pointer;
}

/* Dashboard image wall — images flowing past; hover grows one, click maximises */
@keyframes ch-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ch-marquee-rev {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.ch-wall-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: ch-marquee 60s linear infinite;
}
/* Pause the flow while inspecting. */
.ch-wall:hover .ch-wall-track {
  animation-play-state: paused;
}
/* Few images: a static, centered wall instead of a looping marquee. */
.ch-wall-track.ch-wall-static {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}
/* Each cell carries a small vertical offset + tilt (set inline) for a scattered,
   not-quite-aligned look, and overlaps its neighbour a little. */
.ch-wall-cell {
  flex: none;
  margin-right: -12px;
  position: relative;
}
/* Lift the hovered cell above its overlapping neighbours (each cell is its own
   stacking context due to the transform, so raising the cell — not just the img
   — is what brings the enlarged image fully to the front). */
.ch-wall-cell:hover {
  z-index: 40;
}
.ch-wall-img {
  display: block;
  height: 116px;
  width: auto;
  border-radius: 0.6rem;
  object-fit: cover;
  cursor: zoom-in;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ch-wall-img:hover {
  transform: scale(1.22);
  z-index: 40;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
  .ch-wall-img { height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-wall-track { animation: none; }
}