/* ==========================================================================
   NextRide Layout & Spacing Utilities
   Supplements Bootstrap utilities with project-specific classes using
   the design-token spacing scale.
   
   All classes are prefixed with `nr-` to avoid collisions with Bootstrap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Flex helpers
   -------------------------------------------------------------------------- */
.nr-flex          { display: flex; }
.nr-inline-flex   { display: inline-flex; }
.nr-flex-col      { flex-direction: column; }
.nr-flex-row      { flex-direction: row; }
.nr-flex-wrap     { flex-wrap: wrap; }
.nr-flex-1        { flex: 1 1 0%; }
.nr-flex-shrink-0 { flex-shrink: 0; }

.nr-items-center   { align-items: center; }
.nr-items-start    { align-items: flex-start; }
.nr-items-end      { align-items: flex-end; }
.nr-items-stretch  { align-items: stretch; }

.nr-justify-center  { justify-content: center; }
.nr-justify-between { justify-content: space-between; }
.nr-justify-end     { justify-content: flex-end; }
.nr-justify-start   { justify-content: flex-start; }

.nr-self-center { align-self: center; }
.nr-self-end    { align-self: flex-end; }

/* --------------------------------------------------------------------------
   Gap utilities  (uses spacing scale)
   -------------------------------------------------------------------------- */
.nr-gap-0   { gap: 0; }
.nr-gap-1   { gap: var(--nr-space-1); }
.nr-gap-1-5 { gap: var(--nr-space-1-5); }
.nr-gap-2   { gap: var(--nr-space-2); }
.nr-gap-3   { gap: var(--nr-space-3); }
.nr-gap-4   { gap: var(--nr-space-4); }
.nr-gap-5   { gap: var(--nr-space-5); }
.nr-gap-6   { gap: var(--nr-space-6); }
.nr-gap-8   { gap: var(--nr-space-8); }

/* --------------------------------------------------------------------------
   Page content wrapper — use on the outermost div in a Blazor page to get
   consistent horizontal breathing room without locking out edge-to-edge layouts.
   Pages that want true edge-to-edge simply omit this class.
   -------------------------------------------------------------------------- */
