/* =====================================================================
   vb-buttons.css — master button system for ViyaBook
   Loaded LAST on every page so it wins the cascade. Goal: every button
   is the SAME size/shape, and the standard primary/secondary/danger
   buttons are the SAME solid colours (no gradients) on every page.

   Scope guard (learned from the global-CSS regression): we force
   GEOMETRY on all .btn-family buttons, but force COLOUR only on the
   well-known generic classes. Specialised buttons that pages colour
   themselves (e.g. .btn-approve, .btn-reject, .btn-view) keep their own
   colours — we only normalise their size.
   ===================================================================== */

/* ── Geometry: every button, same size & shape ───────────────────────── */
.btn,
.primary-button,
.secondary-button,
.save-btn,
.primary-btn,
.delete-btn {
  /* Design-system standard: medium/primary button = 44px, radius 12, 14px text */
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: all .15s !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
.btn:active { transform: scale(.97) !important; }
.btn:disabled,
.primary-button:disabled,
.save-btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Primary family — solid var(--primary), no gradient, no shadow ───────────── */
.btn-primary,
.btn-gradient,
.primary-button,
.primary-btn,
.save-btn,
.btn.primary,
button.primary,
#completeSaleBtn {
  background: var(--primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-gradient:hover,
.primary-button:hover,
.save-btn:hover,
.btn.primary:hover,
#completeSaleBtn:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* ── Secondary / light family ────────────────────────────────────────── */
.btn-secondary,
.secondary-button,
.btn-light,
.btn-soft {
  background: #f0f5ff !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid #ccd9f0 !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.btn-light:hover,
.btn-soft:hover {
  background: #dce8ff !important;
  border-color: #adc3e8 !important;
}

/* ── Danger family ───────────────────────────────────────────────────── */
.btn-danger {
  background: #E24B4A !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #E24B4A !important;
  box-shadow: none !important;
}
.btn-danger:hover { background: #A32D2D !important; border-color: #A32D2D !important; }

/* ── Outline / ghost ─────────────────────────────────────────────────── */
.btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
.btn-outline:hover { background: #e6f1fb !important; }
.btn-ghost {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.btn-ghost:hover { background: #f0f5ff !important; color: var(--text) !important; }

/* ── Size modifiers (after base so they override height) ─────────────── */
/* Design-system sizes: Small 36/13/r10 · Large 48 (base/medium stays 44/14/r12) */
.btn-sm { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; border-radius: 10px !important; }
.btn-lg { height: 48px !important; min-height: 48px !important; padding: 0 22px !important; font-size: 15px !important; border-radius: 12px !important; }
.btn-icon { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center !important; }

/* ── Icons inside buttons (action icon = 18px) ───────────────────────── */
.btn i, .btn svg { font-size: 18px !important; flex-shrink: 0 !important; }

/* ── Unified invoice/row Actions dropdown (scoped to .td-dd to avoid
      colliding with the existing .act-btn icon buttons on other pages).
      The .dd-menu is fixed-positioned by toggleDD() in shared-sidebar.js so it
      is never clipped by a table's overflow. ───────────────────────────── */
.td-dd { position: relative; display: inline-flex; }
.td-dd .act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 600;
  border-radius: 10px; border: 0.5px solid #c8c6bc;
  background: #fff; color: #1a1a18; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: all .15s; width: auto;
}
.td-dd .act-btn:hover { background: #f5f5f3; border-color: #888780; }
.td-dd .act-btn.open { border-color: var(--primary); color: var(--primary); background: #E6F1FB; }
.td-dd .act-btn i { font-size: 14px; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 5px);
  background: #fff; border: 0.5px solid #c8c6bc; border-radius: 12px;
  padding: 5px; min-width: 200px; z-index: 99999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); display: none;
}
.dd-menu.open { display: block; }
.dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: #1a1a18; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; transition: background .12s;
}
.dd-item:hover { background: #f5f5f3; }
.dd-item i { font-size: 16px; color: #6b6a65; width: 18px; flex-shrink: 0; }
.dd-item.danger { color: #E24B4A; }
.dd-item.danger i { color: #E24B4A; }
.dd-item.danger:hover { background: #FCEBEB; }
.dd-item.disabled { opacity: .38; pointer-events: none; }
.dd-item.hidden { display: none; }
.dd-divider { height: 0.5px; background: #e8e6de; margin: 4px 0; }
.dd-tag { margin-left: auto; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
.dd-tag-paid { background: #E1F5EE; color: #0F6E56; }
.dd-tag-pend { background: #FAEEDA; color: #854F0B; }

/* ── Action-button size normalization ─────────────────────────────────────────
   Rectangular TEXT action buttons match the canonical .btn (44px height / 14px /
   12px radius) so action buttons are one consistent size across web/tablet/mobile.
   Pills (.filter-btn), cards (.mira-export-btn), links (.link-btn), tabs and
   icon-only buttons (.del-btn) intentionally keep their own shape. */
.act-btn,
.cust-btn,
.secondary-button {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}