/*
 * HappeeMetronic Engine - Custom CSS Overrides
 *
 * This file contains custom styles and overrides for the Metronic theme.
 * It is loaded after metronic.css to allow overriding vendor styles.
 */

/* ============================================
   Component Overrides
   ============================================ */

/* Textareas should not use the fixed kt-input height */
textarea.kt-input {
  height: auto;
  min-height: 5rem;
  padding-block: 0.5rem;
  display: block;
}

/* Compact single-line composer textareas (channels, threads) */
textarea.kt-input.resize-none {
  min-height: 38px;
}

/* Allow account select dropdowns to escape overflow-x-auto containers (line items tables) */
.overflow-x-auto:has([data-controller="account-select"]) {
  overflow: visible;
}

/* Fix info alert color - use blue instead of violet */
.kt-alert-info {
  background-color: oklch(0.561 0.169 239.545) !important; /* blue-600 */
}

.kt-alert.kt-alert-outline.kt-alert-info .kt-alert-icon {
  color: oklch(0.561 0.169 239.545) !important; /* blue-600 */
}

.kt-alert.kt-alert-light.kt-alert-info {
  background-color: oklch(0.976 0.014 238.398) !important; /* blue-50 */
  color: oklch(0.172 0.096 241.066) !important; /* foreground */
  border-color: oklch(0.879 0.058 239.153) !important; /* blue-200 */
}

/* ============================================
   Layout Utilities
   ============================================ */

/* Header height using CSS variable */
.h-header-height {
  height: var(--header-height);
}

/* This two .max- classes are deprecated Tailwind v4 utility needed for the kanban view */
.max-w-50vw {
  max-width: 50vw;
}

.max-h-80vh {
  max-height: 80vh;
}

/* ============================================
   Theme Utilities
   ============================================ */

/* Show/hide elements based on theme */
.theme-light-show {
  display: inline-block;
}

.theme-dark-show {
  display: none;
}

.dark .theme-light-show {
  display: none;
}

.dark .theme-dark-show {
  display: inline-block;
}

/* ============================================
   Missing Tailwind Utilities
   These fill gaps from Tailwind CSS purging
   ============================================ */

.pt-6 {
  padding-top: 1.5rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:block {
    display: block;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:gap-7\.5 {
    gap: 1.875rem;
  }
  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }
}

/* ============================================
   Flash Highlight Animation
   Used to highlight newly uploaded/created items
   ============================================ */

@keyframes flash-highlight {
  0%   { background-color: rgb(34 197 94 / 0.15); }
  100% { background-color: transparent; }
}

.flash-highlight {
  animation: flash-highlight 3s ease-out forwards;
}

/* ============================================
   Accounting Table Styles
   Used by Income Statement, Balance Sheet, Chart of Accounts
   ============================================ */

/* Parent/top-level account rows get a subtle background */
.account-name-row > td {
  background-color: var(--kt-table-active-bg, #f1f5f9) !important;
  font-weight: 600;
}

.sub-account-row > td {
  padding-left: 1rem;
}

.sub-sub-account-row > td {
  padding-left: 1.5rem;
}

/* Dark mode support for account-name-row */
.dark .account-name-row > td,
[data-kt-theme-mode="dark"] .account-name-row > td {
  background-color: oklch(0.269 0.015 252.723 / 0.3) !important;
}

/* Total rows - thick border with medium gray */
.kt-table tr.accounting-total-row,
table tr.accounting-total-row,
tr.accounting-total-row {
  border-top: 2px solid #6b7280 !important; /* gray-500 */
}

/* Subtotal rows - medium border with lighter gray */
.kt-table tr.accounting-subtotal-row,
table tr.accounting-subtotal-row,
tr.accounting-subtotal-row {
  border-top: 1px solid #9ca3af !important; /* gray-400 */
}

/* ============================================
   Print Styles
   Layout resets for printing - use Tailwind print:hidden for specific elements
   ============================================ */


@media print {
  /* Hide header, sidebar, navbar, footer */
  header,
  #header,
  .sidebar-nav,
  [id="sidebar-nav"],
  .sidebar-toc,
  .kt-navbar,
  footer,
  .kt-subheader,
  .kt-drawer,
  nav {
    display: none !important;
  }
}