.nr-page {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .nr-page {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Padding utilities
   -------------------------------------------------------------------------- */
.nr-p-0  { padding: 0; }
.nr-p-1  { padding: var(--nr-space-1); }
.nr-p-2  { padding: var(--nr-space-2); }
.nr-p-3  { padding: var(--nr-space-3); }
.nr-p-4  { padding: var(--nr-space-4); }
.nr-p-6  { padding: var(--nr-space-6); }
.nr-p-8  { padding: var(--nr-space-8); }

.nr-px-2 { padding-left: var(--nr-space-2); padding-right: var(--nr-space-2); }
.nr-px-3 { padding-left: var(--nr-space-3); padding-right: var(--nr-space-3); }
.nr-px-4 { padding-left: var(--nr-space-4); padding-right: var(--nr-space-4); }
.nr-px-6 { padding-left: var(--nr-space-6); padding-right: var(--nr-space-6); }

.nr-py-2 { padding-top: var(--nr-space-2); padding-bottom: var(--nr-space-2); }
.nr-py-3 { padding-top: var(--nr-space-3); padding-bottom: var(--nr-space-3); }
.nr-py-4 { padding-top: var(--nr-space-4); padding-bottom: var(--nr-space-4); }

/* --------------------------------------------------------------------------
   Margin utilities
   -------------------------------------------------------------------------- */
.nr-m-0  { margin: 0; }
.nr-mt-1 { margin-top: var(--nr-space-1); }
.nr-mt-2 { margin-top: var(--nr-space-2); }
.nr-mt-3 { margin-top: var(--nr-space-3); }
.nr-mt-4 { margin-top: var(--nr-space-4); }
.nr-mt-6 { margin-top: var(--nr-space-6); }
.nr-mt-8 { margin-top: var(--nr-space-8); }

.nr-mb-1 { margin-bottom: var(--nr-space-1); }
.nr-mb-2 { margin-bottom: var(--nr-space-2); }
.nr-mb-3 { margin-bottom: var(--nr-space-3); }
.nr-mb-4 { margin-bottom: var(--nr-space-4); }
.nr-mb-6 { margin-bottom: var(--nr-space-6); }

.nr-mr-1 { margin-right: var(--nr-space-1); }
.nr-mr-2 { margin-right: var(--nr-space-2); }
.nr-mr-3 { margin-right: var(--nr-space-3); }

.nr-ml-1 { margin-left: var(--nr-space-1); }
.nr-ml-2 { margin-left: var(--nr-space-2); }
.nr-ml-auto { margin-left: auto; }

/* --------------------------------------------------------------------------
   Width / size helpers
   -------------------------------------------------------------------------- */
.nr-w-full   { width: 100%; }
.nr-h-full   { height: 100%; }
.nr-min-w-0  { min-width: 0; }
.nr-max-w-md { max-width: 28rem; }
.nr-max-w-lg { max-width: 32rem; }
.nr-max-w-xl { max-width: 36rem; }
.nr-max-w-2xl { max-width: 42rem; }

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

/* --------------------------------------------------------------------------
   Positioning
   -------------------------------------------------------------------------- */
.nr-relative { position: relative; }
.nr-absolute { position: absolute; }
.nr-sticky   { position: sticky; }
.nr-inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* --------------------------------------------------------------------------
   Border-radius helpers
   -------------------------------------------------------------------------- */
.nr-rounded-sm   { border-radius: var(--nr-radius-sm); }
.nr-rounded-md   { border-radius: var(--nr-radius-md); }
.nr-rounded-lg   { border-radius: var(--nr-radius-lg); }
.nr-rounded-xl   { border-radius: var(--nr-radius-xl); }
.nr-rounded-2xl  { border-radius: var(--nr-radius-2xl); }
.nr-rounded-full { border-radius: var(--nr-radius-full); }

/* --------------------------------------------------------------------------
   Background & surface helpers
   -------------------------------------------------------------------------- */
.nr-bg-background { background-color: var(--nr-background); }
.nr-bg-card        { background-color: var(--nr-card); }
.nr-bg-muted       { background-color: var(--nr-muted); }
.nr-bg-secondary   { background-color: var(--nr-secondary); }
.nr-bg-accent      { background-color: var(--nr-accent); }
.nr-bg-destructive { background-color: var(--nr-destructive); }

/* --------------------------------------------------------------------------
   Border helpers
   -------------------------------------------------------------------------- */
.nr-border         { border: 1px solid var(--nr-border); }
.nr-border-b       { border-bottom: 1px solid var(--nr-border); }
.nr-border-t       { border-top: 1px solid var(--nr-border); }

/* --------------------------------------------------------------------------
   Shadow helpers
   -------------------------------------------------------------------------- */
.nr-shadow-sm { box-shadow: var(--nr-shadow-sm); }
.nr-shadow    { box-shadow: var(--nr-shadow); }
.nr-shadow-md { box-shadow: var(--nr-shadow-md); }
.nr-shadow-lg { box-shadow: var(--nr-shadow-lg); }

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

/* --------------------------------------------------------------------------
   Visibility / display
   -------------------------------------------------------------------------- */
.nr-hidden        { display: none; }
.nr-block         { display: block; }
.nr-inline-block  { display: inline-block; }
.nr-grid          { display: grid; }

/* --------------------------------------------------------------------------
   Responsive visibility  (mobile-first breakpoints)
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .nr-sm\:flex   { display: flex; }
    .nr-sm\:hidden { display: none; }
    .nr-sm\:block  { display: block; }
}

@media (min-width: 768px) {
    .nr-md\:flex   { display: flex; }
    .nr-md\:hidden { display: none; }
    .nr-md\:grid   { display: grid; }
}

@media (min-width: 1024px) {
    .nr-lg\:flex   { display: flex; }
    .nr-lg\:hidden { display: none; }
    .nr-lg\:block  { display: block; }
}