@tailwind base;
@tailwind components;
@tailwind utilities;

/* Google Fonts - Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Add any other custom component styles within @layer components if desired */
/* @layer components {} */

/* General body styles */
body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f3f4f6; /* Light gray background */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures body takes full viewport height for sticky footer */
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #e0e7ff; /* Light blue track */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #6366f1; /* Primary brand color thumb */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4f46e5; /* Darker primary color on hover */
}

/* Fixed navigation for mobile, adjust for larger screens */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50; /* Ensure it's above other content */
}
/* Adjust main content padding for fixed nav */
/* This is CRUCIAL to prevent content from being hidden behind the fixed bottom nav */
main {
  padding-bottom: 5rem; /* Space for the fixed bottom navigation (h-16 = 4rem, plus some margin) */
}

/* Style for active navigation item */
.nav-item.active-nav {
  color: #4f46e5; /* Darker primary color, matching original mockup */
  font-weight: 600; /* Bolder for active state */
}

/* Hotwire Combobox Styles */
.hw-combobox,
.hw-combobox__main__wrapper {
  width: 100% !important;
}

.hw-combobox {
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #111827;
}

.hw-combobox__main__wrapper {
  padding: 0;
  border: 0;
}

.hw-combobox__input {
  border-radius: 4px;
  border: 1px solid rgb(209 213 219 / var(--tw-border-opacity, 1));
  background-color: #fff; /* white for light mode, matches Tailwind input */
  color: #111827;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Dark mode support for combobox */
.dark .hw-combobox,
.dark .hw-combobox__main__wrapper {
  background-color: #1f2937 !important; /* gray-800 */
  color: #f3f4f6 !important; /* gray-100 */
}
.dark .hw-combobox__input {
  background-color: #374151 !important; /* gray-700 for dark mode, matches Tailwind input */
  color: #f3f4f6 !important;
  border-color: #4b5563 !important; /* gray-600 */
}
.dark .hw-combobox__input:focus {
  border-color: #818cf8 !important; /* blue-400 */
  box-shadow: 0 0 0 1px #818cf8;
}
.hw-combobox__input:focus {
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Dialog input and options for combobox dark mode */
.dark .hw-combobox__dialog {
  background-color: #374151 !important; /* gray-700 */
  color: #f3f4f6 !important; /* gray-100 */
}
.dark .hw-combobox__dialog__input {
  background-color: #1f2937 !important; /* gray-800 */
  color: #f3f4f6 !important; /* gray-100 */
  border-color: #374151 !important; /* gray-700 */
}
.dark .hw-combobox__dialog__input::placeholder {
  color: #9ca3af !important; /* gray-400 */
}
.dark .hw-combobox__option {
  background-color: #374151 !important; /* gray-700 */
  color: #f3f4f6 !important; /* gray-100 */
}
.dark .hw-combobox__option[aria-selected="true"],
.dark .hw-combobox__option:hover {
  background-color: #4f46e5 !important; /* indigo-700 */
  color: #fff !important;
}

/* ==== ==== ==== ==== ==== ==== ==== ==== */

/* Hide scrollbar for horizontal scrolling tabs */
.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Smooth scrolling for tab navigation */
.scroll-smooth {
  scroll-behavior: smooth;
}
/* ================================================================
   CONTRIBUTION CALENDAR STYLES - GitHub-inspired design
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties (Light & Dark Mode)
   ---------------------------------------------------------------- */
:root {
  /* Base colors */
  --color-fg-default: #1f2328;
  --color-fg-muted: #656d76;
  --color-fg-on-emphasis: #ffffff;
  --color-canvas-default: #ffffff;
  --color-border-default: #d1d9e0;
  --color-accent-emphasis: #0969da;
  --color-neutral-emphasis-plus: #1f2328;
  
  /* Contribution levels */
  --color-calendar-graph-day-bg: #ebedf0;
  --color-calendar-graph-day-L1-bg: #9be9a8;
  --color-calendar-graph-day-L2-bg: #40c463;
  --color-calendar-graph-day-L3-bg: #30a14e;
  --color-calendar-graph-day-L4-bg: #216e39;
  
  /* Borders */
  --contribution-border-color: rgba(27, 31, 35, 0.06);
}

.dark {
  /* Base colors */
  --color-fg-default: #f0f6fc;
  --color-fg-muted: #7d8590;
  --color-canvas-default: #1c2128;
  --color-border-default: #30363d;
  --color-accent-emphasis: #1f6feb;
  --color-neutral-emphasis-plus: #21262d;
  
  /* Contribution levels */
  --color-calendar-graph-day-bg: #21262d;
  --color-calendar-graph-day-L1-bg: #0e4429;
  --color-calendar-graph-day-L2-bg: #006d32;
  --color-calendar-graph-day-L3-bg: #26a641;
  --color-calendar-graph-day-L4-bg: #39d353;
  
  /* Borders */
  --contribution-border-color: rgba(240, 246, 252, 0.1);
}

/* ----------------------------------------------------------------
   Main Container
   ---------------------------------------------------------------- */
.contribution-calendar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-fg-default);
  margin: 1rem 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* ----------------------------------------------------------------
   Header Section
   ---------------------------------------------------------------- */
.contribution-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contribution-calendar-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-fg-default);
}

