/* ==========================================================================
   Global Utility Classes
   Use these classes directly in your HTML/JSX without writing custom CSS
   ========================================================================== */

/* -----------------------------------------
   Margin Top (Viewport Height based)
----------------------------------------- */
.mt-1vh { margin-top: 1vh !important; }
.mt-2vh { margin-top: 2vh !important; }
.mt-3vh { margin-top: 3vh !important; }
.mt-4vh { margin-top: 4vh !important; }
.mt-5vh { margin-top: 5vh !important; }
.mt-6vh { margin-top: 6vh !important; }
.mt-7vh { margin-top: 7vh !important; }
.mt-8vh { margin-top: 8vh !important; }
.mt-9vh { margin-top: 9vh !important; }
.mt-10vh { margin-top: 10vh !important; }

/* -----------------------------------------
   Margin Bottom (Viewport Height based)
----------------------------------------- */
.mb-1vh { margin-bottom: 1vh !important; }
.mb-2vh { margin-bottom: 2vh !important; }
.mb-3vh { margin-bottom: 3vh !important; }
.mb-4vh { margin-bottom: 4vh !important; }
.mb-5vh { margin-bottom: 5vh !important; }

/* -----------------------------------------
   Padding Top (Viewport Height based)
----------------------------------------- */
.pt-1vh { padding-top: 1vh !important; }
.pt-2vh { padding-top: 2vh !important; }
.pt-3vh { padding-top: 3vh !important; }
.pt-4vh { padding-top: 4vh !important; }
.pt-5vh { padding-top: 5vh !important; }
.pt-6vh { padding-top: 6vh !important; }
.pt-7vh { padding-top: 7vh !important; }
.pt-8vh { padding-top: 8vh !important; }
.pt-9vh { padding-top: 9vh !important; }
.pt-10vh { padding-top: 10vh !important; }

/* -----------------------------------------
   Padding Bottom (Viewport Height based)
----------------------------------------- */
.pb-1vh { padding-bottom: 1vh !important; }
.pb-2vh { padding-bottom: 2vh !important; }
.pb-3vh { padding-bottom: 3vh !important; }
.pb-4vh { padding-bottom: 4vh !important; }
.pb-5vh { padding-bottom: 5vh !important; }

/* -----------------------------------------
   Padding Inline (Percentage based)
   (Useful for wrapper left/right spacing)
----------------------------------------- */
.px-1p { padding-inline: 1% !important; }
.px-2p { padding-inline: 2% !important; }
.px-3p { padding-inline: 3% !important; }
.px-4p { padding-inline: 4% !important; }
.px-5p { padding-inline: 5% !important; }
.px-10p { padding-inline: 10% !important; }

/* -----------------------------------------
   Common Height & Layout Utilities
----------------------------------------- */
.min-h-100vh { min-height: 100vh !important; }
.min-h-calc-nav { min-height: calc(100vh - 100px) !important; } /* Normal Page Height */
.flex-grow-1 { flex-grow: 1 !important; }
.flex-center { display: flex !important; justify-content: center !important; align-items: center !important; }

/* -----------------------------------------
   Overflow Utilities
----------------------------------------- */
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-visible { overflow: visible !important; }

/* -----------------------------------------
   Hide Scrollbar but keep scroll functionality
----------------------------------------- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

/* -----------------------------------------
   Headings (Main & Sub)
----------------------------------------- */
.docusafe-main-heading {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  margin-bottom: 8px !important;
}

.docusafe-sub-heading {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #4a5568 !important;
  margin-bottom: 16px !important;
}

/* -----------------------------------------
   Font Sizes (px based)
----------------------------------------- */
.fs-10px { font-size: 10px !important; }
.fs-12px { font-size: 12px !important; }
.fs-14px { font-size: 14px !important; }
.fs-16px { font-size: 16px !important; }
.fs-18px { font-size: 18px !important; }
.fs-20px { font-size: 20px !important; }
.fs-22px { font-size: 22px !important; }
.fs-24px { font-size: 24px !important; }
.fs-28px { font-size: 28px !important; }
.fs-32px { font-size: 32px !important; }

