/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --color-brand-50: #eef8f2;
  --color-brand-100: #d8f0e0;
  --color-brand-200: #b5dfc4;
  --color-brand-300: #84c79d;
  --color-brand-400: #63b95f;
  --color-brand-500: #2fa65a;
  --color-brand-600: #1f8f46;
  --color-brand-700: #19723a;
  --color-brand-800: #175b31;
  --color-brand-900: #0f2f2f;

  --color-accent-yellow: #f2c230;
  --color-accent-blue: #2f75c9;
  --color-accent-gray: #8a9490;

  --color-bg-app: #f7f9f8;
  --color-bg-surface: #ffffff;
  --color-bg-muted: #f1f5f3;

  --color-border-subtle: #edf2ef;
  --color-border-muted: #dfe7e2;
  --color-border-strong: #c7d4cd;

  --color-text-main: #101817;
  --color-text-muted: #5f6f69;
  --color-text-subtle: #8a9490;
  --color-text-inverse: #ffffff;

  --color-success: #1f8f46;
  --color-warning: #d99a00;
  --color-info: #2f75c9;
  --color-danger: #c93f3f;

  --radius-control: 0.5rem;
  --radius-card: 1rem;
  --radius-panel: 1.25rem;
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
  --focus-ring: 0 0 0 3px rgb(31 143 70 / 0.25);

  --brand-primary: var(--color-brand-600);
  --brand-primary-dark: var(--color-brand-900);
  --brand-primary-soft: var(--color-brand-50);
  --accent-lime: var(--color-brand-400);
  --accent-yellow: var(--color-accent-yellow);
  --accent-blue: var(--color-accent-blue);
  --accent-gray: var(--color-accent-gray);
  --bg-app: var(--color-bg-app);
  --bg-surface: var(--color-bg-surface);
  --border-muted: var(--color-border-muted);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-text-inverse);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --danger: var(--color-danger);
}

.app-sidebar {
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-sidebar-backdrop {
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-sidebar-inner,
.app-sidebar-brand,
.app-shell-content,
.app-sidebar-label,
.app-sidebar-logo-full,
.app-sidebar-logo-compact,
.app-sidebar-toggle {
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.app-sidebar-inner {
  transition-property: padding;
}

.app-sidebar-brand {
  transition-property: padding;
}

.app-shell-content {
  transition-property: none;
}

.app-sidebar-label {
  max-width: 12rem;
  margin-left: 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition-property: max-width, margin-left, opacity, transform;
}

.app-sidebar-logo-full,
.app-sidebar-logo-compact {
  transition-property: opacity, transform;
}

.app-sidebar-logo-compact {
  opacity: 0;
  transform: translateX(-50%) scale(0.86);
}

.app-sidebar-toggle {
  top: 5.25rem;
  left: var(--sidebar-width);
  transform: translateX(-50%);
  transition-property: left, color, border-color, background-color;
}

@media (min-width: 64rem) {
  .app-shell {
    --sidebar-width: 5rem;
    --sidebar-inner-padding: 1rem;
    --sidebar-brand-padding: 0;
    --sidebar-label-width: 0;
    --sidebar-label-margin: 0;
    --sidebar-label-opacity: 0;
    --sidebar-label-translate: -0.375rem;
    --sidebar-full-logo-opacity: 0;
    --sidebar-full-logo-scale: 0.9;
    --sidebar-compact-logo-opacity: 1;
    --sidebar-compact-logo-scale: 1;
  }

  :root[data-sidebar-preference="expanded"] .app-shell {
    --sidebar-width: 18rem;
    --sidebar-inner-padding: 1.25rem;
    --sidebar-brand-padding: 2.5rem;
    --sidebar-label-width: 12rem;
    --sidebar-label-margin: 0.75rem;
    --sidebar-label-opacity: 1;
    --sidebar-label-translate: 0;
    --sidebar-full-logo-opacity: 1;
    --sidebar-full-logo-scale: 1;
    --sidebar-compact-logo-opacity: 0;
    --sidebar-compact-logo-scale: 0.86;
  }

  :root[data-sidebar-preference="collapsed"] .app-shell {
    --sidebar-width: 5rem;
    --sidebar-inner-padding: 1rem;
    --sidebar-brand-padding: 0;
    --sidebar-label-width: 0;
    --sidebar-label-margin: 0;
    --sidebar-label-opacity: 0;
    --sidebar-label-translate: -0.375rem;
    --sidebar-full-logo-opacity: 0;
    --sidebar-full-logo-scale: 0.9;
    --sidebar-compact-logo-opacity: 1;
    --sidebar-compact-logo-scale: 1;
  }

  .app-sidebar {
    width: var(--sidebar-width);
  }

  .app-sidebar-inner {
    padding-inline: var(--sidebar-inner-padding);
  }

  .app-shell-content {
    padding-left: var(--sidebar-width);
    transition-property: padding-left;
  }

  .app-sidebar-brand {
    padding-inline: var(--sidebar-brand-padding);
  }

  .app-sidebar-label {
    max-width: var(--sidebar-label-width);
    margin-left: var(--sidebar-label-margin);
    opacity: var(--sidebar-label-opacity);
    transform: translateX(var(--sidebar-label-translate));
  }

  .app-sidebar-logo-full {
    opacity: var(--sidebar-full-logo-opacity);
    transform: scale(var(--sidebar-full-logo-scale));
  }

  .app-sidebar-logo-compact {
    opacity: var(--sidebar-compact-logo-opacity);
    transform: translateX(-50%) scale(var(--sidebar-compact-logo-scale));
  }

}

@media (min-width: 80rem) {
  .app-shell {
    --sidebar-width: 18rem;
    --sidebar-inner-padding: 1.25rem;
    --sidebar-brand-padding: 2.5rem;
    --sidebar-label-width: 12rem;
    --sidebar-label-margin: 0.75rem;
    --sidebar-label-opacity: 1;
    --sidebar-label-translate: 0;
    --sidebar-full-logo-opacity: 1;
    --sidebar-full-logo-scale: 1;
    --sidebar-compact-logo-opacity: 0;
    --sidebar-compact-logo-scale: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes ui-overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-overlay-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ui-modal-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

@keyframes ui-drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes ui-drawer-exit {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes ui-toast-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-toast-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

.ui-overlay-container[data-state="open"] {
  animation: ui-overlay-fade-in 150ms ease-out both;
}

.ui-overlay-container[data-state="closing"] {
  animation: ui-overlay-fade-out 120ms ease-in both;
}

.ui-modal-panel[data-state="open"] {
  animation: ui-modal-enter 180ms ease-out both;
}

.ui-modal-panel[data-state="closing"] {
  animation: ui-modal-exit 120ms ease-in both;
}

.ui-drawer-panel[data-state="open"] {
  animation: ui-drawer-enter 200ms ease-out backwards;
}

.ui-drawer-panel[data-state="closing"] {
  animation: ui-drawer-exit 150ms ease-in both;
}

.ui-toast[data-state="open"] {
  animation: ui-toast-enter 180ms ease-out both;
}

.ui-toast[data-state="closing"] {
  animation: ui-toast-exit 140ms ease-in both;
}

turbo-frame#payables_dashboard[busy] .payables-dashboard-skeleton {
  display: block;
}

turbo-frame#payables_dashboard[busy] .payables-dashboard-content {
  visibility: hidden;
}