/* Jobspreader UI Kit styles — built on top of /colors_and_type.css */

/* Layout shell ---------------------------------------------------------- */
.js-app {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  grid-template-rows: 64px 1fr;
  height: 100vh;
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-sans);
}
.js-sidebar { grid-row: 1 / span 2; grid-column: 1; background: #fff; border-right: 1px solid var(--border-2); }
.js-topbar  { grid-row: 1; grid-column: 2 / span 2; background: #fff; border-bottom: 1px solid var(--border-2);
              display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.js-main    { grid-row: 2; grid-column: 2; overflow: auto; padding: 24px 32px 40px; }
.js-ai      { grid-row: 2; grid-column: 3; width: 360px; background: #fff; border-left: 1px solid var(--border-2);
              display: flex; flex-direction: column; }

/* Sidebar --------------------------------------------------------------- */
.js-rail { display: flex; flex-direction: column; height: 100%; padding: 14px 8px; gap: 6px; }
.js-logo { display: flex; align-items: center; justify-content: center; height: 52px; margin-bottom: 10px; }
.js-logo img { height: 36px; }
.js-rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.js-rail-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border-2); }
.js-rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: none; background: transparent; cursor: pointer; border-radius: 8px;
  color: var(--terciary-80); font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.js-rail-item:hover { background: var(--primary-5); color: var(--terciary-100); }
.js-rail-item.is-active { background: var(--primary-10); color: var(--primary-accent); }
.js-rail-item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px;
  background: var(--primary-100); border-radius: 0 2px 2px 0;
}
.js-rail-icon { font-size: 20px; line-height: 1; color: inherit; }
.js-rail-label { text-align: center; line-height: 1.1; }
.js-rail-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  background: var(--secondary-100); color: var(--secondary-accent);
  padding: 2px 5px; border-radius: 3px;
}

/* Top bar --------------------------------------------------------------- */
.js-crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.js-crumb { color: var(--terciary-80); font-weight: 600; }
.js-crumb.is-current { color: var(--terciary-100); font-weight: 700; }
.js-crumb-sep { color: var(--terciary-40); }
.js-topbar-right { display: flex; align-items: center; gap: 14px; }
.js-search {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; width: 360px;
  background: var(--bg-2); border: 1px solid transparent; border-radius: 8px;
  transition: all 120ms ease-out;
}
.js-search:focus-within { background: #fff; border-color: var(--primary-100); box-shadow: var(--shadow-inset); }
.js-search-icon { font-size: 16px; color: var(--terciary-50); }
.js-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 14px; color: var(--fg-1); }
.js-search kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--terciary-70);
  border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; background: #fff;
}
.js-iconbtn {
  position: relative; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border-2); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--terciary-80);
  font-size: 16px; transition: all 120ms ease-out;
}
.js-iconbtn:hover { background: var(--bg-2); color: var(--terciary-100); }
.js-iconbtn-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--heart-red); border: 2px solid #fff; }
.js-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--secondary-20); color: var(--secondary-accent);
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* Main region ----------------------------------------------------------- */
.js-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.js-page-title { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--primary-100); text-transform: uppercase; letter-spacing: 0.4px; margin: 0; }
.js-page-sub   { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--terciary-70); margin-top: 4px; }

/* KPI ------------------------------------------------------------------- */
.js-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.js-kpi {
  background: #fff; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 18px; box-shadow: var(--shadow-03); border-top: 3px solid var(--primary-100);
}
.js-kpi-label { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 1px;
                text-transform: uppercase; color: var(--terciary-50); margin-bottom: 8px; }
