/*
 * 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.
 *


 */

/* ==========================================================================
   SmartCraft Brand Fonts
   ========================================================================== */

/* Aeonik - Identity typeface */
@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-regular-d41b4a8b7c2400b4cabfa32196d92186daa0abe0b32ec2429cc8fe45f40b05aa.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-regularitalic-ffae3f8cbb8ad948ffb9e33a451b0785979b40a12cc2fda319404fc9a9c0b60a.otf) format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-medium-76d72beb6a9d110c32d7337b7395ddaee2552dfc897beeb0d086a3d467c99c80.otf) format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-mediumitalic-b7b8ccceec26434f262711f2ab7c6584f13ebe91dc3bf213519911f3c4155f07.otf) format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-bold-a5ac59395b22b08db4704956e7cd1b7d68cafb4ac8e7537f1fc3d44217d79cfc.otf) format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-bolditalic-89615c8f486781ef963a81c876c230e6b82b4810930ac273e91210da3c734f83.otf) format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Aeonik Fono - Accent typeface */
@font-face {
  font-family: 'Aeonik Fono';
  src: url(/assets/aeonikfono-regular-9c72d677d1c0a6105b0a459f714a8e0a05a114ca2d7b61880f83c2e3b24946f1.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Fono';
  src: url(/assets/aeonikfono-medium-c788eb2ea4af30ba7bf2fba4ae53ca119fa60a199c5dc945729b21db8cf40704.otf) format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Fono';
  src: url(/assets/aeonikfono-bold-ded2d3ebd1af08a857cf4e25c7c49457f2ecf6c313eadc0e14f870bff0b70e32.otf) format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* Apply Aeonik as the default font */
html, body {
  font-family: 'Aeonik', ui-sans-serif, system-ui, sans-serif;
}

/* SortableJS drag states */
.sortable-ghost {
  opacity: 0.3;
}

.sortable-chosen {
  @apply ring-2 ring-blue-400 ring-offset-1;
}

.sortable-drag {
  @apply rotate-2 shadow-lg;
}

/* Board drag state: show borders between drop zones */
.board-dragging .drop-zone-separator {
  @apply border-blue-200;
}

.company-name-truncate {
  display: block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .company-name-truncate {
    max-width: 16rem;
  }
}

/* Align Tailwind's white surfaces with SmartCraft palette */
:root {
  --color-white: #f7f6f2;
  /* Soften default blue accents to SmartCraft Gray 04 for focus rings/borders */
  --color-blue-500: #45403D;
  --color-blue-600: #45403D;
  --color-blue-700: #45403D;
  --smartcraft-focus: #45403D;
}

/* Override common Tailwind focus accents to SmartCraft Gray 04 */
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus,
.focus\:ring-blue-400:focus,
.focus\:ring-blue-700:focus,
.focus-visible\:ring-blue-500:focus-visible,
.focus-visible\:ring-blue-600:focus-visible,
.focus-visible\:ring-blue-400:focus-visible,
.focus-visible\:ring-blue-700:focus-visible {
  --tw-ring-color: var(--smartcraft-focus) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-blue-600:focus,
.focus-visible\:outline-blue-600:focus-visible,
.focus-visible\:outline-blue-500:focus-visible,
.focus-visible\:outline-blue-400:focus-visible,
.focus\:outline-blue-600:focus,
.focus\:outline-blue-500:focus,
.focus\:border-blue-400:focus {
  border-color: var(--smartcraft-focus) !important;
  outline-color: var(--smartcraft-focus) !important;
}

/* Last-resort focus override for form controls */
input:focus, textarea:focus, select:focus, button:focus {
  border-color: var(--smartcraft-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--smartcraft-focus) 30%, transparent) !important;
  outline-color: var(--smartcraft-focus) !important;
}

/* ==========================================================================
   Stage Timeline Confetti Animation
   ========================================================================== */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) rotate(180deg) translateX(20px);
  }
  50% {
    transform: translateY(50vh) rotate(360deg) translateX(-20px);
  }
  75% {
    transform: translateY(75vh) rotate(540deg) translateX(10px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) translateX(-10px);
    opacity: 0;
  }
}

