/**
 * VERTEX PRO — Unified responsive system + comfortable dark/light tokens
 * Load after layout/theme layers. Does not change PHP or JS class names.
 */

/* ── Breakpoints ── */
:root {
  --vx-bp-mobile-sm: 480px;
  --vx-bp-mobile: 767px;
  --vx-bp-tablet: 1023px;
  --vx-bp-laptop: 1365px;

  /* Touch & safe area */
  --vx-touch-min: 44px;
  --vx-safe-top: env(safe-area-inset-top, 0px);
  --vx-safe-right: env(safe-area-inset-right, 0px);
  --vx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vx-safe-left: env(safe-area-inset-left, 0px);

  /* Light theme (comfortable) */
  --vtx-bg-page: #f8fafc;
  --vtx-bg-card: #ffffff;
  --vtx-bg-elevated: #f1f5f9;
  --vtx-border: #e2e8f0;
  --vtx-border-strong: #cbd5e1;
  --vtx-text: #0f172a;
  --vtx-text-secondary: #64748b;
  --vtx-primary: #3b82f6;
  --vtx-primary-hover: #2563eb;
  --vtx-success: #22c55e;
  --vtx-danger: #ef4444;
  --vtx-warning: #f59e0b;

  /* Typography */
  --vx-font-table-desktop: 16px;
  --vx-font-table-mobile: 14px;
  --vx-font-input: 16px;
  --vx-line-table: 1.45;

  /* Layout */
  --vx-drawer-width: min(300px, 88vw);
  --vx-header-height: 52px;
  --vx-modal-max-desktop: 1100px;
  --vx-modal-max-invoice: 1140px;

  /* Cards grid */
  --vx-cards-cols: repeat(auto-fit, minmax(160px, 1fr));
}

/* ── Dark theme — eye-comfort palette ── */
html[data-theme="dark"],
body.dark {
  --vtx-bg-page: #0f172a;
  --vtx-bg-card: #1e293b;
  --vtx-bg-elevated: #182235;
  --vtx-border: #334155;
  --vtx-border-strong: #475569;
  --vtx-text: #e5e7eb;
  --vtx-text-secondary: #94a3b8;
  --vtx-primary: #3b82f6;
  --vtx-primary-hover: #60a5fa;
  --vtx-success: #22c55e;
  --vtx-danger: #ef4444;
  --vtx-warning: #f59e0b;

  --vx-page-bg: #0f172a;
  --vx-page-card: #1e293b;
  --vx-page-card2: #182235;
  --vx-page-border: #334155;
  --vx-page-text: #e5e7eb;
  --vx-page-muted: #94a3b8;
  --vx-dark-bg: #0f172a;
  --vx-dark-card: #1e293b;
  --vx-dark-card2: #182235;
  --vx-dark-border: #334155;
  --vx-dark-text: #e5e7eb;

  --vh-bg: #111827;
  --vh-border: #334155;
  --vh-text: #e5e7eb;
  --vh-muted: #94a3b8;

  --vx-filter-input-bg: #1e293b;
  --vx-modal-body-bg: #1e293b;
  --vx-modal-foot-bg: #182235;
  --vx-modal-text: #e5e7eb;
  --vx-modal-muted: #94a3b8;
  --vx-modal-label: #cbd5e1;
}

/* ── Global: no page-level horizontal scroll ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body.app {
  overflow-x: hidden;
  max-width: 100vw;
}

body.app {
  padding-top: var(--vx-safe-top);
  padding-bottom: var(--vx-safe-bottom);
  background: var(--vtx-bg-page) !important;
  color: var(--vtx-text);
}

body.app .main {
  padding-bottom: calc(12px + var(--vx-safe-bottom)) !important;
}

/* ── Inputs: 16px min (iPhone no-zoom) ── */
@media (max-width: 767px) {
  body.app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.app select,
  body.app textarea,
  body.app .vertex-header-search input[type="search"] {
    font-size: var(--vx-font-input) !important;
    min-height: var(--vx-touch-min);
  }
}

/* ── Touch targets ── */
body.app .btn,
body.app .tool-btn,
body.app .quick-btn,
body.app .vertex-header-icon,
body.app .vertex-header-nav-btn,
body.app .side-icon-btn-v16,
body.app .vx-filter-toggle-btn {
  min-height: var(--vx-touch-min);
  min-width: var(--vx-touch-min);
  touch-action: manipulation;
}

body.app .btn:active,
body.app .tool-btn:active,
body.app .vertex-header-icon:active {
  transform: scale(0.98);
  opacity: 0.92;
}

/* ── Sidebar overlay (mobile drawer) ── */
.vertex-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