.js-kpi-value { font-family: var(--font-sans); font-weight: 700; font-size: 26px; color: var(--terciary-100);
                letter-spacing: -0.4px; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.js-kpi-delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.js-kpi-delta.is-up   { background: var(--green-10); color: var(--green-accent); }
.js-kpi-delta.is-down { background: var(--red-10);   color: var(--red-accent); }
.js-kpi-foot  { font-family: var(--font-sans); font-size: 12px; color: var(--terciary-70); margin-top: 6px; }

/* Card shell ------------------------------------------------------------ */
.js-card { background: #fff; border: 1px solid var(--border-2); border-radius: 8px;
           box-shadow: var(--shadow-03); margin-bottom: 16px; overflow: hidden; }
.js-card-head { display: flex; justify-content: space-between; align-items: flex-start;
                padding: 18px 20px; border-bottom: 1px solid var(--border-2); gap: 16px; }
.js-card-title { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--terciary-100); margin: 0; }
.js-card-sub   { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--terciary-70); margin: 2px 0 0; }
.js-card-head-actions { display: flex; align-items: center; gap: 8px; }
.js-legend { display: flex; gap: 14px; font-size: 12px; color: var(--terciary-70); align-items: center; }
.js-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Buttons + chips ------------------------------------------------------- */
.js-btn { font-family: var(--font-sans); font-weight: 700; border: none; cursor: pointer;
          display: inline-flex; align-items: center; gap: 8px; transition: all 120ms ease-out; }
.js-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.js-btn-primary { background: var(--primary-100); color: #fff; height: 40px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
.js-btn-primary:hover:not(:disabled) { background: var(--primary-accent); box-shadow: var(--shadow-04); }
.js-btn-white   { background: #fff; color: var(--terciary-100); border: 1px solid var(--border-1); height: 40px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
.js-btn-white:hover { background: var(--bg-2); }
.js-btn-ghost   { background: transparent; color: var(--primary-100); height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.js-btn-ghost:hover { background: var(--primary-10); }
.js-btn-sm { height: 32px; padding: 0 14px; font-size: 12px; border-radius: 8px; }

.js-chip { font-family: var(--font-sans); font-weight: 700; font-size: 12px;
           height: 32px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border-1);
           background: #fff; color: var(--terciary-80); cursor: pointer; transition: all 120ms ease-out; }
.js-chip:hover { border-color: var(--primary-100); color: var(--primary-accent); }
.js-chip.is-on { background: var(--primary-100); border-color: var(--primary-100); color: #fff; }

.js-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tags ------------------------------------------------------------------ */
.js-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
          border-radius: 3px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; }
.js-tag-dot { width: 6px; height: 6px; border-radius: 50%; }
.js-tag-grey  { background: var(--terciary-10);  color: var(--terciary-90); }
.js-tag-blue  { background: var(--secondary-20); color: var(--secondary-accent); }
.js-tag-green { background: var(--green-10);     color: var(--green-accent); }
.js-tag-red   { background: var(--red-10);       color: var(--red-accent); }
.js-tag-yellow{ background: var(--yellow-10);    color: var(--yellow-accent); }

/* Table ----------------------------------------------------------------- */
.js-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }
.js-table th { text-align: left; padding: 12px 16px; font-family: var(--font-sans); font-weight: 800;
               font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--terciary-50);
               border-bottom: 1px solid var(--border-2); cursor: pointer; }
.js-table th.num, .js-table td.num { text-align: right; }
.js-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-2); color: var(--terciary-100); vertical-align: middle; }
.js-table tr { cursor: pointer; transition: background 120ms ease-out; }
.js-table tr:hover td { background: var(--primary-5); }
.js-table tbody tr:last-child td { border-bottom: none; }
.js-table-title { font-weight: 700; }
.js-table-sub   { font-size: 11px; color: var(--terciary-70); margin-top: 2px; }
.js-table td.num.up   { color: var(--green-accent); font-weight: 700; }
.js-table td.num.down { color: var(--red-accent);   font-weight: 700; }
.js-table td.act { color: var(--terciary-40); font-size: 18px; text-align: right; }
.js-channels { display: flex; flex-wrap: wrap; gap: 4px; }
.js-channel-chip { font-size: 11px; padding: 2px 8px; border-radius: 3px;
                   background: var(--terciary-5); color: var(--terciary-80); font-weight: 600; }

/* Notes ----------------------------------------------------------------- */
.js-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px; margin-bottom: 10px;
           background: #fff; border: 1px solid var(--border-2); box-shadow: var(--shadow-03); }
