/* =============================================================================
   CVPilot — Split-Pane Dark UI
   ============================================================================= */

:root {
  --color-bg-primary:    #0A0A0A;
  --color-bg-secondary:  #111111;
  --color-bg-elevated:   #1A1A1A;
  --color-border-subtle: rgba(255,255,255,0.06);
  --color-border-medium: rgba(255,255,255,0.12);
  --gradient-primary:    linear-gradient(135deg,#8B5CF6 0%,#3B82F6 100%);
  --gradient-success:    linear-gradient(135deg,#10B981 0%,#059669 100%);
  --color-success:  #10B981;
  --color-warning:  #F97316;
  --color-danger:   #FF2A2A;
  --color-info:     #3B82F6;
  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary:  #9CA3AF;
  --color-text-muted:     #6B7280;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --sidebar-w: 250px;
}

/* =============================================================================
   Base
   ============================================================================= */
*{margin:0;padding:0;box-sizing:border-box;}

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.6;
  color:var(--color-text-secondary);
  background:var(--color-bg-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before {
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(circle at 15% 50%,rgba(139,92,246,0.05) 0%,transparent 45%),
    radial-gradient(circle at 85% 30%,rgba(59,130,246,0.03) 0%,transparent 45%);
  z-index:-1;pointer-events:none;
}

/* =============================================================================
   App Shell — Split Pane
   ============================================================================= */
.app-shell {
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:100vh;
  overflow:hidden;
}

/* =============================================================================
   Sidebar
   ============================================================================= */
.sidebar {
  background:var(--color-bg-secondary);
  border-right:1px solid var(--color-border-subtle);
  display:flex;
  flex-direction:column;
  gap:0;
  overflow-y:auto;
  position:relative;
  height:100vh;
  padding:12px var(--space-md);
  scrollbar-width:none; /* Firefox */
}
.sidebar::-webkit-scrollbar {
  display:none; /* Chrome/Safari/Webkit */
}

.sidebar-brand {
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;
  color:var(--color-text-primary);
  letter-spacing:-0.02em;
  margin-bottom:12px;
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--color-border-subtle);
}
.sidebar-brand img {
  width:32px;height:32px;border-radius:var(--radius-sm);
  transition:transform var(--transition-base);
}
.sidebar-brand img:hover{transform:scale(1.08) rotate(3deg);}
.brand-ai {
  font-size:10px;font-weight:700;letter-spacing:0.08em;
  background:var(--gradient-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-left:-4px;margin-top:2px;
}

.sb-section {
  margin-bottom:12px;
}
.sb-label {
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--color-text-muted);
  margin-bottom:var(--space-sm);
}

.sb-tip {
  margin-top:auto;padding-top:var(--space-sm);
  border-top:1px solid var(--color-border-subtle);
  display:flex;align-items:flex-start;gap:var(--space-sm);
  font-size:11px;color:var(--color-text-muted);line-height:1.5;
}

/* =============================================================================
   Main Pane
   ============================================================================= */
.main-pane {
  display:flex;flex-direction:column;
  padding:var(--space-lg);
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
}

/* =============================================================================
   Tab Bar
   ============================================================================= */
.tab-bar {
  display:flex;gap:4px;
  margin-bottom:var(--space-lg);
  border-bottom:1px solid var(--color-border-subtle);
  padding-bottom:0;
}
.tab-btn {
  display:flex;align-items:center;gap:6px;
  padding:10px 18px;
  font-size:13px;font-weight:600;
  color:var(--color-text-muted);
  background:transparent;border:none;cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all var(--transition-fast);
}
.tab-btn i {
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  font-size:14px;
}
.tab-btn:hover{color:var(--color-text-primary);}
.tab-btn.active{
  color:var(--color-text-primary);
  border-bottom-color:#8B5CF6;
}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* =============================================================================
   Dropzone
   ============================================================================= */
.dropzone {
  border:2px dashed var(--color-border-medium);
  border-radius:var(--radius-md);
  padding:10px 8px;
  text-align:center;cursor:pointer;
  background:rgba(255,255,255,0.02);
  transition:all var(--transition-fast);
  position:relative;
}
.dropzone:hover,.dropzone.drag-over {
  border-color:#8B5CF6;background:rgba(139,92,246,0.06);
}
.dropzone.has-file{
  border-style:solid;border-color:var(--color-success);
  background:rgba(16,185,129,0.06);
  padding:12px 8px;
}
.dz-icon{
  font-size:24px;
  background:var(--gradient-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:4px;
}
.dropzone.has-file .dz-icon{
  background:var(--gradient-success);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.dz-title{font-weight:600;font-size:12.5px;color:var(--color-text-primary);margin-bottom:2px;}
.dz-hint{font-size:10.5px;color:var(--color-text-muted);}
#cv{display:none;}

/* =============================================================================
   Source Chips
   ============================================================================= */
.source-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs);
}
.source-chip{display:none;}
.source-label{
  display:flex;align-items:center;gap:4px;
  padding:4px 6px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
  font-size:11px;font-weight:500;
  color:var(--color-text-tertiary);
}
.source-label:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--color-border-medium);
  color:var(--color-text-primary);
}
.source-chip:checked + .source-label{
  background:rgba(139,92,246,0.12);
  border-color:#8B5CF6;color:#A78BFA;
}
.src-icon{width:14px;height:14px;border-radius:2px;object-fit:contain;}

