/* Design tokens: mobile-first spacing, typography, breakpoints */
:root {
  /* Breakpoints (single source of truth) */
  --dt-breakpoint-xs: 0px;
  --dt-breakpoint-sm: 576px;
  --dt-breakpoint-md: 768px;
  --dt-breakpoint-lg: 992px;
  --dt-breakpoint-xl: 1200px;

  /* Spacing scale */
  --dt-space-0: 0;
  --dt-space-1: 0.25rem;
  --dt-space-2: 0.5rem;
  --dt-space-3: 0.75rem;
  --dt-space-4: 0.9375rem;
  --dt-space-5: 1.375rem;
  --dt-space-6: 1.75rem;
  --dt-space-7: 2.5rem;

  /* Type scale (mobile-first with clamp ranges) */
  --dt-font-size-body: clamp(0.99rem, 0.95rem + 0.35vw, 1.08rem);
  --dt-font-size-caption: clamp(0.875rem, 0.83rem + 0.25vw, 0.97rem);
  --dt-font-size-h1: clamp(2rem, 1.5rem + 2.6vw, 3rem);
  --dt-font-size-h2: clamp(1.7rem, 1.35rem + 1.8vw, 2.45rem);
  --dt-font-size-h3: clamp(1.5rem, 1.22rem + 1.2vw, 2rem);
  --dt-font-size-h4: clamp(1.3rem, 1.12rem + 0.8vw, 1.7rem);
  --dt-font-size-h5: clamp(1.15rem, 1.04rem + 0.4vw, 1.35rem);
  --dt-font-size-h6: clamp(1rem, 0.98rem + 0.2vw, 1.1rem);

  --dt-line-height-heading: 1.2;
  --dt-line-height-body: 1.6;
  --dt-line-height-caption: 1.5;

  --dt-letter-spacing-tight: -0.01em;
  --dt-letter-spacing-body: 0.01em;
  --dt-letter-spacing-caption: 0.02em;

  --dt-text-primary: #0f172a;
  --dt-surface-contrast: #f8fafc;
}

@media (min-width: 768px) {
  :root {
    --dt-space-4: 1rem;
    --dt-space-5: 1.5rem;
    --dt-space-6: 2rem;
    --dt-space-7: 3rem;
  }
}

/* Base document structure: full-height, no horizontal overflow */
html {
  min-height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg, var(--dt-surface-contrast));
  color: var(--bs-body-color, var(--dt-text-primary));
  font-size: var(--dt-font-size-body);
  line-height: var(--dt-line-height-body);
  letter-spacing: var(--dt-letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body > #layoutSidenav,
body > #layoutError,
body > #layoutAuthentication,
body > #app,
body > #main,
body > #page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  flex: 1 1 auto;
}

/* On desktop, Docutrak shell uses a sidebar + content row layout */
@media (min-width: 992px) {
    #app-shell {
        flex-direction: row;
        align-items: stretch;
    }
}


main {
  min-width: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  line-height: var(--dt-line-height-heading);
  letter-spacing: var(--dt-letter-spacing-tight);
  color: var(--dt-text-primary);
  margin-top: 0;
  margin-bottom: var(--dt-space-2);
}

h1,
.h1 {
  font-size: var(--dt-font-size-h1);
}

h2,
.h2 {
  font-size: var(--dt-font-size-h2);
}

h3,
.h3 {
  font-size: var(--dt-font-size-h3);
}

h4,
.h4 {
  font-size: var(--dt-font-size-h4);
}

h5,
.h5 {
  font-size: var(--dt-font-size-h5);
}

h6,
.h6 {
  font-size: var(--dt-font-size-h6);
}

p,
li,
body,
input,
select,
textarea,
button {
  line-height: var(--dt-line-height-body);
}

small,
figcaption,
.caption,
.text-caption {
  font-size: var(--dt-font-size-caption);
  line-height: var(--dt-line-height-caption);
  letter-spacing: var(--dt-letter-spacing-caption);
}

@media (max-width: 576px) {
  body {
    letter-spacing: 0.015em;
  }

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3 {
    letter-spacing: -0.005em;
  }
}

/* Spacing utilities mapped to tokens with mobile-friendly density */
.p-0 { padding: var(--dt-space-0) !important; }
.p-1 { padding: var(--dt-space-1) !important; }
.p-2 { padding: var(--dt-space-2) !important; }
.p-3 { padding: var(--dt-space-3) !important; }
.p-4 { padding: var(--dt-space-4) !important; }
.p-5 { padding: var(--dt-space-5) !important; }

.pt-0 { padding-top: var(--dt-space-0) !important; }
.pt-1 { padding-top: var(--dt-space-1) !important; }
.pt-2 { padding-top: var(--dt-space-2) !important; }
.pt-3 { padding-top: var(--dt-space-3) !important; }
.pt-4 { padding-top: var(--dt-space-4) !important; }
.pt-5 { padding-top: var(--dt-space-5) !important; }

.pb-0 { padding-bottom: var(--dt-space-0) !important; }
.pb-1 { padding-bottom: var(--dt-space-1) !important; }
.pb-2 { padding-bottom: var(--dt-space-2) !important; }
.pb-3 { padding-bottom: var(--dt-space-3) !important; }
.pb-4 { padding-bottom: var(--dt-space-4) !important; }
.pb-5 { padding-bottom: var(--dt-space-5) !important; }

.ps-0 { padding-left: var(--dt-space-0) !important; }
.ps-1 { padding-left: var(--dt-space-1) !important; }
.ps-2 { padding-left: var(--dt-space-2) !important; }
.ps-3 { padding-left: var(--dt-space-3) !important; }
.ps-4 { padding-left: var(--dt-space-4) !important; }
.ps-5 { padding-left: var(--dt-space-5) !important; }

.pe-0 { padding-right: var(--dt-space-0) !important; }
.pe-1 { padding-right: var(--dt-space-1) !important; }
.pe-2 { padding-right: var(--dt-space-2) !important; }
.pe-3 { padding-right: var(--dt-space-3) !important; }
.pe-4 { padding-right: var(--dt-space-4) !important; }
.pe-5 { padding-right: var(--dt-space-5) !important; }

.px-0 { padding-left: var(--dt-space-0) !important; padding-right: var(--dt-space-0) !important; }
.px-1 { padding-left: var(--dt-space-1) !important; padding-right: var(--dt-space-1) !important; }
.px-2 { padding-left: var(--dt-space-2) !important; padding-right: var(--dt-space-2) !important; }
.px-3 { padding-left: var(--dt-space-3) !important; padding-right: var(--dt-space-3) !important; }
.px-4 { padding-left: var(--dt-space-4) !important; padding-right: var(--dt-space-4) !important; }
.px-5 { padding-left: var(--dt-space-5) !important; padding-right: var(--dt-space-5) !important; }

.py-0 { padding-top: var(--dt-space-0) !important; padding-bottom: var(--dt-space-0) !important; }
.py-1 { padding-top: var(--dt-space-1) !important; padding-bottom: var(--dt-space-1) !important; }
.py-2 { padding-top: var(--dt-space-2) !important; padding-bottom: var(--dt-space-2) !important; }
.py-3 { padding-top: var(--dt-space-3) !important; padding-bottom: var(--dt-space-3) !important; }
.py-4 { padding-top: var(--dt-space-4) !important; padding-bottom: var(--dt-space-4) !important; }
.py-5 { padding-top: var(--dt-space-5) !important; padding-bottom: var(--dt-space-5) !important; }

.m-0 { margin: var(--dt-space-0) !important; }
.m-1 { margin: var(--dt-space-1) !important; }
.m-2 { margin: var(--dt-space-2) !important; }
.m-3 { margin: var(--dt-space-3) !important; }
.m-4 { margin: var(--dt-space-4) !important; }
.m-5 { margin: var(--dt-space-5) !important; }