body.app.sidebar-open .vertex-sidebar-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ── Mobile / tablet drawer (< 768px) ── */
@media (max-width: 767px) {
  html body.app.direct-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(100dvh, 100vh) auto !important;
  }

  html body.app.direct-page > .sidebar,
  html body.app.direct-page .sidebar.vertex-sidebar-v16 {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: var(--vx-drawer-width) !important;
    min-width: var(--vx-drawer-width) !important;
    max-width: var(--vx-drawer-width) !important;
    z-index: 1200 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    padding-top: calc(12px + var(--vx-safe-top)) !important;
    padding-bottom: calc(12px + var(--vx-safe-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  html[dir="rtl"] body.app.direct-page > .sidebar,
  html[dir="rtl"] body.app.direct-page .sidebar.vertex-sidebar-v16 {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    transform: translateX(100%);
  }

  html[dir="ltr"] body.app.direct-page > .sidebar,
  html[dir="ltr"] body.app.direct-page .sidebar.vertex-sidebar-v16 {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: translateX(-100%);
  }

  html body.app.direct-page.sidebar-open > .sidebar,
  html body.app.direct-page.sidebar-open .sidebar.vertex-sidebar-v16 {
    transform: translateX(0) !important;
  }

  html body.app.direct-page > .main,
  html body.app.direct-page .main {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    padding-bottom: calc(10px + var(--vx-safe-bottom)) !important;
  }

  /* On mobile: mini mode hidden — drawer only */
  html body.app.direct-page.sidebar-mini > .sidebar,
  html body.app.direct-page.sidebar-mini .sidebar.vertex-sidebar-v16 {
    width: var(--vx-drawer-width) !important;
    min-width: var(--vx-drawer-width) !important;
    max-width: var(--vx-drawer-width) !important;
  }

  body.app.sidebar-mini .vertex-sidebar-menu-v16 .menu-title b,
  body.app.sidebar-mini .vertex-sidebar-menu-v16 .menu-items a em {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
  }

  /* Header: compact sticky */
  body.app .vertex-header-bar {
    position: sticky;
    top: var(--vx-safe-top);
    z-index: 1100;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 10px;
    min-height: var(--vx-header-height);
  }

  body.app .vertex-header-title-text {
    font-size: 14px;
    padding: 0 8px;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app .vertex-header-search {
    min-width: 0;
  }

  body.app .vertex-header-date .vh-date-day,
  body.app .vertex-header-chip.vertex-header-date small {
    display: none;
  }

  body.app .vertex-header-nav .vh-nav-label {
    display: none;
  }

  body.app .vertex-header-nav-btn {
    min-width: var(--vx-touch-min);
    padding: 0 8px;
  }
}

/* Tablet: sidebar mini optional, full width content */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --vx-page-padding: 10px;
    --vx-cards-cols: repeat(2, minmax(0, 1fr));
  }

  html body.app.direct-page .filter-row-one,
  html body.app.direct-page .filter-row-three,
  html body.app.direct-page .result-cards,
  html body.app.direct-page .stats-row,
  html body.app.direct-page .si-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Laptop */
@media (min-width: 1024px) and (max-width: 1365px) {
  :root {
    --vx-cards-cols: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop large */
@media (min-width: 1366px) {
  :root {
    --vx-cards-cols: repeat(auto-fit, minmax(180px, 1fr));
    --vx-page-padding: 12px;
  }

  html body.app.direct-page .main {
    max-width: 100%;
  }
}

/* ── Tables unified ── */
body.app .table-wrap,
body.app .si-table-wrap,
body.app .data-table-wrap,
body.app .table-responsive,
body.app .wallet-tables,
body.app .ws-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--vx-card-radius, 14px);
}

body.app table,
body.app .si-table,
body.app .table-v12,
body.app .ws-table,
body.app .clean-table {
  font-size: var(--vx-font-table-desktop);
  line-height: var(--vx-line-table);
  border-collapse: collapse;
}

body.app table th,
body.app .si-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--vtx-bg-elevated, #f8fafc);
  font-size: 13px;
  padding: 10px 12px;
  white-space: nowrap;
}

body.app table td,
body.app .si-table td {
  padding: 9px 12px;
  vertical-align: middle;
}

body.app table tbody tr {
  min-height: 44px;
}

body.dark body.app table th,
body.dark.app table th {
  background: #182235 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

body.dark.app table td {
  border-color: #334155 !important;
}

body.dark.app table tbody tr:nth-child(even) td {
  background: #1a2438 !important;
}

body.dark.app table tbody tr:hover td {
  background: #243044 !important;
}

@media (max-width: 767px) {
  body.app table,
  body.app .si-table {
    font-size: var(--vx-font-table-mobile);
  }

  body.app table th,
  body.app table td {
    padding: 8px 10px;
  }

  /* Sticky first column on mobile tables */
  body.app .table-wrap table th:first-child,
  body.app .table-wrap table td:first-child,
  body.app .si-table-wrap table th:first-child,
  body.app .si-table-wrap table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: inherit;
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.06);
  }

  body.app .table-wrap table th:first-child {
    z-index: 3;
  }
}

/* ── Modals responsive ── */
body.app .modal-backdrop.show,
body.app .modal-si.show,
body.app .modal.show,
body.app .col-modal-backdrop.show {
  padding: max(8px, var(--vx-safe-top)) max(8px, var(--vx-safe-right))
    max(8px, var(--vx-safe-bottom)) max(8px, var(--vx-safe-left));
  align-items: center !important;
  justify-content: center !important;
}