.contribution-calendar-legend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--color-fg-muted);
}

/* ----------------------------------------------------------------
   Grid Container
   ---------------------------------------------------------------- */
.contribution-calendar-container {
  background: var(--color-canvas-default);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  contain: layout;
  position: relative
}

.contribution-calendar-grid {
  border-spacing: 3px;
  border-collapse: separate;
  margin: 0;
  width: max-content;
  min-width: 100%;
}

/* ----------------------------------------------------------------
   Month Headers
   ---------------------------------------------------------------- */
.contribution-calendar-month-row {
  height: 1rem;
}

.contribution-calendar-month-label {
  font-size: 0.6875rem;
  color: var(--color-fg-muted);
  text-align: center;
  vertical-align: bottom;
  padding: 0 0 0.125rem 0;
  border: none;
}

/* ----------------------------------------------------------------
   Weekday Headers
   ---------------------------------------------------------------- */
.contribution-calendar-weekday-header {
  width: 1.5rem;
  border: none;
}

.contribution-calendar-week-row {
  height: 0.6875rem;
}

.contribution-calendar-weekday-label {
  font-size: 0.6875rem;
  color: var(--color-fg-muted);
  text-align: center;
  vertical-align: middle;
  width: 1.5rem;
  padding: 0;
  border: none;
}

/* Hide weekday labels on smaller screens */
.contribution-calendar-weekday-label .clip-circle {
  clip: circle(0);
}

@media (min-width: 768px) {
  .contribution-calendar-weekday-label .clip-circle {
    clip: unset;
  }
}

/* ----------------------------------------------------------------
   Day Cells
   ---------------------------------------------------------------- */
.contribution-calendar-day {
  width: 0.6875rem;
  height: 0.6875rem;
  min-width: 0.6875rem;
  min-height: 0.6875rem;
  aspect-ratio: 1;
  border-radius: 2px;
  border: 1px solid var(--contribution-border-color);
  cursor: pointer;
  /* position: relative; This was breaking the tooltip positioning so it has been removed */
  outline: none;
  transition: all 0.1s ease;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
}

.contribution-calendar-day:hover {
  border-color: var(--color-border-default);
  transform: scale(1.1);
  z-index: 10;
}

.contribution-calendar-day:focus {
  border-color: var(--color-accent-emphasis);
  box-shadow: 0 0 0 2px var(--color-accent-emphasis);
  outline: none;
  z-index: 10;
}

.contribution-calendar-day.invisible {
  visibility: hidden;
}

/* ----------------------------------------------------------------
   Contribution Levels
   ---------------------------------------------------------------- */
.contribution-level-0 {
  background-color: var(--color-calendar-graph-day-bg);
  fill: var(--color-calendar-graph-day-bg);
}

.contribution-level-1 {
  background-color: var(--color-calendar-graph-day-L1-bg);
  fill: var(--color-calendar-graph-day-L1-bg);
}

.contribution-level-2 {
  background-color: var(--color-calendar-graph-day-L2-bg);
  fill: var(--color-calendar-graph-day-L2-bg);
}

.contribution-level-3 {
  background-color: var(--color-calendar-graph-day-L3-bg);
  fill: var(--color-calendar-graph-day-L3-bg);
}

.contribution-level-4 {
  background-color: var(--color-calendar-graph-day-L4-bg);
  fill: var(--color-calendar-graph-day-L4-bg);
}

/* ----------------------------------------------------------------
   Legend Components
   ---------------------------------------------------------------- */
.contribution-calendar-legend-item {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 2px;
  display: flex;
}

.contribution-calendar-footer {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.contribution-calendar-legend-bottom {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--color-fg-muted);
}

/* ----------------------------------------------------------------
   Tooltip
   ---------------------------------------------------------------- */
.contribution-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--color-neutral-emphasis-plus);
  color: var(--color-fg-on-emphasis);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
}

.contribution-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-neutral-emphasis-plus);
}

.contribution-tooltip[aria-hidden="false"] {
  opacity: 1;
}

/* ----------------------------------------------------------------
   Dark Mode Tooltip Override
   ---------------------------------------------------------------- */
.dark .contribution-tooltip {
  box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8);
}

/* ----------------------------------------------------------------
   Scrollbar Styling
   ---------------------------------------------------------------- */
.contribution-calendar-container::-webkit-scrollbar {
  height: 6px;
}

.contribution-calendar-container::-webkit-scrollbar-track {
  background: var(--color-border-default);
  border-radius: 3px;
}

.contribution-calendar-container::-webkit-scrollbar-thumb {
  background: var(--color-fg-muted);
  border-radius: 3px;
}

.contribution-calendar-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-fg-default);
}

.dark .contribution-calendar-container::-webkit-scrollbar-track {
  background: #30363d;
}

.dark .contribution-calendar-container::-webkit-scrollbar-thumb {
  background: #484f58;
}

.dark .contribution-calendar-container::-webkit-scrollbar-thumb:hover {
  background: #6e7681;
}

/* ----------------------------------------------------------------
   Accessibility
   ---------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */