/* Custom styles for SplitSettle Pro */
:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* Modal animation */
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.2s ease-in-out;
}

.modal-content {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-in-out;
}

/* Glassmorphism subtle accents */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass-panel {
  background: rgba(30, 41, 59, 0.85);
}

/* Badge pulse animation */
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.highlight-settle {
  animation: soft-pulse 2s infinite ease-in-out;
}

/* Fluid view fade transitions */
.view-fade-in {
  animation: viewFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes viewFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Toast Notification animations */
@keyframes toast-enter {
  0% { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes toast-exit {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(12px) scale(0.96); opacity: 0; }
}

.toast-enter {
  animation: toast-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
  animation: toast-exit 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================================= */
/* COMPREHENSIVE PRINT & PDF STYLESHEET                     */
/* Perfect uniform page margins, no empty gaps on Page 1,   */
/* natural content flow, and exact graphics fidelity         */
/* ========================================================= */
@media print {
  @page {
    size: A4 portrait;
    /* Clean uniform 10mm top and 12mm side margins across ALL printed pages */
    margin: 10mm 12mm 12mm 12mm;
  }

  /* Universal print graphics & color fidelity */
  html,
  body,
  *,
  *:before,
  *:after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body {
    background-color: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide screen navigation, buttons, controls, modals, and screen KPI cards */
  header, 
  nav, 
  button, 
  select, 
  input, 
  .no-print, 
  #groupSwitcher, 
  #newExpenseBtn, 
  .modal-backdrop, 
  #expenseModal, 
  #settleModal, 
  #groupModal,
  .relative.group, 
  a[title="Toggle Theme"],
  #settleUPILinkBtn,
  #simplifyDebtsToggle,
  .split-val-input,
  #dashboardKpiCards,
  #landingPageView,
  #demoModeBanner,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    display: none !important;
  }

  #appDashboardView {
    display: block !important;
  }

  /* Show dedicated print report header */
  .print-only {
    display: block !important;
  }

  /* Unstack outer grid columns cleanly in print */
  .lg\:grid-cols-12,
  .lg\:col-span-7,
  .lg\:col-span-5,
  .space-y-6 {
    display: block !important;
    width: 100% !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  /* Section containers */
  section {
    display: block !important;
    width: 100% !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    margin-bottom: 1rem !important;
    padding: 0.85rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
  }

  /* Settlement, Member, and History cards in print */
  #settlementsList > div,
  #membersList > div,
  #settlementHistoryList > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.4rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Expense card in print: 2-row structured card with clean top row & bottom metadata */
  .expense-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.45rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Hide screen-only interactive buttons in print */
  .expense-card button,
  .settlement-card button {
    display: none !important;
  }

  /* Fix category icon container sizing in print (prevent expanding to 100% width) */
  .expense-card .w-10,
  .expense-card .w-11 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Never truncate titles or notes in print */
  .truncate {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Prevent headings from detaching from the content immediately below */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid !important;
    page-break-after: avoid !important;
    color: #0f172a !important;
  }

  /* Remove fixed container heights and scrollbars so all items render in full */
  #settlementHistoryList,
  #expensesList,
  #membersList,
  #splitInputsContainer,
  #categorySummaryList {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Preserve graphics on colored elements */
  [style*="background-color"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure cards have clean light styling without dark-mode contrast issues */
  .dark .bg-slate-800,
  .dark .bg-slate-900 {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
  }

  .dark .text-white,
  .dark .text-slate-100 {
    color: #0f172a !important;
  }

  .dark .text-slate-400 {
    color: #475569 !important;
  }
}

/* ========================================================= */
/* STRICT MOBILE NAVIGATION & VIEWPORT RESPONSIVENESS       */
/* ========================================================= */
@media (max-width: 767px) {
  /* Strictly hide desktop-only navbar items on mobile devices */
  #navGroupControls,
  #navTripActions {
    display: none !important;
  }

  /* Force top navbar to remain strictly a single clean horizontal row */
  header .max-w-7xl {
    height: 3.5rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Compact controls on mobile */
  #navUserProfile {
    flex-shrink: 0 !important;
  }
}

@media (min-width: 768px) {
  /* Sub-bar is mobile only */
  #mobileDashboardSubBar {
    display: none !important;
  }
}

/* ========================================================= */
/* BRAND LOGO SVG iOS WebKit SIZING GUARANTEE               */
/* ========================================================= */
.brand-logo-svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
}

@media (min-width: 640px) {
  .brand-logo-svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
}