.chip-controls{display:flex;gap:6px;align-items:center;}
.chip-btn{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--color-text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--color-border-subtle);
  padding:3px 8px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all var(--transition-fast);
  display:inline-flex;align-items:center;gap:4px;
}
.chip-btn:hover{
  background:rgba(255,255,255,0.08);
  border-color:var(--color-border-medium);
  color:var(--color-text-primary);
}

/* =============================================================================
   Action Buttons
   ============================================================================= */
.action-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  width:100%;padding:12px 16px;
  font-size:13px;font-weight:700;
  border-radius:var(--radius-md);border:none;cursor:pointer;
  transition:all var(--transition-fast);
}
.action-btn:hover{transform:translateY(-1px);}
.action-btn:active{transform:scale(0.98);}
.action-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;}

.btn-run{
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.3);
  color:var(--color-success);
}
.btn-run:hover{background:rgba(16,185,129,0.2);border-color:rgba(16,185,129,0.5);color:#34D399;}

.btn-insights{
  background:rgba(139,92,246,0.12);
  border:1px solid rgba(139,92,246,0.3);
  color:#A78BFA;
}
.btn-insights:hover{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.5);color:#C4B5FD;}

/* =============================================================================
   Pipeline Log — In-Pane Progress Widget
   ============================================================================= */

/* Full-pane wrapper — centered, appears in place of the results */
.pipeline-log-pane {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-xl) var(--space-lg);
  min-height:340px;
  animation:fadeInUp 0.3s ease-out;
}

/* Spinner + "Running Pipeline…" header */
.plp-header {
  display:flex;align-items:center;gap:14px;
  margin-bottom:var(--space-xl);
}
.plp-header span {
  font-size:16px;font-weight:700;
  color:var(--color-text-primary);
  letter-spacing:-0.01em;
}
.plp-spinner {
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(transparent 10%,#8B5CF6,transparent 90%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  animation:spin 0.8s linear infinite;
}

/* Stage list */
.log-stages{
  display:flex;flex-direction:column;gap:4px;
  width:100%;max-width:480px;
}

.log-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:var(--radius-md);
  transition:background var(--transition-fast);
}
.log-row[data-state="running"]{background:rgba(139,92,246,0.10);}
.log-row[data-state="done"]{opacity:0.65;}

.log-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border-medium);
  transition:all var(--transition-base);
}
.log-row[data-state="running"] .log-dot{
  background:#8B5CF6;border-color:#8B5CF6;
  box-shadow:0 0 8px rgba(139,92,246,0.7);
  animation:pulse-dot 1.2s ease-in-out infinite;
}
.log-row[data-state="done"] .log-dot{
  background:var(--color-success);border-color:var(--color-success);
  box-shadow:none;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 6px rgba(139,92,246,0.6);}
  50%{box-shadow:0 0 16px rgba(139,92,246,1);}
}

