@import "tailwindcss";
@import "./fonts";

/* === THEME VARIABLES === */
@theme {
  /* ---- Colors ---- */
  --color-primary-blue: #105677;
  --color-soft-aqua: #D9E4EA;
  --color-olive-green: #B8D599;
  --color-warm-beige: #F6D89C;
  --color-muted-coral: #E9B19C;
  --color-followed-link-blue: #08374C;

  /* ---- Fonts ---- */
  --font-heading: "Blacker Display", serif;
  --font-body: "Whitney", sans-serif;
}

/* === BASE STYLES === */
@layer base {
  html {
    font-family: var(--font-body);
    color: #222;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-blue);
    font-weight: 900;
  }
}

.link-wave::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #B8D599 0%, transparent  100%);
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease-in-out;
  will-change: transform;
  pointer-events: none;
}

.link-wave:hover::before {
  transform: scaleX(1);
}

/* ───────────────────────────────────────────────────────────── */
/* COLLAPSED SIDEBAR                                             */
/* ───────────────────────────────────────────────────────────── */

.sidebar.collapsed { @apply w-20 px-0; }

.sidebar.collapsed .sidebar-content { @apply px-0; }

.sidebar.collapsed .logo-wrapper {
  @apply bg-white w-12 h-12 mx-auto rounded-md flex items-center justify-center;
}

/* swap logo variants */
.logo-icon  { @apply hidden; }
.logo-full  { @apply block;  }
.sidebar.collapsed .logo-full  { @apply hidden; }
.sidebar.collapsed .logo-icon  { @apply block;  }

/* centre icons & buttons */
.sidebar.collapsed .nav-icon  { @apply mx-auto; }
.sidebar.collapsed button     { @apply px-0 gap-x-0 justify-center; }

/* hide labels */
.sidebar.collapsed .tab-label { @apply hidden; }

/* main content shift */
.sidebar.collapsed ~ #dashboard-main { @apply lg:pl-20; }

/* smooth transition */
#dashboard-main { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

/* green highlight (data-active is toggled by Stimulus) */
.sidebar [data-active] { background:#B8D599 !important; }

.sidebar.collapsed [data-active] {
  width: 3rem !important;   /* 12 * 4px = 48px */
  height: 3rem !important;
  padding: 0 !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.375rem;  /* rounded-md */
  background: #B8D599 !important;
}

/*─────────────────────────────────────────────────────────────*/
/*  COL-2 COLLAPSE RULES                                       */
/*─────────────────────────────────────────────────────────────*/

/* width + padding */
.col2--collapsed { @apply w-auto px-0 overflow-hidden; }

/* hide every resource list – leave only the heading          */
.col2--collapsed [data-admin-dashboard-target="resourceTrigger"],
.col2--collapsed .mb-6 { @apply hidden; }

/* rotate top heading so it fits nicely                       */
.col2--collapsed h2 { @apply origin-top-left whitespace-nowrap tracking-wider; }

/* hide new resource button container when col2 is collapsed */
.col2--collapsed [data-admin-dashboard-target="container"] {
  @apply hidden;
}

.col2--collapsed .resource-delete-icon {
  @apply hidden;
}