/* ============================================================
   Koshda Jewellery House — Utility Classes (CSS)
   ============================================================ */

/* Spacing helpers */
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Display helpers */
.d-flex      { display: flex; }
.d-grid      { display: grid; }
.d-block     { display: block; }
.d-inline    { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Width/Height helpers */
.w-auto { width: auto; }
.w-50   { width: 50%; }
.w-75   { width: 75%; }
.w-100  { width: 100%; }
.mw-300 { max-width: 300px; }
.mw-400 { max-width: 400px; }
.mw-600 { max-width: 600px; }
.mw-800 { max-width: 800px; }

/* Overflow */
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

/* Vertical align */
.va-middle { vertical-align: middle; }

/* Flex shorthand */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1   { flex-grow: 1; }

/* Border radius helpers */
.br-sm { border-radius: var(--radius-sm); }
.br-md { border-radius: var(--radius-md); }
.br-lg { border-radius: var(--radius-lg); }

/* Ellipsis */
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Cursor */
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }

/* Visibility */
.invisible { visibility: hidden; }
.visible   { visibility: visible; }

/* Sticky */
.sticky-top { position: sticky; top: 0; z-index: 10; }

/* Divider text */
.divider-or {
  display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font-size: 12px;
}
.divider-or::before, .divider-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border-subtle);
}

/* Quick highlight */
.highlight-gold { color: var(--gold-500); font-weight: 600; }
.highlight-red  { color: var(--red-500); font-weight: 600; }
.highlight-green{ color: var(--green-500); font-weight: 600; }

/* Code style */
code, .mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gold-400);
}

/* Print */
@media print {
  .no-print { display: none !important; }
}

/* Responsive display helpers */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

.mobile-menu-btn { display: none; }
@media (max-width: 768px) {
  .dealer-topbar, .admin-topbar {
    position: relative;
    padding-left: 56px !important;
  }
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: var(--space-2);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}