/* ==========================================================================
   Sidebar Scrollbar (thin, blends with dark background)
   ========================================================================== */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar-scroll:hover {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}
.sidebar-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Sidebar Active Accent
   ========================================================================== */
.sidebar-nav-link.sidebar-nav-active {
  position: relative;
}
.sidebar-nav-link.sidebar-nav-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: #CCFF00;
}

/* ==========================================================================
   Sidebar Collapse (Desktop)
   ========================================================================== */
.sidebar-collapsed {
  width: 4rem !important;
  min-width: 4rem !important;
}

.sidebar-collapsed .sidebar-header {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Stack header vertically: logo on top, icons below */
.sidebar-collapsed .sidebar-header > div {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-collapsed .sidebar-logo-img {
  margin-right: 0;
}

.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-search-badge,
.sidebar-collapsed .sidebar-nav-link kbd,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .sidebar-section-header,
.sidebar-collapsed .sidebar-nav-label,
.sidebar-collapsed .sidebar-release-notes,
.sidebar-collapsed .sidebar-account-details,
.sidebar-collapsed .sidebar-account-chevron {
  display: none;
}

.sidebar-collapsed .sidebar-account-avatar {
  display: flex;
}

.sidebar-collapsed .sidebar-account-btn {
  justify-content: center;
  padding: 0.25rem;
}

.sidebar-collapsed .sidebar-account-section {
  border-top: none;
  padding-top: 0;
}

/* When sidebar is collapsed, force all section content visible (flat icon list) */
.sidebar-collapsed [data-sidebar-section-target="content"] {
  display: block !important;
}

.sidebar-collapsed .sidebar-nav-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sidebar-collapsed .sidebar-nav-icon {
  margin-right: 0;
}

/* Quick actions: stretch full width, each icon on its own row */
.sidebar-collapsed .sidebar-quick-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.125rem;
}

.sidebar-collapsed .sidebar-quick-actions > * {
  width: 100%;
}

.sidebar-collapsed .sidebar-quick-actions button {
  width: 100%;
  height: auto;
  padding: 0.5rem;
  justify-content: center;
}

/* Match nav icon size (h-4 w-4 = 1rem) */
.sidebar-collapsed .sidebar-quick-actions button > svg {
  width: 1rem;
  height: 1rem;
}

.sidebar-collapsed .sidebar-inbox-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  margin-left: 0;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}


/* ==========================================================================
   Sidebar Collapsible Section Headers
   ========================================================================== */
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.125rem 0.5rem;
  margin-bottom: 0.125rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Sidebar Tooltips (Collapsed state)
   ========================================================================== */
.sidebar-tooltip {
  position: fixed;
  z-index: 50;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sidebar-tooltip.sidebar-tooltip-visible { opacity: 1; }
.sidebar-tooltip kbd {
  margin-left: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  font-size: 11px;
  font-family: inherit;
  color: #6b7280;
}

/* ==========================================================================
   FullCalendar overrides
   ========================================================================== */
.fc {
  font-family: inherit;
}

.fc-toolbar-title {
  font-size: 1rem !important;
  font-weight: 600;
}

.fc-button {
  background-color: #fff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.fc-button:hover {
  background-color: #f9fafb !important;
}

.fc-button-active,
.fc-button:active {
  background-color: #f3f4f6 !important;
}

.fc-timegrid-slot {
  height: 1.5rem;
}

.fc-timegrid-axis-cushion,
.fc-timegrid-slot-label-cushion {
  min-width: 7rem;
  text-align: center;
}

.fc-event {
  border-radius: 4px;
  border-width: 0 0 0 3px;
  cursor: pointer;
}

.fc-timegrid-event .fc-event-main {
  padding: 0;
  overflow: hidden;
}

.fc-copy-mode {
  cursor: copy !important;
}

.fc-copy-mode .fc-event {
  cursor: copy !important;
}

.calendar-container {
  min-height: 600px;
}

/* Story map drag-and-drop */
.sm-ghost-epic,
.sm-ghost-feature,
.sm-ghost-story { opacity: 0.3; }

.sm-chosen { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 0.5rem; }

.sm-dragging { transform: rotate(1deg); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }