/* ============================================================
   DigiLoric Apps Suite — Frontend Styles
   ============================================================ */

:root {
  --dl-primary:    #2563eb;
  --dl-primary-dk: #1d4ed8;
  --dl-success:    #16a34a;
  --dl-warning:    #d97706;
  --dl-danger:     #dc2626;
  --dl-surface:    #ffffff;
  --dl-bg:         #f8fafc;
  --dl-border:     #e2e8f0;
  --dl-text:       #0f172a;
  --dl-muted:      #64748b;
  --dl-radius:     10px;
  --dl-shadow:     0 4px 12px rgba(0,0,0,.07);
  --dl-transition: .2s ease;
}

/* ── Apps Hub ──────────────────────────────────────────────── */
.dl-apps-hub {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.dl-hub-header {
  text-align: center;
  padding: 48px 0 36px;
}
.dl-hub-header h1 {
  font-size: 34px;
  font-weight: 700;
  color: var(--dl-text);
  margin: 0 0 8px;
}
.dl-hub-header p {
  color: var(--dl-muted);
  font-size: 16px;
  margin: 0;
}
.dl-hub-grid {
  display: grid;
  gap: 16px;
}
.dl-hub-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--dl-surface);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 24px;
  text-decoration: none;
  color: var(--dl-text);
  box-shadow: var(--dl-shadow);
  transition: transform var(--dl-transition), box-shadow var(--dl-transition), border-color var(--dl-transition);
}
.dl-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: var(--dl-primary);
  color: var(--dl-text);
}
.dl-hub-icon { font-size: 36px; flex-shrink: 0; }
.dl-hub-info { flex: 1; }
.dl-hub-info h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.dl-hub-info p  { margin: 0; color: var(--dl-muted); font-size: 14px; }
.dl-hub-arrow   { font-size: 20px; color: var(--dl-primary); flex-shrink: 0; }

/* ── Resume App ────────────────────────────────────────────── */
.dl-resume-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 80px;
  color: var(--dl-text);
}

/* ── Stepper ───────────────────────────────────────────────── */
.dl-stepper {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 24px 0 20px;
  scrollbar-width: none;
}
.dl-stepper::-webkit-scrollbar { display: none; }
.dl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 60px;
  cursor: default;
  opacity: .4;
  transition: opacity var(--dl-transition);
}
.dl-step.dl-step-active,
.dl-step.dl-step-done { opacity: 1; }
.dl-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--dl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--dl-surface);
  color: var(--dl-muted);
  transition: background var(--dl-transition), border-color var(--dl-transition), color var(--dl-transition);
}
.dl-step.dl-step-active .dl-step-num {
  background: var(--dl-primary);
  border-color: var(--dl-primary);
  color: #fff;
}
.dl-step.dl-step-done .dl-step-num {
  background: var(--dl-success);
  border-color: var(--dl-success);
  color: #fff;
}
.dl-step-label {
  font-size: 11px;
  text-align: center;
  color: var(--dl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}
.dl-step.dl-step-active .dl-step-label { color: var(--dl-primary); font-weight: 600; }

/* ── Flash ─────────────────────────────────────────────────── */
.dl-flash {
  padding: 12px 16px;
  border-radius: var(--dl-radius);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.dl-flash.dl-flash-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.dl-flash.dl-flash-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.dl-flash.dl-flash-info    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ── Form Body ─────────────────────────────────────────────── */
.dl-form-body {
  background: var(--dl-surface);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 32px;
  box-shadow: var(--dl-shadow);
  min-height: 400px;
}
.dl-form-body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--dl-text);
}
.dl-hint {
  color: var(--dl-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

/* ── Field Groups ──────────────────────────────────────────── */
.dl-field-group {
  margin-bottom: 18px;
}
.dl-field-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dl-text);
}
.dl-req { color: var(--dl-danger); }
.dl-field-group input[type="text"],
.dl-field-group input[type="email"],
.dl-field-group input[type="tel"],
.dl-field-group input[type="url"],
.dl-field-group textarea,
.dl-field-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--dl-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--dl-text);
  background: var(--dl-surface);
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
  outline: none;
  box-sizing: border-box;
}
.dl-field-group input:focus,
.dl-field-group textarea:focus,
.dl-field-group select:focus {
  border-color: var(--dl-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.dl-field-group textarea { resize: vertical; }
.dl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .dl-field-row { grid-template-columns: 1fr; } }

/* ── Skills Tags ───────────────────────────────────────────── */
.dl-skill-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.dl-skill-input-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--dl-border);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--dl-transition);
}
.dl-skill-input-row input:focus { border-color: var(--dl-primary); }
.dl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: var(--dl-primary);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
}
.dl-tag-remove {
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  opacity: .6;
}
.dl-tag-remove:hover { opacity: 1; }

