/* ==========================================================================
   date.css — Full blue-theme Date Difference Calculator (drop-in replacement)
   Date Difference Calculator — inputs, today/reset, calculate, result
   ========================================================================== */

/* THEME TOKENS (tool-scoped) */
#date-calculator-section,
.date-card,
.date-tool {
  --card-radius: 14px;
  --card-pad: 16px;
  --control-radius: 10px;

  /* Primary blue tokens (prefer timezone tokens if present) */
  --dd-primary: var(--tz-accent, #2B7BE4);
  --dd-primary-700: var(--tz-accent-700, #185FCC);
  --dd-contrast: #ffffff;

  --dd-bg: #F5F9FF;
  --dd-surface: #ffffff;
  --dd-fg: #0B223B;
  --dd-muted: #5f6b7a;
  --dd-border-weak: rgba(11,34,59,0.05);
  --dd-border: rgba(24,95,204,0.10);
  --dd-shadow: 0 12px 36px rgba(11,34,59,0.05);
  --dd-focus: 0 0 0 6px rgba(43,123,228,0.10);
}

/* Card shell */
#date-calculator-section {
  position: relative;
  border-radius: var(--card-radius);
  padding: calc(var(--card-pad) + 8px) !important;
  background: linear-gradient(180deg, #fbfdff, #f2f7ff);
  border: 1px solid rgba(24,95,204,0.04);
  box-shadow: var(--dd-shadow);
  color: var(--dd-fg);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

/* accent stroke — match timezone style */
#date-calculator-section::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--dd-primary), var(--dd-primary-700));
  box-shadow: 0 10px 30px rgba(43,123,228,0.12);
  z-index: 2;
  pointer-events: none;
}

/* Header title + reset row spacing */
#date-calculator-section .d-flex.align-items-center.mb-3 {
  margin-bottom: 12px !important;
}
#date-calculator-section .section-title {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:1.06rem;
  margin-top:6px; /* sits under the accent stroke */
  position:relative;
  z-index:3;
}
#date-calculator-section .section-title i {
  width:40px; height:40px; display:inline-grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(43,123,228,0.11), rgba(255,255,255,0.02));
  color: var(--dd-primary-700);
  box-shadow: 0 8px 22px rgba(24,95,204,0.06);
}

/* Reset button: blue subtle pill */
#date-calculator-section #resetDates {
  background: linear-gradient(180deg,#E6F1FF,#DDEBFF) !important;
  color: #072243 !important;
  border: 1px solid rgba(24,95,204,0.12) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 0.94rem !important;
  box-shadow: 0 8px 28px rgba(24,95,204,0.08) !important;
  display:inline-flex;
  gap:8px;
  align-items:center;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 120ms ease;
  position:relative;
  z-index:3;
}
#date-calculator-section #resetDates:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(24,95,204,0.12);
}

/* Form label */
#date-calculator-section label.form-label { color: var(--dd-muted); font-weight:700; font-size:0.93rem; }

/* INPUT GROUP: higher contrast + pill surface */
#date-calculator-section .date-input-group {
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  height:48px;
  border-radius:12px;
  overflow:hidden;
  background: linear-gradient(180deg, #ffffff, #f7faf7);
  border: 1px solid rgba(24,95,204,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
}

/* icon cell */
#date-calculator-section .date-input-group .input-group-text {
  display:inline-flex !important;
  align-items:center; justify-content:center !important;
  width:54px !important; height:100% !important; padding:0 10px !important;
  background: transparent !important; border: none !important;
  color: var(--dd-primary) !important; font-size:1.06rem;
}

/* input field */
#date-calculator-section .date-input-group .form-control,
#date-calculator-section .date-input-group input[type="date"] {
  border: none !important;
  height: 100% !important;
  padding: 0 14px !important;
  background: transparent !important;
  color: var(--dd-fg) !important;
  font-weight:700;
  font-size:0.96rem;
}

/* placeholder readability */
#date-calculator-section .date-input-group .form-control::placeholder {
  color: rgba(11,34,59,0.28);
  font-weight:600;
}

/* focus on the whole group */
#date-calculator-section .date-input-group:focus-within {
  box-shadow: var(--dd-focus);
  border-color: rgba(24,95,204,0.16);
}

/* TODAY BUTTON — prominent filled pill in blue (but overridden later to pale-pill parity) */
#date-calculator-section .today-under { margin-top:8px; }
#date-calculator-section #todayBtn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  font-size:0.92rem;
  color: var(--dd-contrast) !important;
  background: linear-gradient(90deg, var(--dd-primary), var(--dd-primary-700)) !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(24,95,204,0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#date-calculator-section #todayBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(24,95,204,0.24);
  background: linear-gradient(90deg, var(--dd-primary-700), var(--dd-primary));
}
#date-calculator-section #todayBtn:focus { outline:none; box-shadow: var(--dd-focus); }

/* Checkboxes & radio */
#date-calculator-section .form-check-input { accent-color: var(--dd-primary); }

/* Calculate button */
#date-calculator-section #calculateDiff {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 24px;
  border-radius:14px;
  font-weight:900;
  font-size:1rem;
  color:#fff !important;
  background: linear-gradient(90deg, var(--dd-primary), var(--dd-primary-700)) !important;
  border:none !important;
  box-shadow: 0 20px 50px rgba(24,95,204,0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
#date-calculator-section #calculateDiff:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(24,95,204,0.26); }
#date-calculator-section #calculateDiff:focus { outline:none; box-shadow: var(--dd-focus); }

/* RESULT box */
#date-calculator-section #diffResult {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(24,95,204,0.06);
  box-shadow: 0 6px 18px rgba(11,34,59,0.04);
  color: #16362f;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
}