/* -----------------------------------------
   Font Weights
----------------------------------------- */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; } /* Regular */
.fw-500 { font-weight: 500 !important; } /* Medium */
.fw-600 { font-weight: 600 !important; } /* Semi-Bold */
.fw-700 { font-weight: 700 !important; } /* Bold */
.fw-800 { font-weight: 800 !important; } /* Extra Bold */

/* -----------------------------------------
   Spacing utilities (px based)
----------------------------------------- */
/* Margin Top */
.mt-10px { margin-top: 10px !important; }
.mt-12px { margin-top: 12px !important; }
.mt-14px { margin-top: 14px !important; }
.mt-15px { margin-top: 15px !important; }
.mt-16px { margin-top: 16px !important; }
.mt-18px { margin-top: 18px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-24px { margin-top: 24px !important; }
.mt-28px { margin-top: 28px !important; }
.mt-30px { margin-top: 30px !important; }

/* Margin Bottom */
.mb-10px { margin-bottom: 10px !important; }
.mb-12px { margin-bottom: 12px !important; }
.mb-14px { margin-bottom: 14px !important; }
.mb-15px { margin-bottom: 15px !important; }
.mb-16px { margin-bottom: 16px !important; }
.mb-18px { margin-bottom: 18px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-24px { margin-bottom: 24px !important; }
.mb-28px { margin-bottom: 28px !important; }
.mb-30px { margin-bottom: 30px !important; }

/* Padding Top */
.pt-10px { padding-top: 10px !important; }
.pt-12px { padding-top: 12px !important; }
.pt-14px { padding-top: 14px !important; }
.pt-15px { padding-top: 15px !important; }
.pt-16px { padding-top: 16px !important; }
.pt-18px { padding-top: 18px !important; }
.pt-20px { padding-top: 20px !important; }
.pt-24px { padding-top: 24px !important; }
.pt-28px { padding-top: 28px !important; }
.pt-30px { padding-top: 30px !important; }

/* Padding Bottom */
.pb-10px { padding-bottom: 10px !important; }
.pb-12px { padding-bottom: 12px !important; }
.pb-14px { padding-bottom: 14px !important; }
.pb-15px { padding-bottom: 15px !important; }
.pb-16px { padding-bottom: 16px !important; }
.pb-18px { padding-bottom: 18px !important; }
.pb-20px { padding-bottom: 20px !important; }
.pb-24px { padding-bottom: 24px !important; }
.pb-28px { padding-bottom: 28px !important; }
.pb-30px { padding-bottom: 30px !important; }

/* -----------------------------------------
   DocuSafe Card Component
----------------------------------------- */
.docusafe-card {
  background-color: #f8f9fa !important; /* off-white */
  padding: 20px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* optional subtle shadow to look nice */
}

/* -----------------------------------------
   Text Truncation (Multi-line)
   (Bootstrap only has single-line .text-truncate)
----------------------------------------- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -----------------------------------------
   Cursor Utilities
----------------------------------------- */
.cursor-not-allowed { cursor: not-allowed !important; }

/* -----------------------------------------
   Absolute Centering
----------------------------------------- */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -----------------------------------------
   Hover Transitions & Effects
----------------------------------------- */
.transition-all { transition: all 0.3s ease-in-out; }
.hover-scale { transition: transform 0.2s; }
.hover-scale:hover { transform: scale(1.02); }
.hover-shadow { transition: box-shadow 0.2s; }
.hover-shadow:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* -----------------------------------------
   Flex Gap (px based)
   (Bootstrap gaps are rem based, px is easier sometimes)
----------------------------------------- */
.gap-10px { gap: 10px !important; }
.gap-15px { gap: 15px !important; }
.gap-20px { gap: 20px !important; }