/* ── Dynamic Entries (Experience, Education, etc.) ─────────── */
.dl-entry {
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--dl-bg);
  position: relative;
}
.dl-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.dl-entry-title { font-weight: 600; font-size: 15px; }
.dl-entry-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dl-danger);
  font-size: 18px;
  padding: 0;
}
.dl-entry .dl-field-group { margin-bottom: 12px; }
.dl-entry .dl-field-group input,
.dl-entry .dl-field-group textarea,
.dl-entry .dl-field-group select {
  background: var(--dl-surface);
}
.dl-bullet-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.dl-bullet-row input { flex: 1; }
.dl-bullet-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dl-danger);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 4px;
}
.dl-add-bullet {
  font-size: 13px;
  color: var(--dl-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

/* ── Buttons ───────────────────────────────────────────────── */
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--dl-transition), color var(--dl-transition), border-color var(--dl-transition);
  text-decoration: none;
}
.dl-btn:disabled { opacity: .55; cursor: not-allowed; }
.dl-btn-primary {
  background: var(--dl-primary);
  color: #fff;
  border-color: var(--dl-primary);
}
.dl-btn-primary:hover:not(:disabled) { background: var(--dl-primary-dk); border-color: var(--dl-primary-dk); }
.dl-btn-secondary {
  background: #f0f9ff;
  color: var(--dl-primary);
  border-color: #bae6fd;
}
.dl-btn-secondary:hover:not(:disabled) { background: #e0f2fe; }
.dl-btn-outline {
  background: transparent;
  color: var(--dl-text);
  border-color: var(--dl-border);
}
.dl-btn-outline:hover:not(:disabled) { background: var(--dl-bg); }
.dl-btn-ai {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  border: none;
}
.dl-btn-ai:hover:not(:disabled) { opacity: .9; }

/* ── Navigation ────────────────────────────────────────────── */
.dl-form-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ── AI Result Boxes ───────────────────────────────────────── */
.dl-ai-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.dl-ai-action-card {
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 20px;
  background: var(--dl-bg);
}
.dl-ai-action-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.dl-ai-action-card p  { margin: 0 0 14px; font-size: 13px; color: var(--dl-muted); }
.dl-ai-result {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ATS Score Circle */
.dl-ats-score-card { grid-column: 1 / -1; }
.dl-ats-display {
  margin-top: 16px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dl-score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--dl-primary) 0%, #e5e7eb 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--dl-primary);
  flex-shrink: 0;
}
.dl-score-notes,
.dl-score-keywords {
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  min-width: 200px;
}
.dl-score-keywords { color: var(--dl-muted); }

/* ── Preview ───────────────────────────────────────────────── */
.dl-preview-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.dl-resume-preview {
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 40px;
  background: #fff;
  box-shadow: var(--dl-shadow);
  min-height: 600px;
  font-size: 11pt;
  line-height: 1.5;
}
.dl-resume-preview h1 { font-size: 22pt; font-weight: 700; margin: 0 0 4px; }
.dl-resume-preview .contact-line { font-size: 10pt; color: #555; margin-bottom: 20px; }
.dl-resume-preview .contact-line span { margin-right: 12px; }
.dl-resume-preview h2.section-title {
  font-size: 11pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1.5px solid #111;
  padding-bottom: 3px;
  margin: 18px 0 10px;
}
.dl-resume-preview .experience-entry { margin-bottom: 12px; }
.dl-resume-preview .exp-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dl-resume-preview .exp-title  { font-weight: 700; }
.dl-resume-preview .exp-company { font-style: italic; }
.dl-resume-preview .exp-dates  { font-size: 10pt; color: #666; }
.dl-resume-preview ul  { padding-left: 18px; margin: 4px 0; }
.dl-resume-preview li  { margin-bottom: 3px; font-size: 10.5pt; }
.dl-resume-preview .skills-list { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dl-resume-preview .skills-list span { font-size: 10.5pt; }
.dl-preview-placeholder { color: var(--dl-muted); text-align: center; padding-top: 80px; }