/**
 * ==========================================================================
 * UPLOAD & FILE COMPONENTS
 * ==========================================================================
 * 
 * File upload UI components, including:
 * - Logo/avatar upload areas
 * - File input styling  
 * - Upload hints and status
 * - Signature upload components
 * 
 * Related styles:
 * - cards.css: .v-card-upload for drag-and-drop upload cards
 * - settings.css: Settings page upload areas
 * - employee-detail.css: Employee photo uploads
 * 
 * @package Verimus
 * @since 2.0.0
 * Created during 2026-02-05 CSS reorganization.
 * ==========================================================================
 */

/* ==========================================================================
   UPLOAD LOGO/AVATAR COMPONENTS
   ========================================================================== */

.upload-logo-label {
  padding: var(--spacing-2-5);
}

form .upload-logo-label {
  width: 140px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
}

form .upload-logo-label img {
  max-width: 100%;
  max-height: unset;
}

form .upload-logo-label .info {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--spacing-5);
  margin-top: var(--spacing-1);
  display: block;
}

.upload-logo-label-personal img,
.upload-logo-label.user-photo img {
  max-width: 120px;
  max-height: 120px;
  width: 100%;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   UPLOAD DOCUMENT LABEL (shared across employee docs, training cert, etc.)
   ========================================================================== */

.upload-document-label {
  background-color: var(--gray-100, #F5F5F5);
  border: 2px dashed var(--border-color, #E5E5E5);
  border-radius: var(--radius-input, 8px);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: block;
}

.upload-document-label:hover,
.upload-document-label.dragover {
  background-color: var(--gray-200, #E5E5E5);
  border-color: var(--color-primary, #FF8030);
}

.dark-mode .upload-document-label {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

.dark-mode .upload-document-label:hover {
  background-color: var(--dark-bg-secondary);
}

/* ==========================================================================
   DOCUMENT FILE COMPONENTS
   ========================================================================== */

.document-file-wrap {
  margin-bottom: var(--spacing-5);
}

.send-document-bottom {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding-top: var(--spacing-8);
}

.send-document-bottom #send-document-btn {
  margin: 0;
}

.send-document-bottom #download-word-button {
  margin-left: 0 !important;
  padding: var(--btn-padding-y-lg) var(--btn-padding-x);
}

/* ==========================================================================
   UPLOAD HINTS & STATUS
   ========================================================================== */

.upload-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0;
  margin-top: var(--spacing-2);
}

/* ==========================================================================
   SIGNATURE UPLOAD COMPONENTS
   ========================================================================== */

.signature-upload-container {
  display: none;
}

.signature-upload-preview {
  display: none;
}

.signature-upload-input {
  display: none;
}

/* ==========================================================================
   FILE INPUT UTILITIES
   ========================================================================== */

.file-input-hidden {
  display: none;
}