html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #110;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Gradient pill button for primary actions */
.btn-gradient {
    background: linear-gradient(135deg, #0069d9 0%, #00a1ff 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 105, 217, 0.15);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.btn-gradient:hover,
.btn-gradient:focus {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 105, 217, 0.18);
}

/* Slightly larger spacing for the SVG icon placed inside buttons */
.btn .me-2 {
    vertical-align: middle;
}

/* Fixed-size preview for employee documents */
.fixed-img {
    width: 200px;
    height: 200px;
    object-fit: cover;        /* center-crop thumbnail */
    object-position: center;
    border-radius: 6px;
    cursor: pointer;
}

/* Lightbox full-size image responsiveness */
#lightboxImage {
    max-width: 100%;       /* never overflow modal width */
    max-height: 90vh;      /* use viewport height so image fits vertically */
    object-fit: contain;   /* preserve aspect ratio, letterbox if needed */
    margin: 0 auto;
    display: block;
}

/* Optional: make modal background darker on image view */
.modal-content.bg-transparent {
    background: rgba(0,0,0,0.95);
}

/* fixed preview frame — preserve entire image (no crop) */
.img-frame {
    width: 200px;
    height: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;                 /* hide any overflow */
    background: #f8f9fa;              /* neutral background for letterboxing */
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Ensure full image fits inside frame preserving aspect ratio */
.img-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;              /* important: DO NOT crop */
    object-position: center;
    display: block;
}