.js-note-info { border-left: 4px solid var(--primary-100);
                background: linear-gradient(90deg, var(--secondary-20) 0%, #fff 25%); }
.js-note-ico { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center;
               color: #fff; font-family: var(--font-sans); font-weight: 900; font-size: 12px; }
.js-note-title { font-weight: 700; font-size: 13px; color: var(--terciary-100); margin-bottom: 2px; }
.js-note-body  { font-size: 13px; color: var(--terciary-80); line-height: 1.5; }

/* AI panel -------------------------------------------------------------- */
.js-ai-head { padding: 16px; border-bottom: 1px solid var(--border-2); display: flex; align-items: center; justify-content: space-between; }
.js-ai-brand { display: flex; align-items: center; gap: 10px; }
.js-ai-title { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--terciary-100); margin: 0; }
.js-ai-body { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.js-ai-card { padding: 14px; border-radius: 8px; border: 1px solid var(--border-2);
              background: linear-gradient(180deg, var(--secondary-20) 0%, #fff 70%); }
.js-ai-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.js-ai-impact { font-size: 11px; color: var(--green-accent); font-weight: 700; }
.js-ai-card-title { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--terciary-100); margin-bottom: 6px; }
.js-ai-card-blurb { font-size: 12px; color: var(--terciary-80); line-height: 1.5; margin: 0 0 10px; }
.js-ai-card-actions { display: flex; gap: 6px; }
.js-ai-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-2); }
.js-ai-input { display: flex; gap: 8px; align-items: center; }
.js-ai-input input { flex: 1; height: 36px; border-radius: 8px; border: 1px solid var(--border-1);
                     padding: 0 12px; font-family: var(--font-sans); font-size: 13px; outline: none; }
.js-ai-input input:focus { border-color: var(--primary-100); box-shadow: var(--shadow-inset); }
.js-ai-disclaimer { font-size: 10px; color: var(--terciary-50); margin-top: 8px; text-align: center; }

/* Fields ---------------------------------------------------------------- */
.js-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.js-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.js-field-label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--terciary-80); }
.js-input { height: 40px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--border-1);
            background: #fff; font-family: var(--font-sans); font-size: 14px; color: var(--terciary-100); outline: none; transition: all 120ms; }
.js-input:focus { border-color: var(--primary-100); box-shadow: var(--shadow-inset); }
.js-hint { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--terciary-70); }

/* Modal ----------------------------------------------------------------- */
.js-modal-scrim {
  position: fixed; inset: 0; background: rgba(28,45,59,0.4); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  animation: js-fade 160ms ease-out;
}
.js-modal {
  width: 560px; max-width: calc(100vw - 40px); background: #fff;
  border-radius: 12px; box-shadow: var(--shadow-06); overflow: hidden;
  animation: js-pop 180ms ease-out;
}
.js-modal-head { display: flex; justify-content: space-between; align-items: center;
                 padding: 18px 22px; border-bottom: 1px solid var(--border-2); }
.js-modal-title { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--terciary-100); margin: 0; }
.js-modal-body { padding: 22px; max-height: 60vh; overflow: auto; }
.js-modal-foot { display: flex; justify-content: flex-end; gap: 10px;
                 padding: 16px 22px; background: var(--bg-2); border-top: 1px solid var(--border-2); }

@keyframes js-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes js-pop  { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Toast ----------------------------------------------------------------- */
.js-toast-wrap { position: fixed; top: 80px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.js-toast { pointer-events: auto; min-width: 260px; background: #fff;
            border: 1px solid var(--border-2); border-radius: 8px; box-shadow: var(--shadow-06);
            padding: 12px 14px; display: flex; gap: 10px; align-items: center;
            animation: js-slide 200ms ease-out; }
.js-toast.ok  { border-left: 4px solid var(--green-100); }
.js-toast.err { border-left: 4px solid var(--red-100); }
.js-toast-ico { width: 18px; height: 18px; border-radius: 50%; color: #fff;
                display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0; }
@keyframes js-slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Misc ------------------------------------------------------------------ */
.js-empty {
  background: var(--grad-soft-blue); border: 1px dashed var(--border-1); border-radius: 8px;
  padding: 32px; text-align: center; color: var(--terciary-70);
}