/* ============================================================
   YNP Assistant — Custom styles
   Bootstrap 5 handles 95% of the layout; this file handles
   the remaining pieces that Bootstrap doesn't cover.
   ============================================================ */

/* ---- Body -------------------------------------------------- */
body {
  background-color: #f8f9fb;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root {
  --ynp-mobile-bg: #f2efe8;
  --ynp-mobile-bg-2: #e7dfcf;
  --ynp-mobile-line: #d4c7b0;
  --ynp-mobile-ink-soft: #536166;
  --ynp-mobile-accent: #0f766e;
  --job-reading-ink: #1f2937;
  --job-reading-muted: #475569;
}

/* ---- Navbar ------------------------------------------------- */
.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* ---- Cards -------------------------------------------------- */
.card {
  border-radius: 0.6rem;
}

/* ---- Stats bar numbers ------------------------------------- */
.display-6 {
  font-size: 2rem;
}

/* ---- Job table --------------------------------------------- */
#jobTable tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.05);
  cursor: pointer;
}

#jobTable td {
  vertical-align: middle;
  padding: 0.6rem 0.75rem;
}

#jobTable {
  table-layout: fixed;
  min-width: 1180px;
}

#jobTable th[data-col-key="fit_score"],
#jobTable td[data-col-key="fit_score"] {
  width: 80px;
}

#jobTable th[data-col-key="title"],
#jobTable td[data-col-key="title"] {
  width: 260px;
}

#jobTable th[data-col-key="institution"],
#jobTable td[data-col-key="institution"] {
  width: 210px;
}

#jobTable th[data-col-key="salary"],
#jobTable td[data-col-key="salary"] {
  width: 130px;
}

#jobTable th[data-col-key="location"],
#jobTable td[data-col-key="location"] {
  width: 150px;
}

#jobTable th[data-col-key="posted_date"],
#jobTable td[data-col-key="posted_date"],
#jobTable th[data-col-key="apply_by"],
#jobTable td[data-col-key="apply_by"] {
  width: 110px;
}

#jobTable th[data-col-key="status"],
#jobTable td[data-col-key="status"] {
  width: 110px;
}

#jobTable th[data-col-key="actions"],
#jobTable td[data-col-key="actions"] {
  width: 120px;
}

#jobTable td[data-col-key="title"],
#jobTable td[data-col-key="institution"],
#jobTable td[data-col-key="location"] {
  white-space: normal;
  word-break: break-word;
}

#jobTable td[data-col-key="salary"] {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* ---- Fit score badge --------------------------------------- */
.badge.fs-6 {
  font-size: 0.95rem !important;
  min-width: 2.8rem;
}

/* ---- Job description (detail page) ------------------------ */
.job-description {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--job-reading-ink);
  max-width: 74ch;
  white-space: pre-wrap;       /* honour newlines from scraped text */
  word-break: break-word;
}

.job-detail-section {
  border: 1px solid #dbe3ee;
  border-left: 6px solid var(--section-accent, #64748b);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
}

.job-detail-section .card-title {
  color: var(--job-reading-muted);
  letter-spacing: 0.01em;
}

.job-detail-section.section-reason {
  --section-accent: #d97706;
  background: linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);
}

.job-detail-section.section-description {
  --section-accent: #0284c7;
  background: linear-gradient(180deg, #f8fcff 0%, #eef8ff 100%);
}

.job-detail-section.section-requirements {
  --section-accent: #059669;
  background: linear-gradient(180deg, #f7fefb 0%, #ecfcf4 100%);
}

.job-reading-guide {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}

.job-reading-guide .badge {
  font-size: 0.72rem;
}

.job-side-card {
  border: 1px solid #dbe3ee;
  border-left: 5px solid var(--side-accent, #64748b);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.job-side-card .card-title {
  color: #334155;
  font-weight: 600;
}

.job-side-card .small.text-muted {
  color: #526175 !important;
}

.job-side-card.side-status {
  --side-accent: #2563eb;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.job-side-card.side-drafts {
  --side-accent: #7c3aed;
  background: linear-gradient(180deg, #fbf9ff 0%, #f3efff 100%);
}

.job-side-card.side-ats {
  --side-accent: #0f766e;
  background: linear-gradient(180deg, #f7fffd 0%, #ebfbf7 100%);
}

.job-side-card.side-notes {
  --side-accent: #d97706;
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ea 100%);
}

.job-side-card.side-files {
  --side-accent: #0284c7;
  background: linear-gradient(180deg, #f8fcff 0%, #edf7ff 100%);
}

.job-side-card.side-meta {
  --side-accent: #64748b;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
}

.job-side-card .form-control,
.job-side-card .form-select {
  border-color: #cbd5e1;
  background-color: #ffffff;
}

.job-side-card .list-group-item {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.35);
}

/* ---- Link hover (table titles) ----------------------------- */
.link-hover:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* ---- Status badge in table --------------------------------- */
.badge {
  font-size: 0.78rem;
}

/* ---- AI draft pre-block ------------------------------------ */
pre {
  font-size: 0.8rem;
  background: #f1f5f9;
  border-radius: 0.4rem;
  padding: 0.75rem;
}

/* ---- Border-start accent (fit reason) ---------------------- */
.border-4 {
  border-width: 4px !important;
}

/* ---- Column resize handles -------------------------------- */
#jobTable thead th {
  position: relative;
  overflow: visible;
}

#jobTable thead th.col-draggable {
  cursor: grab;
}

#jobTable thead th.col-dragging {
  opacity: 0.5;
}

#jobTable thead th.col-drag-over {
  outline: 2px dashed #2563eb;
  outline-offset: -3px;
}

