/* =========================================================
   SMARTPOS PROFESSIONAL COMPACT THEME V1.0.31
========================================================= */

:root {
  --compact-blue: #2563eb;
  --compact-blue-dark: #1d4ed8;
  --compact-green: #16a34a;
  --compact-red: #dc2626;
  --compact-radius: 13px;
  --compact-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
}

/* PAGE STRUCTURE */

.main-content {
  padding: 16px 18px !important;
}

.page-section,
.dashboard-section {
  animation: compactPageIn 0.28s ease-out;
}

.page-header {
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.page-header h2,
.topbar h2 {
  margin-bottom: 2px !important;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.5px !important;
}

.page-header p,
.topbar p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.topbar {
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.topbar-actions {
  gap: 8px !important;
}

.profile {
  min-height: 58px !important;
  padding: 8px 11px !important;
  border-radius: 14px !important;
}

.profile-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
}

.profile strong {
  font-size: 12px !important;
}

.profile p {
  font-size: 10px !important;
}

.role-select {
  min-height: 55px !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
}

.role-select label {
  font-size: 9px !important;
}

.role-select select {
  font-size: 11px !important;
}

/* PANELS AND CARDS */

.panel,
.dashboard-card,
.employee-form-panel,
.employee-attendance-panel,
.employee-list-panel,
.employee-shift-history-panel {
  padding: 14px !important;
  border-radius: var(--compact-radius) !important;
  box-shadow: var(--compact-shadow) !important;
}

.panel-header {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.panel-header h3,
.card-header h3 {
  margin: 0 0 2px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
}

.panel-header p,
.card-header p {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* ALL SUMMARY GRIDS */

.stats-grid,
.reports-summary-grid,
.purchase-summary-grid,
.closing-summary-grid,
.devices-summary-grid,
.ai-summary-grid {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.stat-card,
.purchase-summary-card,
.admin-sales-summary-card {
  min-height: 88px !important;
  padding: 12px !important;
  gap: 9px !important;
  border-radius: 14px !important;
  box-shadow: var(--compact-shadow) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

.stat-card:hover,
.purchase-summary-card:hover,
.admin-sales-summary-card:hover {
  z-index: 2;
  border-color: #bfdbfe !important;
  box-shadow: 0 13px 32px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-3px);
}

.stat-icon,
.admin-sales-summary-card > i {
  width: 39px !important;
  height: 39px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
}

.stat-card p,
.purchase-summary-card span,
.admin-sales-summary-card span {
  margin-bottom: 3px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.stat-card h3,
.purchase-summary-card strong,
.admin-sales-summary-card strong {
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.1 !important;
}

.stat-card span,
.stat-card small,
.purchase-summary-card small,
.admin-sales-summary-card small {
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* CONTENT GRIDS */

.content-grid,
.employees-layout,
.closing-layout,
.ai-layout {
  gap: 12px !important;
}

#employeesSection .employees-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(285px, 0.65fr) !important;
}

#closingSection .closing-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr) !important;
}

/* FORMS */

.form-grid,
.report-filter-grid,
.employee-form-grid {
  gap: 10px 12px !important;
}

.form-group {
  gap: 3px !important;
  margin-bottom: 8px !important;
}

.form-group label,
.page-section label {
  margin-bottom: 3px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.page-section input,
.page-section select,
.page-section textarea,
.dashboard-section input,
.dashboard-section select,
.dashboard-section textarea {
  min-height: 37px !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}

.page-section textarea,
.dashboard-section textarea {
  min-height: 66px !important;
}

.page-section input:focus,
.page-section select:focus,
.page-section textarea:focus,
.dashboard-section input:focus,
.dashboard-section select:focus,
.dashboard-section textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11) !important;
}

/* PROFESSIONAL BUTTON SYSTEM */

.page-section button,
.dashboard-section button,
.topbar button {
  position: relative;
  overflow: hidden;
  min-height: 35px;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease !important;
}

.page-section button::after,
.dashboard-section button::after,
.topbar button::after {
  position: absolute;
  top: -60%;
  left: -85%;
  width: 55%;
  height: 220%;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );
  transform: rotate(17deg);
  transition: left 0.45s ease;
}

.page-section button:hover::after,
.dashboard-section button:hover::after,
.topbar button:hover::after {
  left: 135%;
}

.page-section button:hover,
.dashboard-section button:hover,
.topbar button:hover {
  filter: saturate(1.08);
  box-shadow: 0 8px 19px rgba(37, 99, 235, 0.19);
  transform: translateY(-2px);
}

.page-section button:active,
.dashboard-section button:active,
.topbar button:active {
  box-shadow: none;
  transform: translateY(0) scale(0.97);
}

.primary-btn,
.secondary-btn,
.refresh-btn,
#approveClosingReportBtn,
#calculateClosingBtn,
#saveClosingReportBtn,
#addEmployeeBtn,
#addProductBtn,
#addExpenseBtn,
#refreshDevicesBtn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.2) !important;
}

.complete-btn,
.success-btn,
#clockInEmployeeBtn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  box-shadow: 0 6px 15px rgba(22, 163, 74, 0.19) !important;
}

.danger-btn,
.delete-btn,
.cancel-btn,
.logout-btn,
#clockOutEmployeeBtn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.17) !important;
}

.hold-btn {
  color: #92400e !important;
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
}