.log-icon{font-size:14px;color:var(--color-text-muted);flex-shrink:0;width:16px;text-align:center;}
.log-row[data-state="running"] .log-icon{color:#A78BFA;}
.log-row[data-state="done"] .log-icon{color:var(--color-success);}

.log-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.log-label{font-size:13px;font-weight:600;color:var(--color-text-secondary);}
.log-row[data-state="running"] .log-label{color:var(--color-text-primary);}
.log-detail{
  font-size:11px;color:var(--color-text-muted);
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Inline spinner for summary button */
.spinner-sm{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(transparent 10%,#8B5CF6,transparent 90%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}


/* =============================================================================
   Empty State
   ============================================================================= */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:48px var(--space-lg) var(--space-lg);
  text-align:center;gap:var(--space-sm);
  min-height:280px;
}
.empty-icon{
  font-size:48px;margin-bottom:var(--space-sm);
  background:var(--gradient-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.empty-state h3{font-size:18px;font-weight:700;color:var(--color-text-primary);}
.empty-state p{font-size:13px;color:var(--color-text-muted);max-width:360px;line-height:1.6;}

/* =============================================================================
   Skeleton Loading
   ============================================================================= */
.skeleton{
  background:linear-gradient(
    90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 75%
  );
  background-size:200% 100%;
  animation:skeleton-loading 1.5s infinite;
  border-radius:var(--radius-md);
}
@keyframes skeleton-loading{
  0%{background-position:200% 0;}100%{background-position:-200% 0;}
}

/* =============================================================================
   Error & Alert
   ============================================================================= */
#error-box{margin-bottom:var(--space-sm);}
.alert{
  border-radius:var(--radius-md);padding:12px 16px;font-size:13px;
  border:1px solid;display:flex;align-items:center;gap:var(--space-sm);
}
.alert-danger{background:rgba(255,42,42,0.12);border-color:rgba(255,42,42,0.3);color:#FF8080;}
.alert-warning{background:rgba(249,115,22,0.12);border-color:rgba(249,115,22,0.3);color:#FDBA74;}

/* =============================================================================
   Results Table
   ============================================================================= */
.results-container{animation:fadeInUp 0.4s ease-out;}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

table.dataTable{border-collapse:separate!important;border-spacing:0 3px!important;margin-top:0!important;width:100%!important;}
table.dataTable thead th{
  border-bottom:1px solid var(--color-border-subtle)!important;
  color:var(--color-text-muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  padding:10px 14px!important;background:transparent;
}
table.dataTable tbody tr{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border-subtle);
  transition:all var(--transition-fast);
}
table.dataTable tbody tr:hover{
  background:var(--color-bg-elevated);
  border-color:var(--color-border-medium);
}
table.dataTable tbody td{padding:6px 10px!important;vertical-align:middle;border:none!important;}
table.dataTable tbody td:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}
table.dataTable tbody td:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}

/* Score Circle */
.score-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;font-family:'JetBrains Mono',monospace;
  margin:0 auto;backdrop-filter:blur(4px);
}
.score-circle.score-high{
  background:rgba(16,185,129,0.12)!important;
  border:1px solid rgba(16,185,129,0.4)!important;
  color:#34D399!important;box-shadow:0 0 10px rgba(16,185,129,0.2);
}
.score-circle.score-med{
  background:rgba(249,115,22,0.12)!important;
  border:1px solid rgba(249,115,22,0.4)!important;
  color:#F97316!important;box-shadow:0 0 10px rgba(249,115,22,0.2);
}
.score-circle.score-low{
  background:rgba(255,42,42,0.12)!important;
  border:1px solid rgba(255,42,42,0.4)!important;
  color:#FF4D4D!important;box-shadow:0 0 10px rgba(255,42,42,0.2);
}


/* DataTables Controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border-subtle);
  color:var(--color-text-primary);
  border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;
  transition:all var(--transition-fast);
}
.dataTables_wrapper .dataTables_filter input{width:240px;margin-left:8px;}
.dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:#8B5CF6;box-shadow:0 0 0 2px rgba(139,92,246,0.1);}
.dataTables_wrapper .dataTables_info{font-size:11px;color:var(--color-text-muted)!important;margin-top:12px;}
.dataTables_wrapper .dataTables_paginate{margin-top:12px;}
.pagination{--bs-pagination-bg:transparent;--bs-pagination-border-color:var(--color-border-subtle);--bs-pagination-color:var(--color-text-tertiary);}
.page-link{border-radius:var(--radius-sm)!important;margin:0 2px;transition:all var(--transition-fast);}
.page-link:hover{background:rgba(255,255,255,0.05);border-color:var(--color-border-medium);color:var(--color-text-primary);}
.page-item.active .page-link{background:var(--gradient-primary)!important;border-color:transparent!important;color:#fff!important;font-weight:700;box-shadow:0 4px 12px rgba(139,92,246,0.4);}

/* =============================================================================
   Job Action Buttons
   ============================================================================= */
.apply-btn,.aicv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:11px;font-weight:600;height:26px;padding:0 10px;
  border-radius:var(--radius-sm);white-space:nowrap;
  transition:all var(--transition-fast);line-height:1;margin:0;
}
.apply-btn{color:#60A5FA;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.3);text-decoration:none;}
.apply-btn:hover{background:rgba(59,130,246,0.2);border-color:rgba(59,130,246,0.5);color:#93C5FD;transform:translateY(-1px);}
.aicv-btn{color:var(--color-success);background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);cursor:pointer;}
.aicv-btn:hover{background:rgba(16,185,129,0.2);border-color:rgba(16,185,129,0.5);color:#34D399;transform:translateY(-1px);}
.aicv-btn:disabled{opacity:0.5;cursor:wait;transform:none;}

/* Keep the four compact result-row actions visually uniform. */
.job-actions > .heart-btn,
.job-actions > .apply-btn,
.job-actions > .mock-interview-btn,
.job-actions > .aicv-btn {
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  box-sizing:border-box;
}

/* =============================================================================
   CV Summary Card
   ============================================================================= */
.sum-card{animation:fadeInUp 0.4s ease-out;}
.insight-section{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);padding:var(--space-lg);
}
.insight-header{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:#A78BFA;margin-bottom:var(--space-md);
  display:flex;align-items:center;gap:6px;
}
.insight-header i{font-size:14px;}
.badge{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:var(--radius-sm);
  font-size:11px;font-weight:600;border:1px solid;
  transition:all var(--transition-fast);
}

/* =============================================================================
   Scrollbar
   ============================================================================= */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--color-bg-primary);}
::-webkit-scrollbar-thumb{background:var(--color-bg-elevated);border-radius:var(--radius-sm);border:2px solid var(--color-bg-primary);}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15);}

