/* =============================================================
   utilities.css — Single-purpose utility classes
   Scope: layout helpers, dividers, spacing overrides,
          text helpers, visibility, transitions
   Variables: all --upf-* tokens from variables.css
   ============================================================= */

/* =============================================================
   DIVIDER
   Replaces the inline: style="width:100%;height:1px"
   Usage: <div class="upf-divider" />
          <div class="upf-divider upf-divider--muted" />
   ============================================================= */
.upf-divider {
    width: 100%;
    height: 1px;
    background-color: var(--mud-palette-primary);
    border: none;
    margin: 0;
    flex-shrink: 0;
}

.upf-divider--muted {
    background-color: var(--upf-color-border);
}

.upf-divider--error {
    background-color: var(--mud-palette-error);
}

.upf-divider--spacing {
    margin-top: var(--upf-space-3);
    margin-bottom: var(--upf-space-3);
}

/* =============================================================
   SURFACE & BACKGROUND
   ============================================================= */
.upf-surface {
    background-color: var(--upf-color-surface);
}

.upf-surface-muted {
    background-color: var(--upf-color-surface-muted);
}

/* =============================================================
   TEXT HELPERS
   ============================================================= */
.upf-text-primary {
    color: var(--upf-text-primary);
}

.upf-text-secondary {
    color: var(--upf-text-secondary);
}

.upf-text-muted {
    color: var(--upf-text-muted);
}

.upf-text-primary-color {
    color: var(--upf-primary);
}

.upf-text-danger {
    color: var(--mud-palette-error);
}

.upf-text-success {
    color: var(--mud-palette-success);
}

/* =============================================================
   SPACING — margin/padding shortcuts via tokens
   ============================================================= */
.upf-gap-1 { gap: var(--upf-space-1); }
.upf-gap-2 { gap: var(--upf-space-2); }
.upf-gap-3 { gap: var(--upf-space-3); }
.upf-gap-4 { gap: var(--upf-space-4); }
.upf-gap-5 { gap: var(--upf-space-5); }
.upf-gap-6 { gap: var(--upf-space-6); }

/* =============================================================
   BORDER HELPERS
   ============================================================= */
.upf-border {
    border: 1px solid var(--upf-color-border);
    border-radius: var(--upf-radius-md);
}

.upf-border-strong {
    border: 1px solid var(--upf-color-border-strong);
    border-radius: var(--upf-radius-md);
}

/* =============================================================
   RADIUS HELPERS
   ============================================================= */
.upf-rounded-sm { border-radius: var(--upf-radius-sm); }
.upf-rounded-md { border-radius: var(--upf-radius-md); }
.upf-rounded-lg { border-radius: var(--upf-radius-lg); }

/* =============================================================
   SHADOW HELPERS
   ============================================================= */
.upf-shadow-xs { box-shadow: var(--upf-shadow-xs); }
.upf-shadow-sm { box-shadow: var(--upf-shadow-sm); }
.upf-shadow-md { box-shadow: var(--upf-shadow-md); }

/* =============================================================
   OVERLAY / FIXED POSITION ACTIONS
   Replaces inline: position: fixed; z-index: 1030; top: 0; right: 30px
   Usage: <div class="upf-fixed-actions"> ... </div>
   ============================================================= */
.upf-fixed-actions {
    position: fixed;
    top: 0;
    right: 30px;
    margin-top: 50px;
    width: 130px;
    z-index: 1030;
}

.upf-fixed-actions--bottom {
    position: fixed;
    bottom: 0;
    right: 5px;
    margin-bottom: 50px;
    width: 100px;
    z-index: 1030;
}

/* =============================================================
   SCROLL HELPERS
   ============================================================= */
.upf-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
}

.upf-scroll-y::-webkit-scrollbar {
    width: 5px;
}

.upf-scroll-y::-webkit-scrollbar-track {
    background: transparent;
}

.upf-scroll-y::-webkit-scrollbar-thumb {
    background-color: var(--upf-color-border-strong);
    border-radius: 4px;
}

/* =============================================================
   SIGNATURE / DOCUMENT IMAGE BOX
   Replaces inline: height:35mm;width:60mm; border:1px solid #d3d3d3
   Usage: <img class="upf-signature-box" ... />
   ============================================================= */
.upf-signature-box {
    height: 35mm;
    width: 60mm;
    border: 1px solid var(--upf-color-border-strong);
    object-fit: none;
}

/* =============================================================
   FIXED WIDTHS — replaces recurring inline style="width:Xpx"
   Usage: <div class="upf-w-400"> ... </div>
   ============================================================= */
.upf-w-150 { width: 150px; }
.upf-w-200 { width: 200px; }
.upf-w-250 { width: 250px; }
.upf-w-350 { width: 350px; }
.upf-w-400 { width: 400px; }
.upf-w-700 { width: 700px; }