/* TMS System Styles - v38.4.1.6 OFFICIAL */
body {
  box-sizing: border-box;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blinkGreen {
  0%, 100% { background-color: white; }
  50% { background-color: #d1fae5; }
}

.fade-in { animation: fadeIn 0.3s ease-out; }
.toast-notification { animation: slideDown 0.3s ease-out; }
.stat-card { transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.price-found { animation: blinkGreen 0.5s ease-in-out 3; }

@media print {
  /* 1. Reset overflow agar browser bisa mencetak lebih dari 1 halaman */
  html, body { height: auto !important; overflow: visible !important; }
  
  /* 2. Sembunyikan semua elemen kecuali area print */
  body * { visibility: hidden; }
  #invoice-print-area, #invoice-print-area * { visibility: visible; }
  
  /* 3. Posisikan area print di pojok kiri atas kertas */
  #invoice-print-area { 
    position: absolute !important; left: 0 !important; top: 0 !important; 
    width: 100% !important; padding: 0 !important; margin: 0 !important; 
    box-shadow: none !important; 
  }
  .print\:hidden { display: none !important; }
}
/* Improve table and layout spacing */
table {
  table-layout: auto;
  width: 100%;
}

table th, table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 80px;
}

@media (max-width: 768px) {
  table th, table td {
    font-size: 0.8rem;
    padding: 0.5rem !important;
  }
}

/* Stat card improvements */
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  padding: 1rem;
}

/* Grid improvements */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Sidebar / content responsive fixes */
.fixed-sidebar { z-index: 20; }
.content-with-sidebar { margin-left: 16rem; min-height: calc(100vh - 48px); }
@media (max-width: 1024px) {
  .fixed-sidebar { position: relative; width: 100%; height: auto; }
  .content-with-sidebar { margin-left: 0; padding-left: 1rem; padding-right: 1rem; }
}

/* Sidebar header and menu improvements */
.sidebar-header { align-items:center; }
.sidebar-company-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.sidebar-body { flex: 1 1 auto; overflow-y: auto; }
.sidebar-nav { max-height: none; overflow-y: auto; padding-bottom: 0.5rem; }
.menu-item { display:flex; align-items:center; gap:0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; padding: 0.4rem 0.7rem; }
.menu-label { display:inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 2.6rem); }
.menu-item .icon { margin-right: 0.5rem; }

/* Ensure logout button fits */
#logoutBtn { white-space: nowrap; font-size: 0.88rem; padding: 0.45rem 0.75rem; }

/* Sidebar small screens: reduce text to prevent wrapping */
@media (max-width: 640px) {
  .sidebar-company-name { max-width: 9rem; font-size: 0.96rem; }
  .menu-item { font-size: 0.80rem; padding: 0.3rem 0.45rem; }
  .menu-label { max-width: calc(100% - 2.2rem); }
}
.toggle-sidebar-btn {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  display: none;
}
@media (max-width: 1024px) {
  .toggle-sidebar-btn { display: inline-block; }
}

/* Button / filter wrapping */
.profit-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.profit-filter .profit-filter-type-btn { flex: 1 1 120px; min-width: 110px; white-space: nowrap; }

/* Menu items should wrap rather than overlap */
.menu-item { white-space: normal; }

/* Small helper for action groups */
.actions { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }

/* Badge styling */
.badge { display:inline-block; padding: 0.25rem 0.6rem; border-radius: 9999px; color: white; font-weight: 600; }

/* Dashboard tabs */
.dashboard-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dashboard-tab-btn { border: none; cursor: pointer; padding: 0.5rem 0.85rem; font-weight:600; background:white; color:inherit; flex: none; white-space:nowrap; }
.dashboard-tab-btn[aria-selected="true"], .dashboard-tab-btn.active { background-color: var(--primary, #0284c7); color: white; }
@media (max-width: 640px) { .dashboard-tabs { gap: 0.35rem; } .dashboard-tab-btn { padding: 0.45rem 0.6rem; font-size:0.85rem; } }

/* Dashboard compact layout rules */
.dashboard-content { font-size: 13px; }
@media (max-width: 768px) { .dashboard-content { font-size: 12px; } }
.dashboard-kpis .grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat-card { min-height: 100px; padding: 0.75rem; }
.stat-card .label { font-size: 0.9rem; }
.dashboard-content table th, .dashboard-content table td { font-size: 0.82rem; padding: 0.45rem; max-width: 140px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.dashboard-content button { white-space: normal !important; font-size: 0.85rem !important; }
.dashboard-content .actions { gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dashboard-content .dashboard-tab-btn { min-width: 72px; }
@media (max-width: 768px) { .stat-card { min-height: 90px; } .dashboard-content table th, .dashboard-content table td { font-size: 0.78rem; padding: 0.35rem; } }