/* =============================================================================
   Focus & Accessibility
   ============================================================================= */
*:focus-visible{outline:2px solid #8B5CF6;outline-offset:2px;}
button:focus-visible,a:focus-visible{outline-offset:4px;}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width:1100px){
  :root{--sidebar-w:230px;}
}
@media (max-width:768px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{
    position:relative;height:auto;
    border-right:none;border-bottom:1px solid var(--color-border-subtle);
  }
  .source-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
  .main-pane{padding:var(--space-md);}
}

/* =============================================================================
   U2 — Mobile Sidebar Collapse (<900px)
   ============================================================================= */
/* Hamburger button — hidden on desktop */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1100;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-tertiary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 150ms ease;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.12); color: var(--color-text-primary); }

@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }

  /* Override the 768px breakpoint's stacked layout — go back to grid */
  .app-shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  /* Sidebar slides off-screen to the left by default */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.4,0,0.2,1);
    border-right: 1px solid var(--color-border-subtle);
    border-bottom: none;
    height: 100vh;
  }

  /* When .sidebar-open on app-shell, slide sidebar in */
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.6);
  }

  /* Backdrop overlay */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
  }
  .app-shell.sidebar-open .sidebar-backdrop {
    display: block;
  }

  /* Push main-pane top so hamburger doesn't overlap content */
  .main-pane { padding-top: 56px; }
}


/* =============================================================================
   Slide-up utility (used on results-container)
   ============================================================================= */
.slide-up{animation:fadeInUp 0.3s ease-out;}