/* Project-specific overrides go here.
   Keep this file minimal; shared design system lives in:
   - foundations.css, layout.css, atoms.css, components.css, utilities.css
*/

/* Custom project overrides */

/* Cards */
.card{ @apply bg-white rounded border border-gray-200 shadow-sm; }

/* Ensure a CSS variable for sidebar background is available */
.c-sidebar__surface{ --sidebar-bg: #111827; }

/* Sidebar-attached header toggle */
.c-sidebar-toggle{
  height: 2rem; width: 2rem; border-radius: 9999px;
  background-color: var(--sidebar-bg, #111827); /* default to slate-900 like sidebar */
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.c-sidebar-toggle:hover{ filter: brightness(1.05); }

/* Bridge the toggle to the sidebar visually on desktop */
@media (min-width: 768px){
  .c-header .c-header__row > .flex .c-sidebar-toggle{ margin-left: -0.25rem; }
}

/* Sidebar collapsed behavior: prevent flicker and show nice hover */
/* Hide tooltips by default when expanded */
.c-nav__tooltip{ display: none; }
.sidebar-collapsed .c-sidebar{ width: var(--sidebar-w) !important; }
.sidebar-collapsed .c-nav__item{ position: relative; }
.sidebar-collapsed .c-nav__label{ display: none !important; }
.sidebar-collapsed .c-nav__item .c-icon-brand{ transition: transform 150ms ease; }
.sidebar-collapsed .c-nav__item:hover .c-icon-brand{ transform: scale(1.12); }
.sidebar-collapsed .c-nav__tooltip{
  display: block;
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateX(8px) translateY(-50%);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 150ms ease, transform 150ms ease;
  background: #111827; color: #fff; border-radius: 9999px; font-size: 12px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.1);
}
.sidebar-collapsed .c-nav__item:hover .c-nav__tooltip{ opacity: 1; transform: translateX(0) translateY(-50%); }

/* Smooth desktop sidebar expand/collapse */
@media (min-width: 768px){
  .c-sidebar{
    transition: width 250ms ease-in-out, padding 250ms ease-in-out, background-color 200ms ease-in-out;
    will-change: width;
  }
  .c-sidebar .c-nav__item, .c-sidebar .c-nav__item *{
    transition: color 150ms ease-in-out, background-color 150ms ease-in-out, opacity 200ms ease-in-out;
  }
  /* Labels fade when collapsed */
  .sidebar-collapsed .c-nav__label{ opacity: 0; transition: opacity 180ms ease-in-out; }
  .c-nav__label{ opacity: 1; }
}

/* Non-selectable text areas */
/* Prevent text selection in sidebar */
.c-sidebar__surface, .c-sidebar__surface *{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Prevent text selection in Gantt chart */
.gantt, .gantt *{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure normal page content stays above the background overlays */
.bg-honeycomb > * { position: relative; z-index: 1; }

/* Subtle honeycomb background using an SVG tile (brand accent lines) */
.bg-honeycomb {
  background-color: #ffffff;
  background-image: url('../images/pattern.svg'); /* using user-provided Hexagon-1 SVG */
  background-repeat: repeat;
  /* Let the SVG's intrinsic pattern size render natively for fidelity */
  background-attachment: fixed;
  /* Subtle motion */
  animation: honeycomb-pan 90s linear infinite; /* slower drift */
  position: relative; /* enable overlay pseudo-element positioning */
  overflow: hidden;
  /* defaults for interactive reveal */
  --mx: 50%;
  --my: 50%;
  --t: 160px;        /* wave phase offset (animated outward) - start with visible reveal */
  --bw: 12px;        /* thin opaque ring to avoid white wash */
  --period: 320px;   /* large spacing for big ripples */
  --speed: 0.5px;    /* slower outward motion */
  --fade: 6px;       /* light feather for softer edge */
}

/* Seamless diagonal drift that loops on whole-tile offsets (tile ≈ 29 x 50.115) */
@keyframes honeycomb-pan {
  0%   { background-position:    0px     0px; }
  50%  { background-position:  14.5px  25.0575px; } /* half-tile drift */
  100% { background-position:  29px   50.115px; }  /* full-tile drift for seamless loop */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-honeycomb { animation: none; }
}

/* If browser doesn't support CSS mask-image, hide overlays to avoid full white fill */
@supports not ((-webkit-mask-image: radial-gradient(#000, transparent)) or (mask-image: radial-gradient(#000, transparent))) {
  .bg-honeycomb::before,
  .bg-honeycomb::after {
    display: none !important;
  }
}

/* Hide native password reveal/clear icons (Edge/IE) to avoid double eye icons */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
input[type="password"] {
  -ms-text-security: none; /* legacy Edge */
}
/* Hide WebKit autofill/reveal decoration buttons that can overlap our eye icon */
input[type="password"]::-webkit-textfield-decoration-container,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none;
}

/* Mouse-reactive water ripple reveal: white overlay with softly feathered, repeating rings */
.bg-honeycomb::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* keep the overlay behind content */
  background: #ffffff; /* solid white overlay */
  /* Repeating feathered rings that move outward as --t increases */
  -webkit-mask-image: repeating-radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) calc(var(--t) - var(--fade)),
    rgba(0,0,0,0.25) var(--t),
    rgba(0,0,0,0.7)  calc(var(--t) + var(--bw) * 0.5),
    rgba(0,0,0,1)    calc(var(--t) + var(--bw)),
    rgba(0,0,0,0)    calc(var(--t) + var(--bw) + var(--fade)),
    rgba(0,0,0,0)    calc(var(--t) + var(--period))
  );
  mask-image: repeating-radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) calc(var(--t) - var(--fade)),
    rgba(0,0,0,0.25) var(--t),
    rgba(0,0,0,0.7)  calc(var(--t) + var(--bw) * 0.5),
    rgba(0,0,0,1)    calc(var(--t) + var(--bw)),
    rgba(0,0,0,0)    calc(var(--t) + var(--bw) + var(--fade)),
    rgba(0,0,0,0)    calc(var(--t) + var(--period))
  );
  filter: blur(8px);
}

/* Second interleaved wave for more natural look */
.bg-honeycomb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* keep behind content */
  background: #ffffff;
  -webkit-mask-image: repeating-radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) calc((var(--t) + calc(var(--period) / 2)) - var(--fade)),
    rgba(0,0,0,0.2) calc(var(--t) + calc(var(--period) / 2)),
    rgba(0,0,0,0.6) calc((var(--t) + calc(var(--period) / 2)) + var(--bw) * 0.5),
    rgba(0,0,0,1)   calc((var(--t) + calc(var(--period) / 2)) + var(--bw)),
    rgba(0,0,0,0)   calc((var(--t) + calc(var(--period) / 2)) + var(--bw) + var(--fade)),
    rgba(0,0,0,0)   calc((var(--t) + var(--period)))
  );
  mask-image: repeating-radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) calc((var(--t) + calc(var(--period) / 2)) - var(--fade)),
    rgba(0,0,0,0.2) calc(var(--t) + calc(var(--period) / 2)),
    rgba(0,0,0,0.6) calc((var(--t) + calc(var(--period) / 2)) + var(--bw) * 0.5),
    rgba(0,0,0,1)   calc((var(--t) + calc(var(--period) / 2)) + var(--bw)),
    rgba(0,0,0,0)   calc((var(--t) + calc(var(--period) / 2)) + var(--bw) + var(--fade)),
    rgba(0,0,0,0)   calc((var(--t) + var(--period)))
  );
  filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  .bg-honeycomb::before { /* keep static reveal at center */ --mx: 50%; --my: 50%; --t: 100px; }
}