/* small helpers */
#date-calculator-section .text-muted { color: var(--dd-muted); }

/* Focus helper */
#date-calculator-section :focus-visible { outline:none; box-shadow: var(--dd-focus); border-radius:8px; }

/* RESPONSIVE TWEAKS */
@media (max-width: 768px) {
  #date-calculator-section { padding: 12px !important; }
  #date-calculator-section .date-input-group { height:44px; }
  #date-calculator-section #calculateDiff { width:100%; justify-content:center; }
  #date-calculator-section #resetDates { width:100%; display:block; margin-top:8px; }
}

/* Defensive specificity anchor */
body #date-calculator-section { /* anchor */ }

/* === Make Today button match Reset button (drop-in override) === */
#date-calculator-section #todayBtn {
  /* use the same pale-blue pill look as #resetDates */
  background: linear-gradient(180deg,#E6F1FF,#DDEBFF) !important;
  color: #072243 !important;
  border: 1px solid rgba(24,95,204,0.12) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 0.94rem !important;
  box-shadow: 0 8px 28px rgba(24,95,204,0.08) !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 120ms ease !important;
  z-index: 3 !important;
  cursor: pointer !important;
}

/* Hover / focus parity with Reset */
#date-calculator-section #todayBtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(24,95,204,0.12) !important;
}

#date-calculator-section #todayBtn:focus {
  outline: none !important;
  box-shadow: 0 0 0 6px rgba(24,95,204,0.08) !important;
}
#date-calculator-section #todayBtn i { color: var(--dd-primary-700) !important; }

/* === Mild dark outline for From / To date boxes === */
#date-calculator-section .date-input-group {
  border: 1px solid rgba(0,0,0,0.22) !important;   /* slightly darker outline */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
              0 0 0 rgba(0,0,0,0) !important;      /* keep inner gloss, remove halo */
}

/* Stronger border on focus */
#date-calculator-section .date-input-group:focus-within {
  border-color: rgba(0,0,0,0.35) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* === Curved divider between icon and input field === */
#date-calculator-section .date-input-group::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 54px;        /* same as icon width */
  width: 1px;
  background: rgba(0,0,0,0.15);  /* mild dark line */
  border-radius: 2px;
  pointer-events: none;
}

#holidaysInput {
  max-width: 120px;
}

/* === Working days section styling === */
#date-calculator-section .working-days-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg,#f8fbff,#ffffff);
  border: 1px solid rgba(24,95,204,0.08);
}

#date-calculator-section #holidaysInput {
  max-width: 120px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  padding: 4px 8px;
}

/* checkbox spacing */
#date-calculator-section .form-check {
  margin-bottom: 4px;
}

@media (max-width: 768px) {

  /* stack inputs nicely */
  #date-calculator-section .row.g-3 {
    gap: 10px;
  }

  /* make holidays input full width */
  #date-calculator-section #holidaysInput {
    max-width: 100%;
  }

  /* spacing for working section */
  #date-calculator-section .working-days-box {
    padding: 12px;
  }

  /* result readability */
  #date-calculator-section #diffResult {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* bigger tap targets */
  #date-calculator-section .form-check-input {
    transform: scale(1.1);
  }
}

#calendarHeatmap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  padding: 10px 4px 14px;   /* 👈 key improvement */
}

#calendarHeatmap::-webkit-scrollbar {
  height: 6px;
}
#calendarHeatmap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

#calendarHeatmap::-webkit-scrollbar {
  height: 8px;
}

#calendarHeatmap::-webkit-scrollbar-track {
  background: transparent;
}

#calendarHeatmap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}

.heatmap-month {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  min-width: 280px;     /* 🔥 force equal width */
  max-width: 280px;
  flex: 0 0 auto;       /* 🔥 prevent shrinking */
}

.heatmap-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: center;
}

.heatmap-weekdays,
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.heatmap-weekdays div {
  font-size: 10px;
  text-align: center;
  color: #6c757d;
}

.heatmap-day {
  font-size: 12px;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
}

.heatmap-working {
  background: #d1e7dd;
}



.heatmap-out {
  background: transparent;
  color: #adb5bd;
}

@media (max-width: 768px) {
  #calendarHeatmap {
    justify-content: flex-start;
  }

  .heatmap-month {
    width: 100%;
  }
}


.heatmap-edge {
  background: #2B7BE4 !important;
  color: #fff;
  font-weight: 600;
}

.heatmap-holiday {
  background: #ffe5b4 !important;
  color: #b45309;
  font-weight: 600;
}

.heatmap-range {
  background: rgba(43, 123, 228, 0.15);
}

/* 🔴 Make weekend visible over range */
.heatmap-weekend {
  background: #f8d7da !important;
}

@keyframes pulseToday {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(43,123,228,0.6); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(43,123,228,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43,123,228,0); }
}

.heatmap-today {
  background: rgba(25, 135, 84, 0.18) !important;
  color: #146c43;
  font-weight: 600;
  border-radius: 6px;
  animation: pulseToday 1.5s infinite;
  z-index: 2;
  position: relative;
}

.heatmap-today {
  z-index: 2;
  position: relative;
}