.mt-0 { margin-top: var(--dt-space-0) !important; }
.mt-1 { margin-top: var(--dt-space-1) !important; }
.mt-2 { margin-top: var(--dt-space-2) !important; }
.mt-3 { margin-top: var(--dt-space-3) !important; }
.mt-4 { margin-top: var(--dt-space-4) !important; }
.mt-5 { margin-top: var(--dt-space-5) !important; }

.mb-0 { margin-bottom: var(--dt-space-0) !important; }
.mb-1 { margin-bottom: var(--dt-space-1) !important; }
.mb-2 { margin-bottom: var(--dt-space-2) !important; }
.mb-3 { margin-bottom: var(--dt-space-3) !important; }
.mb-4 { margin-bottom: var(--dt-space-4) !important; }
.mb-5 { margin-bottom: var(--dt-space-5) !important; }

.ms-0 { margin-left: var(--dt-space-0) !important; }
.ms-1 { margin-left: var(--dt-space-1) !important; }
.ms-2 { margin-left: var(--dt-space-2) !important; }
.ms-3 { margin-left: var(--dt-space-3) !important; }
.ms-4 { margin-left: var(--dt-space-4) !important; }
.ms-5 { margin-left: var(--dt-space-5) !important; }

.me-0 { margin-right: var(--dt-space-0) !important; }
.me-1 { margin-right: var(--dt-space-1) !important; }
.me-2 { margin-right: var(--dt-space-2) !important; }
.me-3 { margin-right: var(--dt-space-3) !important; }
.me-4 { margin-right: var(--dt-space-4) !important; }
.me-5 { margin-right: var(--dt-space-5) !important; }

.mx-0 { margin-left: var(--dt-space-0) !important; margin-right: var(--dt-space-0) !important; }
.mx-1 { margin-left: var(--dt-space-1) !important; margin-right: var(--dt-space-1) !important; }
.mx-2 { margin-left: var(--dt-space-2) !important; margin-right: var(--dt-space-2) !important; }
.mx-3 { margin-left: var(--dt-space-3) !important; margin-right: var(--dt-space-3) !important; }
.mx-4 { margin-left: var(--dt-space-4) !important; margin-right: var(--dt-space-4) !important; }
.mx-5 { margin-left: var(--dt-space-5) !important; margin-right: var(--dt-space-5) !important; }

.my-0 { margin-top: var(--dt-space-0) !important; margin-bottom: var(--dt-space-0) !important; }
.my-1 { margin-top: var(--dt-space-1) !important; margin-bottom: var(--dt-space-1) !important; }
.my-2 { margin-top: var(--dt-space-2) !important; margin-bottom: var(--dt-space-2) !important; }
.my-3 { margin-top: var(--dt-space-3) !important; margin-bottom: var(--dt-space-3) !important; }
.my-4 { margin-top: var(--dt-space-4) !important; margin-bottom: var(--dt-space-4) !important; }
.my-5 { margin-top: var(--dt-space-5) !important; margin-bottom: var(--dt-space-5) !important; }

/* Touch-target adjustments for mobile usability */
.btn,
.form-control,
.form-select,
.input-group-text,
textarea,
input[type="file"] {
  min-height: 44px;
}

.btn {
  padding-block: max(var(--dt-space-2), 0.625rem);
  letter-spacing: var(--dt-letter-spacing-body);
}

.form-control,
.form-select {
  padding-block: 0.625rem;
  letter-spacing: var(--dt-letter-spacing-body);
  line-height: var(--dt-line-height-body);
}

/* Background + text pair tuned for contrast on mobile */
@media (max-width: 576px) {
  body {
    background-color: var(--dt-surface-contrast);
    color: var(--dt-text-primary);
  }
}