body.app .modal-box,
body.app .modal-card,
body.app .inv-modal-box,
body.app .col-modal-box,
body.app .ws-modal-box,
body.app .exp-modal-box,
body.app .tk-modal-box {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px - var(--vx-safe-top) - var(--vx-safe-bottom));
  overflow: hidden;
}

body.app .modal-head,
body.app .modal-header,
body.app .inv-modal-head {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

body.app .modal-body,
body.app .inv-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

body.app .modal-foot,
body.app .modal-footer,
body.app .inv-modal-foot {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-bottom: calc(10px + var(--vx-safe-bottom));
  background: var(--vtx-bg-card, #fff);
  border-top: 1px solid var(--vtx-border, #e2e8f0);
}

body.dark.app .modal-foot,
body.dark.app .modal-footer,
body.dark.app .inv-modal-foot {
  background: var(--vtx-bg-card, #1e293b);
  border-color: #334155;
}

@media (min-width: 1024px) {
  body.app .modal-box:not(.inv-modal-box),
  body.app .modal-card,
  body.app .ws-modal-box,
  body.app .exp-modal-box {
    max-width: min(720px, 92vw) !important;
  }

  body.app #invoiceModal > .inv-modal-box,
  body.app #purchaseModal > .inv-modal-box {
    max-width: min(var(--vx-modal-max-invoice), 96vw) !important;
  }
}

@media (max-width: 767px) {
  body.app .modal-box,
  body.app .modal-card,
  body.app .inv-modal-box,
  body.app .col-modal-box,
  body.app .ws-modal-box,
  body.app .exp-modal-box,
  body.app .tk-modal-box,
  body.app .user-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    max-height: 90dvh !important;
    border-radius: 16px !important;
  }

  body.app #invoiceModal > .inv-modal-box,
  body.app #purchaseModal > .inv-modal-box {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: 0 !important;
  }

  body.app .modal-foot .btn,
  body.app .inv-modal-foot .btn,
  body.app .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app .modal-foot,
  body.app .inv-modal-foot,
  body.app .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: stretch;
  }
}

/* Dark modals */
body.dark.app .modal-box,
body.dark.app .inv-modal-box,
body.dark.app .modal-card {
  background: var(--vtx-bg-card) !important;
  border-color: #334155 !important;
  color: var(--vtx-text) !important;
}

body.dark.app .modal-body input,
body.dark.app .modal-body select,
body.dark.app .modal-body textarea,
body.dark.app .inv-modal-body input,
body.dark.app .inv-modal-body select,
body.dark.app .inv-modal-body textarea {
  background: #182235 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark.app .modal-body input::placeholder,
body.dark.app .inv-modal-body input::placeholder {
  color: #94a3b8 !important;
}

/* ── Filters: mobile collapse ── */
.vx-filter-toggle-btn {
  display: none;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--vtx-border);
  background: var(--vtx-bg-card);
  color: var(--vtx-primary);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vx-filter-panel-body.vx-filter-collapsed {
  display: none !important;
}

@media (max-width: 767px) {
  .vx-filter-toggle-btn {
    display: inline-flex;
  }

  .vx-filter-panel-body:not(.vx-filter-expanded) {
    display: none !important;
  }

  .vx-filter-panel-body.vx-filter-expanded {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .vx-filter-panel-body {
    display: block !important;
  }
}

/* ── Cards grid ── */
body.app .stats-row,
body.app .result-cards,
body.app .summary-grid,
body.app .cards-grid,
body.app .si-stats-row {
  grid-template-columns: var(--vx-cards-cols) !important;
}

@media (max-width: 479px) {
  body.app .stats-row,
  body.app .result-cards,
  body.app .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  body.app .stats-row,
  body.app .result-cards {
    grid-template-columns: 1fr !important;
  }
}

body.app .stat-card,
body.app .result-card,
body.app .result-card-v12 {
  min-height: 72px;
  padding: 12px 14px !important;
}

body.app .stat-card strong,
body.app .result-card strong {
  font-size: clamp(15px, 4vw, 18px) !important;
}

/* ── Dark: header & sidebar comfort ── */
body.dark .vertex-header-bar {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark .vertex-sidebar-v16 {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark .vertex-header-title-text {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

/* ── Loading state utility ── */
.vx-btn-loading {
  pointer-events: none;
  opacity: 0.72;
  position: relative;
}

.vx-btn-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vx-spin 0.65s linear infinite;
  vertical-align: middle;
}

@keyframes vx-spin {
  to { transform: rotate(360deg); }
}

/* ── Login page responsive ── */
body.login-page {
  min-height: 100dvh;
  padding: calc(16px + var(--vx-safe-top)) 16px calc(16px + var(--vx-safe-bottom));
}

@media (max-width: 767px) {
  body.login-page .login-wrap,
  body.login-page .login-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
}