.icon-action,
.notification-btn,
.purchase-popup-close {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

/* TABLES */

.inventory-table-wrapper,
.table-wrapper,
.purchase-table-wrapper,
.admin-sales-table-wrapper {
  max-height: 390px;
  overflow: auto !important;
  border-radius: 11px !important;
}

.page-section table,
.dashboard-section table {
  font-size: 10px !important;
}

.page-section table thead th,
.dashboard-section table thead th {
  padding: 8px 9px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.25px !important;
}

.page-section table tbody td,
.dashboard-section table tbody td {
  padding: 8px 9px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.page-section table tbody tr,
.dashboard-section table tbody tr {
  transition:
    background 0.18s ease,
    transform 0.18s ease !important;
}

.page-section table tbody tr:hover,
.dashboard-section table tbody tr:hover {
  background: #eff6ff !important;
}

.table-empty {
  min-height: 0 !important;
  padding: 11px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

/* BADGES */

.report-badge,
.purchase-status,
.payment-status,
.employee-status,
.sync-status-pill {
  min-height: 23px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
}

/* CHARTS AND GRAPHS */

.smartpos-chart-toolbar {
  margin-bottom: 7px !important;
}

.smartpos-chart-toolbar h3 {
  font-size: 18px !important;
}

.smartpos-chart-toolbar p,
.smartpos-chart-toolbar label {
  font-size: 10px !important;
}

.smartpos-chart-toolbar select {
  height: 32px !important;
  font-size: 10px !important;
}

.smartpos-chart-grid {
  gap: 9px !important;
}

.smartpos-chart-card {
  padding: 10px 11px !important;
  border-radius: 12px !important;
  box-shadow: var(--compact-shadow) !important;
}

.smartpos-chart-card h4 {
  font-size: 12px !important;
}

.smartpos-chart-card p {
  font-size: 9px !important;
}

.smartpos-chart-card canvas {
  width: 100% !important;
  max-height: 175px !important;
}

.smartpos-chart-card.smartpos-chart-wide canvas {
  max-height: 210px !important;
}

.smartpos-chart-legend {
  gap: 4px 9px !important;
  font-size: 8px !important;
}

.smartpos-trend-pill {
  padding: 3px 6px !important;
  font-size: 8px !important;
}

/* AUDIT LOGS */

#auditSection .audit-filter-panel {
  padding: 12px !important;
}

#auditSection .audit-filter-grid {
  gap: 9px !important;
}

#auditSection #auditLogsTable th,
#auditSection #auditLogsTable td {
  padding: 7px 8px !important;
}

#auditSection #auditLogsTable td:nth-child(5) {
  max-width: 430px;
}

/* EMPLOYEES */

#employeesSection .employee-photo-area {
  min-height: 0 !important;
  gap: 11px !important;
  padding: 11px !important;
  border-radius: 11px !important;
}

#employeesSection .employee-photo-preview {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
}

#employeesSection .employee-photo-area p {
  font-size: 9px !important;
}

#employeesSection .active-employee-card {
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 11px !important;
}

#employeesSection .active-employee-card p {
  margin: 2px 0 !important;
  font-size: 10px !important;
}

/* PRODUCTS */

#productsSection .stats-grid,
#expensesSection .stats-grid,
#devicesSection .devices-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#productsSection .stat-card,
#expensesSection .stat-card,
#devicesSection .stat-card {
  min-height: 92px !important;
}

.product-card {
  min-height: 0 !important;
  border-radius: 13px !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

.product-card:hover {
  box-shadow: 0 13px 28px rgba(37, 99, 235, 0.13) !important;
  transform: translateY(-3px);
}

/* DAILY CLOSING */

#closingSection .closing-panel {
  margin-bottom: 11px !important;
}

#closingSection .closing-calculation-box {
  gap: 3px !important;
  margin-top: 9px !important;
  padding: 10px !important;
  border-radius: 11px !important;
}

#closingSection .closing-calculation-box div {
  padding: 6px 0 !important;
  font-size: 10px !important;
}

#closingSection .closing-approval-box {
  min-height: 85px !important;
}

#closingSection .closing-approval-card {
  gap: 4px !important;
  padding: 9px !important;
  border-radius: 10px !important;
}

#closingSection .form-actions {
  gap: 7px !important;
  margin-top: 8px !important;
}

/* DEVICES */

#devicesSection .devices-summary-grid {
  gap: 9px !important;
}

#devicesSection .device-note,
#devicesSection .device-note-card {
  padding: 10px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

/* EXPENSES */

#expensesSection .expense-form-panel {
  padding: 14px !important;
}

#expensesSection .form-grid {
  gap: 9px 12px !important;
}

/* PROFESSIONAL MOTION */

@keyframes compactPageIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* RESPONSIVE */

@media (max-width: 1100px) {
  #productsSection .stats-grid,
  #expensesSection .stats-grid,
  #devicesSection .devices-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #employeesSection .employees-layout,
  #closingSection .closing-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .main-content {
    padding: 10px !important;
  }

  .topbar,
  .page-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .topbar-actions {
    flex-wrap: wrap !important;
  }

  .stats-grid,
  .reports-summary-grid,
  .purchase-summary-grid,
  #productsSection .stats-grid,
  #expensesSection .stats-grid,
  #devicesSection .devices-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .smartpos-chart-grid {
    grid-template-columns: 1fr !important;
  }

  .smartpos-chart-card canvas,
  .smartpos-chart-card.smartpos-chart-wide canvas {
    max-height: 170px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .stats-grid,
  .reports-summary-grid,
  .purchase-summary-grid,
  #productsSection .stats-grid,
  #expensesSection .stats-grid,
  #devicesSection .devices-summary-grid {
    grid-template-columns: 1fr !important;
  }
}