.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
  border-right: 2px solid transparent;
  transition: border-color 0.15s;
}

.col-resize-handle:hover,
.col-resize-handle.resizing {
  border-right-color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}

/* Prevent text selection while dragging */
body.col-resizing {
  user-select: none;
  cursor: col-resize;
}

/* ---- Responsive table tweak -------------------------------- */
/* Keep all columns visible; the table container already scrolls horizontally on small screens. */

/* ---- Mobile-first dashboard polish -------------------------- */
@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 5% 10%, rgba(29, 78, 216, 0.12), transparent 30%),
      radial-gradient(circle at 95% 95%, rgba(15, 118, 110, 0.1), transparent 35%),
      linear-gradient(150deg, var(--ynp-mobile-bg), var(--ynp-mobile-bg-2));
  }

  .container-fluid {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .card {
    border-radius: 0.8rem;
    border: 1px solid var(--ynp-mobile-line);
  }

  .display-6 {
    font-size: 1.4rem;
  }

  .job-description {
    font-size: 0.95rem;
    line-height: 1.72;
    max-width: 100%;
  }

  .btn,
  .form-select,
  .form-control,
  .dropdown-toggle {
    min-height: 42px;
  }

  .mobile-quick-controls {
    position: sticky;
    top: 0.45rem;
    z-index: 30;
    background: rgba(255, 253, 248, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--ynp-mobile-line);
    border-radius: 12px;
    padding: 0.5rem;
  }

  .mobile-chip-row {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-chip-row .btn {
    white-space: nowrap;
    border-radius: 999px;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
  }

  /* Make source and refresh pickers usable on phone widths. */
  #filterSourceDropdown + .dropdown-menu,
  #refreshDropdownMenu {
    width: min(96vw, 560px) !important;
    max-width: min(96vw, 560px) !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* ================================================================
   Home / feature tiles
   ================================================================ */
.home-tile {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 130px;
  cursor: pointer;
}
.home-tile:hover,
.home-tile:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.13) !important;
}
.home-tile:active {
  transform: translateY(-1px);
}

/* ================================================================
   Mobile nav & touch targets
   ================================================================ */
@media (max-width: 991.98px) {
  /* Larger tap targets for nav links */
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  /* Hamburger button — meet 44×44 px minimum tap target */
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }

  /* Inline dropdowns in collapsed nav */
  .navbar-nav .dropdown-menu {
    border: none;
    background: rgba(255, 255, 255, 0.08);
  }
  .navbar-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.6rem 1.5rem;
  }
  .navbar-nav .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }
}

/* ================================================================
   Small-screen main-content padding
   ================================================================ */
@media (max-width: 575.98px) {
  main.container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

@media (max-width: 767.98px) {
  #jobTable {
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0 0.65rem;
  }

  #jobTable thead {
    display: none;
  }

  #jobTable tbody,
  #jobTable tr,
  #jobTable td {
    display: block;
    width: 100%;
  }

  #jobTable tbody tr {
    border: 1px solid var(--ynp-mobile-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 0.55rem;
  }

  #jobTable td {
    padding: 0.5rem 0.7rem;
    border: 0;
    border-bottom: 1px solid rgba(212, 199, 176, 0.55);
    white-space: normal;
  }

  #jobTable td:last-child {
    border-bottom: 0;
  }

  #jobTable td[data-label]:not([data-col-key="title"]):not([data-col-key="actions"])::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ynp-mobile-ink-soft);
    text-transform: uppercase;
    margin-bottom: 0.18rem;
  }

  #jobTable td[data-col-key="title"] {
    padding-top: 0.68rem;
    font-size: 0.97rem;
  }

  #jobTable td[data-col-key="actions"] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-start;
    padding-bottom: 0.65rem;
  }

  #jobTable td[data-col-key="actions"] .btn {
    min-width: 42px;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
}