/* ============================
   Dashboard Gantt component
   ============================ */
.gantt { --g-row-h: 36px; --g-sidebar-w: 240px; --g-col-w: 56px; --g-gap: 2px; 
  /* Brand-themed neutrals for Gantt */
  --bh-border: rgba(168,162,158,0.4); /* STONE  A8A29E @40% */
  --bh-text: #374151;                 /* SLATE for labels */
}
.gantt .gantt-body { display:block; border:1px solid var(--bh-border); background:var(--bh-surface, #fff); }
.gantt .gantt-chart { position:relative; overflow:auto; width:100%; cursor: grab; padding-top: 0; }
.gantt .gantt-grid { position:absolute; inset:0; background-image:linear-gradient(to right, transparent calc(var(--g-col-w) - 1px), var(--bh-border) calc(var(--g-col-w) - 1px)), linear-gradient(to bottom, transparent calc(var(--g-row-h) - 1px), var(--bh-border) calc(var(--g-row-h) - 1px)); background-size: var(--g-col-w) var(--g-row-h); }
.gantt .gantt-bars { position:relative; min-height: calc(var(--g-row-h) * 8); }
.gantt .gantt-bar { position:absolute; height: calc(var(--g-row-h) - 8px); top: 4px; border-radius: 4px; display:flex; align-items:center; padding: 0 8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt .gantt-bar[data-project] { cursor: pointer; }
/* Track, Risk, Blocked mapped to user's palette with calm opacity */
.gantt .gantt-bar.track { 
  /* Remaining portion color (stone tint from palette) */
  background: rgba(168,162,158,0.45);   /* STONE A8A29E @45% */
  color: #1f2937;                       /* slate-800 for contrast */
}
.gantt .gantt-bar.risk {
  background: rgba(238,223,122,0.85);  /* EEDF7A @85% */
  color: #1f2937;
  border: 1px solid rgba(0,0,0,0.04);
}
.gantt .gantt-bar.blocked {
  background: rgba(160,71,71,0.90);    /* A04747 @90% */
  color: #ffffff;
}
.gantt .gantt-today { position:absolute; top:0; bottom:0; width:2px; background: #D8A25E; pointer-events:none; }

/* Inner progress overlay within a bar */
.gantt .gantt-bar .gantt-bar-progress{
  /* Completion portion with brand beige */
  background: rgba(216,162,94,0.90) !important; /* D8A25E @90% */
  height: 100%;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: 2px solid #BAA361; /* emphasize progress edge with brand accent */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Day/Week/Month headers */
.gantt { --g-months-top: 0px; --g-weeks-top: 22px; --g-days-top: 44px; }
.gantt .gantt-top { position:sticky; top: var(--g-days-top); background:var(--bh-bg, #fff); border-bottom:1px solid var(--bh-border); z-index:3; display:flex; flex-wrap: nowrap; white-space: nowrap; height:22px; }
.gantt .gantt-top .gday { width:var(--g-col-w); flex: 0 0 var(--g-col-w); font-size:12px; color: var(--bh-text, #374151); border-right:1px solid var(--bh-border); display:flex; align-items:center; justify-content:center; padding:0; position: relative; }
.gantt .gantt-top .gday:first-child { border-left: 1px solid var(--bh-border); }

.gantt .gantt-top-months, .gantt .gantt-top-weeks { position:sticky; background:var(--bh-bg, #fff); z-index:3; display:flex; flex-wrap: nowrap; white-space: nowrap; height:22px; }
.gantt .gantt-top-months { top: var(--g-months-top); border-bottom:1px solid var(--bh-border); font-weight:600; }
.gantt .gantt-top-weeks { top: var(--g-weeks-top); border-bottom:1px solid var(--bh-border); }
.gantt .glabel { text-align:center; font-size:12px; color: var(--bh-text, #374151); border-right:1px solid var(--bh-border); display:flex; align-items:center; justify-content:center; padding:0 4px; height:22px; }

.gantt .gantt-header { padding:4px 0; }
.gantt .gantt-chart:active { cursor: grabbing; }

@media (max-width: 767.98px){
  .gantt { --g-sidebar-w: 160px; --g-col-w: 36px; --g-row-h: 32px; }
}

/* ============================
   Draggable tilt effect
   ============================ */
.ct-tilt {
  transform: rotate(-2deg) scale(1.01);
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15), 0 6px 8px -6px rgba(0,0,0,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease;
  will-change: transform, box-shadow;
}