/*
 * 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.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

@font-face {
  font-family: 'Aeonik';
  src: url(/assets/aeonik-bolditalic.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.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Aeonik Fono';
  src: url(/assets/aeonikfono-bold.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;
}

.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 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-section-label,
.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-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-6 w-6 = 1.5rem) */
.sidebar-collapsed .sidebar-quick-actions button > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.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-collapsed .sidebar-account-btn {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}