/* frontend/assets/css/timestamp.css */

/* 1. Variables */
:root {
  --color-primary: #8B0000;
  --color-primary-hover: #a00000;
  --color-success-bg: #e6f9e9;
  --color-success-text: #006400;
  --color-error-bg: #fdecea;
  --color-error-text: #a70000;
  --color-border: #cccccc;
  --color-hover-bg: rgba(230,249,233,0.4);
  --color-new-btn: #006400;
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:16px; --spacing-lg:24px;
  --radius-sm:4px; --radius-md:8px;
}

/* 2. Login Card */
#vft-app .login-card { max-width:360px; margin:80px auto; padding:var(--spacing-lg);
  background:#fff; border-radius:var(--radius-md); box-shadow:0 2px 8px rgba(0,0,0,0.1);
  text-align:center;
}
#vft-app .login-card h2 { margin-bottom:var(--spacing-md); }
#vft-app .login-card input { width:100%; padding:var(--spacing-sm);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
}
#vft-app .login-card .btn-primary { width:100%; margin-top:var(--spacing-md); }

/* 3. Header */
.dashboard-header { max-width:480px; margin:var(--spacing-lg) auto var(--spacing-sm);
  display:flex; justify-content:space-between; align-items:center;
}
.quota-info { color:#333; font-size:.9rem; }
.header-actions { display:flex; gap:var(--spacing-sm); }
.btn-add-coverletter { background:#555; color:#fff; padding:var(--spacing-xs) var(--spacing-md);
  border:none; border-radius:var(--radius-sm); cursor:pointer;
}
.btn-logout { background:transparent; border:1px solid var(--color-border);
  color:#333; padding:var(--spacing-xs) var(--spacing-md); border-radius:var(--radius-sm);
  cursor:pointer;
}

/* 4. Drop Zone */
.drop-zone { position:relative; max-width:480px; margin:0 auto var(--spacing-md);
  padding:var(--spacing-lg); border:2px dashed var(--color-border);
  border-radius:var(--radius-md); text-align:center; color:#777;
  transition:background-color .2s ease;
}
.drop-zone.drag-over { background-color:var(--color-hover-bg); }
.drop-zone .file-name { display:block; margin-top:var(--spacing-sm); color:#333; }
.btn-browse { position:absolute; top:var(--spacing-sm); left:var(--spacing-sm);
  background:transparent; border:1px solid var(--color-border);
  color:#777; padding:var(--spacing-xs) var(--spacing-sm);
  font-size:.8rem; border-radius:var(--radius-sm); cursor:pointer;
}

/* Cover-letter */
.cover-drop { position:relative; max-width:480px; margin:0 auto var(--spacing-md); }
.cover-drop .btn-delete { position:absolute; top:var(--spacing-sm); right:var(--spacing-sm);
  background:#777; color:#fff; border:none; padding:var(--spacing-xs) var(--spacing-sm);
  border-radius:var(--radius-sm); cursor:pointer;
}

/* 5. Action Container */
.action-container { display:flex; gap:var(--spacing-sm);
  max-width:480px; margin:0 auto var(--spacing-sm);
}
.input-expiration { flex:1; padding:var(--spacing-sm);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
}
.helper-text { max-width:480px; margin:var(--spacing-xs) auto 0;
  font-size:.8rem; color:#555; text-align:left;
}

/* 6. Buttons */
.btn-primary { background-color:var(--color-primary); color:#fff;
  padding:var(--spacing-sm) var(--spacing-lg); border:none;
  border-radius:var(--radius-md); cursor:pointer;
  transition:background-color .2s ease;
}
.btn-primary:hover { background-color:var(--color-primary-hover); }

/* 7. New Timestamp */
.btn-secondary { background:transparent; border:2px solid var(--color-new-btn);
  color:var(--color-new-btn); padding:var(--spacing-sm) var(--spacing-lg);
  border-radius:var(--radius-sm); font-size:1rem;
  cursor:pointer; margin-top:var(--spacing-md);
}
.btn-secondary:hover { background-color:rgba(0,100,0,0.1); }

/* 8. Result Panel */
.result-panel { max-width:480px; margin:var(--spacing-lg) auto;
  padding:var(--spacing-lg); border-radius:var(--radius-md);
  opacity:0; transform:translateY(-10px);
  animation:fadeSlideIn .3s forwards;
}
.result-panel.success { background:var(--color-success-bg);
  border-left:4px solid var(--color-success-text);
}
.result-panel.error { background:var(--color-error-bg);
  border-left:4px solid var(--color-error-text);
}
.result-panel p { margin:var(--spacing-md) 0; }
.result-panel p strong { font-weight:bold; }

/* 9. History Section */
.history-section { max-width:480px; margin:var(--spacing-lg) auto;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:0 2px 6px rgba(0,0,0,0.05); padding:var(--spacing-md);
}
.history-section h3 { margin:0 0 var(--spacing-sm); font-size:1.1rem;
  color:var(--color-primary);
}
.history-table { width:100%; border-collapse:collapse; }
.history-table th,
.history-table td { text-align:left; padding:var(--spacing-sm) var(--spacing-xs);
  border-bottom:1px solid var(--color-border); font-size:.9rem;
}
.history-table th { font-weight:bold; color:#555; }

/* 10. Animation */
@keyframes fadeSlideIn { to { opacity:1; transform:translateY(0); } }