/* ============================================
   Faturify Custom Styles
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  --color-primary: #1677ff;
  --color-primary-bg: #e6f4ff;
  --color-bg-layout: #fafafa;
  --color-bg-hover: #f5f5f5;
  --color-border: #f0f0f0;
  --color-text-secondary: #8c8c8c;
  --color-scrollbar: #d9d9d9;
  --color-scrollbar-hover: #bfbfbf;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Global Smooth Transitions (disabled) --- */

/* --- Alpine.js x-cloak: hide elements until Alpine initializes --- */
[x-cloak] {
  display: none !important;
}

/* --- Body Defaults --- */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg-layout);
}

/* --- Sidebar Menu Items --- */
.sidebar-menu-item {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2px;
}

.sidebar-menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background-color: var(--color-primary);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-menu-item:hover {
  background-color: var(--color-bg-hover);
}

.sidebar-menu-item.active,
.sidebar-menu-item[aria-current="page"] {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

.sidebar-menu-item.active::before,
.sidebar-menu-item[aria-current="page"]::before {
  transform: translateY(-50%) scaleY(1);
}

.sidebar-menu-item.active svg,
.sidebar-menu-item[aria-current="page"] svg {
  color: var(--color-primary);
}

.sidebar-submenu-item {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2px;
}

.sidebar-submenu-item:hover {
  background-color: var(--color-bg-hover);
}

.sidebar-submenu-item.active,
.sidebar-submenu-item[aria-current="page"] {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

/* --- Table Header Styles --- */
table thead th,
.table-header {
  background-color: var(--color-bg-layout);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

/* --- Card Styles --- */
.card,
div[class*="rounded-lg"][class*="bg-white"],
div[class*="rounded-xl"][class*="bg-white"] {
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}

.card:hover,
div[class*="rounded-lg"][class*="bg-white"]:hover,
div[class*="rounded-xl"][class*="bg-white"]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* --- Button Styles --- */
button,
a[class*="btn"],
.btn-primary,
.btn-secondary {
  border-radius: 8px;
}

.btn-primary:hover,
button[class*="bg-blue"]:hover,
a[class*="bg-blue"]:hover {
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.35);
}

/* --- Input & Select Styles --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select,
.input-field {
  border-radius: 8px;
}

/* --- Modal Styles --- */
div[class*="modal"] > div[class*="bg-white"],
[x-show][class*="fixed"] > div[class*="bg-white"] {
  border-radius: 16px;
}

/* --- Page Fade-In Animation (disabled) --- */

/* --- Thin Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-hover);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) transparent;
}

/* --- Table Rounded Corners --- */
table {
  border-radius: 12px;
  overflow: hidden;
}

/* --- Header Bar Styles --- */
.app-header {
  height: 56px;
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
}

/* --- HTMX Indicator Styles --- */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

.htmx-request .htmx-indicator-hidden {
  display: none;
}

/* Version badge new update animation */
.version-badge-new {
  background: linear-gradient(135deg, #e0f2fe, #dbeafe, #ede9fe);
  background-size: 200% 200%;
  animation: version-gradient 3s ease infinite;
  color: #3b82f6 !important;
  font-weight: 500;
}

.version-badge-new svg {
  color: #3b82f6 !important;
}

@keyframes version-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}