/*
 * TempsPlus — Dashboard & Listings CSS
 * Covers: sidebar, topbar, stat cards, tables, job cards,
 *         check-in widget, modals, pricing table, auth pages.
 */

/* ── Dashboard layout ───────────────────────────────────────────────────────── */
.tp-dashboard {
    display:    flex;
    min-height: 100vh;
    background: var(--tp-bg);
    font-family: var(--tp-font-sans);
}

.tp-sidebar {
    width:            var(--tp-sidebar-width);
    min-height:       100vh;
    background:       var(--tp-white);
    border-right:     1px solid var(--tp-border);
    display:          flex;
    flex-direction:   column;
    position:         sticky;
    top:              0;
    flex-shrink:      0;
    z-index:          100;
}

.tp-sidebar__logo { padding: var(--tp-space-5) var(--tp-space-5) var(--tp-space-4); border-bottom: 1px solid var(--tp-border); }
.tp-sidebar__logo-img { height: 60px; width: auto; }

.tp-sidebar__nav { list-style: none; margin: 0; padding: var(--tp-space-4) 0; flex: 1; }

.tp-sidebar__item a {
    display:        flex;
    align-items:    center;
    gap:            var(--tp-space-3);
    padding:        var(--tp-space-3) var(--tp-space-5);
    color:          var(--tp-body);
    text-decoration: none;
    font-size:      var(--tp-text-sm);
    font-weight:    var(--tp-weight-medium);
    border-radius:  0;
    transition:     background var(--tp-transition), color var(--tp-transition);
}
.tp-sidebar__item a:hover { background: var(--tp-primary-light); color: var(--tp-primary); }
.tp-sidebar__item--active a { background: var(--tp-primary-light); color: var(--tp-primary); border-left: 3px solid var(--tp-primary); font-weight: var(--tp-weight-semibold); }

.tp-sidebar__footer { padding: var(--tp-space-4) var(--tp-space-5); border-top: 1px solid var(--tp-border); }
.tp-sidebar__help, .tp-sidebar__logout { display:block; font-size:var(--tp-text-sm); color:var(--tp-body); text-decoration:none; padding:var(--tp-space-2) 0; }
.tp-sidebar__logout { color: var(--tp-accent-red); margin-top: var(--tp-space-2); }
.tp-sidebar__logout:hover { color: #c00; }

.tp-dashboard__main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── Top bar ─────────────────────────────────────────────────────────────────── */
.tp-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--tp-space-4) var(--tp-space-6);
    background:      var(--tp-white);
    border-bottom:   1px solid var(--tp-border);
    position:        sticky;
    top:             0;
    z-index:         50;
}
.tp-topbar__search { flex: 1; max-width: 360px; }
.tp-topbar__search-input { background: var(--tp-bg); border-color: var(--tp-border); }
.tp-topbar__right { display:flex; align-items:center; gap:var(--tp-space-4); }
.tp-trial-ends {
    font-size:    0.75rem;
    font-weight:  600;
    color:        #2563eb;
    background:   #eff6ff;
    border:       1px solid #bfdbfe;
    border-radius: 4px;
    padding:      4px 10px;
    white-space:  nowrap;
    align-self:   center;
}
.tp-trial-banner { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tp-trial-banner__close { background:none; border:none; font-size:1.25rem; line-height:1; cursor:pointer; color:inherit; flex-shrink:0; padding:0 4px; }

/* Hamburger & mobile sidebar backdrop */
.tp-hamburger { display:none; background:none; border:none; cursor:pointer; padding:var(--tp-space-2); font-size:1.5rem; color:var(--tp-heading); line-height:1; flex-shrink:0; }
.tp-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:149; }
.tp-sidebar-backdrop--visible { display:block; }

/* Notification tray */
.tp-notif-wrapper { position:relative; }
.tp-notif-bell { background:none; border:none; cursor:pointer; font-size:1.25rem; position:relative; }
.tp-notif-badge { position:absolute; top:-4px; right:-6px; background:var(--tp-accent-red); color:#fff; border-radius:var(--tp-radius-full); font-size:10px; font-weight:700; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.tp-notif-tray { position:absolute; right:0; top:calc(100% + 8px); width:300px; background:var(--tp-white); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); box-shadow:var(--tp-shadow-lg); display:none; z-index:200; }
.tp-notif-tray--open { display:block; }
.tp-notif-tray__header { padding:var(--tp-space-3) var(--tp-space-4); font-weight:var(--tp-weight-semibold); border-bottom:1px solid var(--tp-border); font-size:var(--tp-text-sm); }
.tp-notif-empty { padding:var(--tp-space-4); color:var(--tp-body); font-size:var(--tp-text-sm); text-align:center; }

/* Avatar */
.tp-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.tp-avatar--sm { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.tp-company-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--tp-radius-md); color:#fff; font-weight:var(--tp-weight-bold); flex-shrink:0; }
.tp-company-logo { border-radius:var(--tp-radius-md); object-fit:cover; flex-shrink:0; }

/* ── Dashboard content ───────────────────────────────────────────────────────── */
.tp-tab-panel { display:none; padding:var(--tp-space-6); }
.tp-tab-panel--active { display:block; }

.tp-dashboard__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--tp-space-6); }
.tp-dashboard__title { font-size:var(--tp-text-2xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0; }
.tp-dashboard__sub { color:var(--tp-body); font-size:var(--tp-text-sm); margin:var(--tp-space-1) 0 0; }

/* Stat row */
.tp-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--tp-space-4); margin-bottom:var(--tp-space-6); }
.tp-stat-card { background:var(--tp-white); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); display:flex; align-items:center; gap:var(--tp-space-4); box-shadow:var(--tp-shadow-sm); }
.tp-stat-card__icon { width:44px; height:44px; border-radius:var(--tp-radius-md); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.tp-stat-card__icon--blue   { background: rgba(56,179,250,0.12); }
.tp-stat-card__icon--green  { background: rgba(76,230,128,0.12); }
.tp-stat-card__icon--yellow { background: rgba(245,158,11,0.12); }
.tp-stat-card__icon--red    { background: rgba(250,9,9,0.10); }
.tp-stat-card__label { font-size:var(--tp-text-xs); color:var(--tp-body); text-transform:uppercase; letter-spacing:0.04em; }
.tp-stat-card__value { font-size:var(--tp-text-2xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); line-height:1.2; }

/* Dashboard grid */
.tp-dashboard__grid { display:grid; grid-template-columns:1fr 300px; gap:var(--tp-space-6); }
.tp-dashboard__col-main { min-width:0; }
.tp-dashboard__col-side { display:flex; flex-direction:column; gap:var(--tp-space-4); }

/* Card header */
.tp-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--tp-space-4); }
.tp-card__header h3 { font-size:var(--tp-text-base); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); margin:0; }
.tp-card__sub { font-size:var(--tp-text-xs); color:var(--tp-body); margin-top:var(--tp-space-1); }
.tp-link { color:var(--tp-primary); text-decoration:none; font-size:var(--tp-text-sm); font-weight:var(--tp-weight-medium); }
.tp-link:hover { color:var(--tp-secondary); }

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.tp-table { width:100%; border-collapse:collapse; font-size:var(--tp-text-sm); }
.tp-table th { text-align:left; padding:var(--tp-space-3) var(--tp-space-4); color:var(--tp-body); font-weight:var(--tp-weight-medium); font-size:var(--tp-text-xs); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--tp-border); }
.tp-table td { padding:var(--tp-space-4); border-bottom:1px solid var(--tp-border); color:var(--tp-heading); vertical-align:middle; }
.tp-table tr:last-child td { border-bottom:none; }
.tp-table tr:hover td { background: var(--tp-bg); }
.tp-table__empty { color:var(--tp-body); text-align:center; padding:var(--tp-space-8) !important; }
.tp-table__candidate { display:flex; align-items:center; gap:var(--tp-space-3); }

/* Match score bar */
.tp-match-bar { display:inline-block; width:80px; height:6px; background:var(--tp-border); border-radius:var(--tp-radius-full); vertical-align:middle; overflow:hidden; margin-right:var(--tp-space-2); }
.tp-match-bar__fill { height:100%; background:var(--tp-primary); border-radius:var(--tp-radius-full); }
.tp-match-pct { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-semibold); color:var(--tp-primary); }

/* ── Welcome card ────────────────────────────────────────────────────────────── */
.tp-welcome-card { display:flex; align-items:center; gap:var(--tp-space-5); padding:var(--tp-space-6); margin-bottom:var(--tp-space-6); }
.tp-welcome-card__avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--tp-primary-light); }
.tp-welcome-card__body { flex:1; }
.tp-welcome-card__name { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0 0 var(--tp-space-2); }
.tp-welcome-card__meta { display:flex; align-items:center; gap:var(--tp-space-2); flex-wrap:wrap; font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-welcome-card__actions { display:flex; gap:var(--tp-space-3); flex-shrink:0; }

/* ── Recommended jobs grid ───────────────────────────────────────────────────── */
.tp-recommended-jobs-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--tp-space-4); }
.tp-rec-job-card { border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-4); transition:box-shadow var(--tp-transition-md); }
.tp-rec-job-card:hover { box-shadow:var(--tp-shadow-md); }
.tp-rec-job-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--tp-space-3); }
.tp-rec-job-card__title { font-size:var(--tp-text-base); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); margin:0 0 var(--tp-space-1); }
.tp-rec-job-card__company, .tp-rec-job-card__location { font-size:var(--tp-text-xs); color:var(--tp-body); margin:0; }
.tp-rec-job-card__rate { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-semibold); color:var(--tp-primary); margin:var(--tp-space-2) 0; }
.tp-rec-job-card__actions { display:flex; gap:var(--tp-space-2); margin-top:var(--tp-space-4); }
.tp-match-badge { font-size:var(--tp-text-xs); font-weight:var(--tp-weight-bold); color:var(--tp-primary); }

/* ── Completeness card ───────────────────────────────────────────────────────── */
.tp-completeness-pct { font-size:2.5rem; font-weight:var(--tp-weight-bold); color:var(--tp-primary); margin:var(--tp-space-3) 0 var(--tp-space-2); }
.tp-completeness-bar { height:8px; background:var(--tp-border); border-radius:var(--tp-radius-full); overflow:hidden; margin-bottom:var(--tp-space-2); }
.tp-completeness-bar__fill { height:100%; background:var(--tp-primary); border-radius:var(--tp-radius-full); transition:width 0.4s ease; }
.tp-completeness-note { font-size:var(--tp-text-xs); color:var(--tp-body); text-align:right; margin-bottom:var(--tp-space-4); }
.tp-completeness-missing { display:flex; gap:var(--tp-space-3); align-items:flex-start; background:var(--tp-bg); border-radius:var(--tp-radius-md); padding:var(--tp-space-3); margin-bottom:var(--tp-space-4); font-size:var(--tp-text-sm); }
.tp-completeness-missing__icon { font-size:1rem; color:var(--tp-body); flex-shrink:0; }
.tp-completeness-missing strong { display:block; color:var(--tp-heading); }
.tp-completeness-missing p { color:var(--tp-body); font-size:var(--tp-text-xs); margin:var(--tp-space-1) 0 0; }

/* ── Check-in card ───────────────────────────────────────────────────────────── */
.tp-checkin-state { font-size:var(--tp-text-xs); font-weight:var(--tp-weight-semibold); color:var(--tp-body); }
.tp-checkin-state--in { color:var(--tp-accent-green); }
.tp-checkin-timer { display:flex; align-items:center; justify-content:center; padding:var(--tp-space-6) 0 var(--tp-space-2); }
@keyframes tp-hourglass-flip {
    0%, 40%   { transform: rotate(0deg); }
    60%, 100% { transform: rotate(180deg); }
}
.tp-hourglass-spin { display:inline-block; font-size:2.5rem; animation:tp-hourglass-flip 2s ease-in-out infinite; }
.tp-hourglass-idle { display:inline-block; font-size:2.5rem; opacity:0.3; }
.tp-checkin-ready { text-align:center; font-size:var(--tp-text-xs); color:var(--tp-body); margin-bottom:var(--tp-space-4); }
.tp-today-shifts { margin-top:var(--tp-space-3); display:flex; flex-direction:column; gap:var(--tp-space-2); }
.tp-shift-row { display:flex; align-items:center; justify-content:space-between; gap:var(--tp-space-3); padding:var(--tp-space-3); border:1px solid var(--tp-border); border-radius:var(--tp-radius-md); background:var(--tp-bg); }
.tp-shift-row--active { border-color:var(--tp-primary); background:color-mix(in srgb, var(--tp-primary) 5%, transparent); }
.tp-shift-row--done { opacity:0.65; }
.tp-shift-row__info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tp-shift-row__title { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-shift-row__meta { font-size:var(--tp-text-xs); color:var(--tp-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-shift-row__action { display:flex; align-items:center; gap:var(--tp-space-2); flex-shrink:0; }
.tp-recent-sessions { margin-top:var(--tp-space-5); border-top:1px solid var(--tp-border); padding-top:var(--tp-space-4); }
.tp-recent-sessions h4 { font-size:var(--tp-text-xs); text-transform:uppercase; letter-spacing:0.06em; color:var(--tp-body); margin:0 0 var(--tp-space-3); }
.tp-session-row { display:flex; gap:var(--tp-space-2); font-size:var(--tp-text-xs); color:var(--tp-body); padding:var(--tp-space-2) 0; border-bottom:1px solid var(--tp-border); }
.tp-session-date { font-weight:var(--tp-weight-medium); color:var(--tp-heading); width:48px; }
.tp-session-time { flex:1; }
.tp-session-hrs { font-weight:var(--tp-weight-semibold); color:var(--tp-primary); }

/* ── Billing card ────────────────────────────────────────────────────────────── */
.tp-billing-icon { font-size:1.5rem; margin-right:var(--tp-space-2); }
.tp-billing-tagline { font-size:var(--tp-text-sm); color:var(--tp-body); margin-bottom:var(--tp-space-4); }
.tp-billing-plan { display:flex; justify-content:space-between; align-items:center; padding:var(--tp-space-3) 0; border-bottom:1px solid var(--tp-border); }
.tp-billing-plan__label { font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-billing-plan__value { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); }
.tp-billing-help { margin-top:var(--tp-space-5); padding-top:var(--tp-space-4); border-top:1px solid var(--tp-border); text-align:center; font-size:var(--tp-text-sm); }
.tp-billing-help p { font-weight:var(--tp-weight-semibold); color:var(--tp-heading); margin:0 0 var(--tp-space-1); }
.tp-billing-help small { color:var(--tp-body); }

/* ── Plan modal cards ────────────────────────────────────────────────────────── */
.tp-plan-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--tp-space-4); margin:var(--tp-space-5) 0; }
.tp-plan-card { border:2px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); position:relative; text-align:center; }
.tp-plan-card--featured { border-color:var(--tp-primary); }
.tp-plan-badge { position:absolute; top:-1px; right:var(--tp-space-4); background:var(--tp-accent-green); color:#fff; font-size:var(--tp-text-xs); font-weight:var(--tp-weight-bold); padding:2px 10px; border-radius:0 0 var(--tp-radius-sm) var(--tp-radius-sm); }
.tp-plan-card__name { font-size:var(--tp-text-lg); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin-bottom:var(--tp-space-3); }
.tp-plan-card__amount { font-size:var(--tp-text-2xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); display:block; }
.tp-plan-card__period { font-size:var(--tp-text-xs); color:var(--tp-body); }
.tp-plan-card__desc { font-size:var(--tp-text-xs); color:var(--tp-body); margin:var(--tp-space-3) 0 var(--tp-space-5); }
.tp-modal__skip { text-align:center; font-size:var(--tp-text-sm); color:var(--tp-body); margin-top:var(--tp-space-4); }
.tp-link-btn { background:none; border:none; cursor:pointer; color:var(--tp-primary); font-size:inherit; }

/* ── Modals ──────────────────────────────────────────────────────────────────── */
.tp-modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:none; align-items:center; justify-content:center; padding:var(--tp-space-4); }
.tp-modal--open { display:flex; }
.tp-modal__box { background:var(--tp-white); border-radius:var(--tp-radius-xl); padding:var(--tp-space-8); width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:var(--tp-shadow-lg); }
.tp-modal__box--sm { max-width:420px; }
.tp-modal__title { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0 0 var(--tp-space-2); }
.tp-modal__desc { font-size:var(--tp-text-sm); color:var(--tp-body); margin-bottom:var(--tp-space-5); }
body.tp-modal-open { overflow:hidden; }

/* ── Next Assignment card ────────────────────────────────────────────────────── */
.tp-next-assignment-card { margin-bottom:var(--tp-space-5); }
.tp-next-assignment { display:flex; gap:var(--tp-space-4); align-items:flex-start; }
.tp-next-assignment__detail strong { font-size:var(--tp-text-base); color:var(--tp-heading); }
.tp-next-assignment__detail p { font-size:var(--tp-text-sm); color:var(--tp-body); margin:var(--tp-space-1) 0; }

/* ── Star rating widget ──────────────────────────────────────────────────────── */
.tp-star-select { display:inline-flex; gap:4px; font-size:28px; cursor:pointer; user-select:none; line-height:1; }
.tp-star-select .tp-star { color:#d1d5db; transition:color 0.1s; }
.tp-star-select .tp-star--active { color:#f59e0b; }
.tp-rate-panel { padding:var(--tp-space-4); background:var(--tp-bg); border:1px solid var(--tp-border); border-radius:var(--tp-radius-md); margin-bottom:var(--tp-space-3); }

/* ── Dashboard footer ────────────────────────────────────────────────────────── */
.tp-dashboard__footer { padding:var(--tp-space-5) var(--tp-space-6); border-top:1px solid var(--tp-border); display:flex; justify-content:space-between; font-size:var(--tp-text-xs); color:var(--tp-body); margin-top:auto; }
.tp-dashboard__footer a { color:var(--tp-body); text-decoration:none; margin-left:var(--tp-space-4); }

/* ── Job Listings page ───────────────────────────────────────────────────────── */
.tp-jobs-page { font-family:var(--tp-font-sans); }
.tp-jobs-hero { text-align:center; padding:var(--tp-space-12) var(--tp-space-6) var(--tp-space-10); background:var(--tp-white); border-bottom:1px solid var(--tp-border); }
.tp-jobs-hero__title { font-size:clamp(2rem,5vw,3rem); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0 0 var(--tp-space-3); }
.tp-jobs-hero__highlight { color:var(--tp-primary); }
.tp-jobs-hero__sub { font-size:var(--tp-text-lg); color:var(--tp-body); max-width:560px; margin:0 auto var(--tp-space-8); }

.tp-jobs-search-bar { display:flex; gap:0; max-width:680px; margin:0 auto var(--tp-space-4); background:var(--tp-white); border:2px solid var(--tp-border); border-radius:var(--tp-radius-lg); overflow:hidden; box-shadow:var(--tp-shadow-sm); }
.tp-jobs-search-bar__field { display:flex; align-items:center; flex:1; padding:0 var(--tp-space-4); gap:var(--tp-space-3); border-right:1px solid var(--tp-border); }
.tp-jobs-search-bar__field--location { flex:0 0 200px; }
.tp-jobs-search-bar__field svg { color:var(--tp-body); flex-shrink:0; width:18px; height:18px; }
.tp-jobs-search-input { border:none; outline:none; font-size:var(--tp-text-sm); color:var(--tp-heading); width:100%; font-family:var(--tp-font-sans); background:transparent; }
.tp-jobs-search-select { appearance:none; cursor:pointer; }
.tp-jobs-search-btn { border-radius:0; padding:var(--tp-space-4) var(--tp-space-6); font-size:var(--tp-text-base); flex-shrink:0; }

.tp-jobs-popular { display:flex; align-items:center; gap:var(--tp-space-3); justify-content:center; flex-wrap:wrap; }
.tp-jobs-popular__label { font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-jobs-popular__tag { background:none; border:none; color:var(--tp-primary); font-size:var(--tp-text-sm); cursor:pointer; padding:0; font-weight:var(--tp-weight-medium); }
.tp-jobs-popular__tag:hover { text-decoration:underline; }

/* Layout */
.tp-jobs-layout { display:grid; grid-template-columns:280px 1fr; gap:0; max-width:var(--tp-content-max); margin:0 auto; padding:var(--tp-space-6); gap:var(--tp-space-6); }

/* Filters sidebar */
.tp-jobs-filters { background:var(--tp-white); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); align-self:start; position:sticky; top:var(--tp-space-4); }
.tp-jobs-filters__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--tp-space-5); }
.tp-jobs-filters__title { display:flex; align-items:center; gap:var(--tp-space-2); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); font-size:var(--tp-text-sm); }
.tp-jobs-filters__clear { background:none; border:none; color:var(--tp-primary); font-size:var(--tp-text-sm); cursor:pointer; padding:0; }

.tp-filter-group { margin-bottom:var(--tp-space-5); border-bottom:1px solid var(--tp-border); padding-bottom:var(--tp-space-5); }
.tp-filter-group:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.tp-filter-group__header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:var(--tp-weight-semibold); font-size:var(--tp-text-sm); color:var(--tp-heading); margin-bottom:var(--tp-space-4); user-select:none; }
.tp-filter-chevron { transition:transform var(--tp-transition); }
.tp-filter-chevron--open { transform:rotate(180deg); }
.tp-filter-checkbox { display:flex; align-items:center; gap:var(--tp-space-3); font-size:var(--tp-text-sm); color:var(--tp-body); cursor:pointer; margin-bottom:var(--tp-space-3); }
.tp-filter-checkbox input { width:16px; height:16px; accent-color:var(--tp-primary); }
.tp-filter-chips { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); }
.tp-filter-chip { border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-full); padding:var(--tp-space-1) var(--tp-space-3); font-size:var(--tp-text-sm); cursor:pointer; background:var(--tp-white); color:var(--tp-body); transition:all var(--tp-transition); }
.tp-filter-chip:focus { outline:none; }
.tp-filter-chip:focus-visible { outline:2px solid var(--tp-primary); outline-offset:2px; }
.tp-filter-chip--active,
button.tp-filter-chip.tp-filter-chip--active { border-color:var(--tp-primary); background:var(--tp-primary-light); color:var(--tp-primary); font-weight:var(--tp-weight-medium); }

/* Results area */
.tp-jobs-results__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--tp-space-5); }
.tp-jobs-results__count { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); display:flex; align-items:center; gap:var(--tp-space-3); flex-wrap:wrap; }
.tp-jobs-results__sort { display:flex; align-items:center; gap:var(--tp-space-3); font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-select--sm { padding:var(--tp-space-2) var(--tp-space-3); font-size:var(--tp-text-sm); }
.tp-active-filters { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); }
.tp-active-filter { display:inline-flex; align-items:center; gap:var(--tp-space-2); background:var(--tp-primary-light); color:var(--tp-primary); border-radius:var(--tp-radius-full); padding:2px var(--tp-space-3); font-size:var(--tp-text-xs); font-weight:var(--tp-weight-medium); }
.tp-active-filter button { background:none; border:none; cursor:pointer; color:var(--tp-primary); font-size:1rem; line-height:1; padding:0; }

/* Job card */
.tp-job-card { display:grid; grid-template-columns:56px 1fr auto; gap:var(--tp-space-4); align-items:center; background:var(--tp-white); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); margin-bottom:var(--tp-space-4); transition:box-shadow var(--tp-transition-md), transform var(--tp-transition-md); }
.tp-job-card:hover { box-shadow:var(--tp-shadow-md); transform:translateY(-1px); }
.tp-job-card__logo { display:flex; align-items:center; justify-content:center; }
.tp-job-card__body { min-width:0; }
.tp-job-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--tp-space-4); }
.tp-job-card__title-group { flex:1; min-width:0; }
.tp-job-card__title { font-size:var(--tp-text-lg); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); margin:var(--tp-space-2) 0 var(--tp-space-1); }
.tp-job-card__title a { color:inherit; text-decoration:none; }
.tp-job-card__title a:hover { color:var(--tp-primary); }
.tp-job-card__meta { display:flex; align-items:center; gap:var(--tp-space-2); font-size:var(--tp-text-sm); color:var(--tp-body); flex-wrap:wrap; margin-bottom:var(--tp-space-2); }
.tp-job-dot { color:var(--tp-border); }
.tp-job-card__desc { font-size:var(--tp-text-sm); color:var(--tp-body); margin:var(--tp-space-2) 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tp-job-card__skills { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); margin-top:var(--tp-space-2); }
.tp-job-skill { background:var(--tp-bg); border:1px solid var(--tp-border); border-radius:var(--tp-radius-full); padding:2px var(--tp-space-3); font-size:var(--tp-text-xs); color:var(--tp-body); }
.tp-job-type { flex-shrink:0; }
.tp-job-card__actions { display:flex; flex-direction:column; gap:var(--tp-space-2); align-items:stretch; min-width:120px; }
.tp-save-job--saved { color:var(--tp-accent-green); border-color:var(--tp-accent-green); }
.tp-job-urgent { margin-bottom:var(--tp-space-2); }

/* Load more */
.tp-jobs-load-more { text-align:center; padding:var(--tp-space-8) 0 var(--tp-space-4); }
.tp-load-more-btn { min-width:200px; }
.tp-jobs-showing { font-size:var(--tp-text-sm); color:var(--tp-body); margin-top:var(--tp-space-3); }
.tp-jobs-empty { text-align:center; padding:var(--tp-space-12); color:var(--tp-body); }

/* ── Pricing table ───────────────────────────────────────────────────────────── */
.tp-pricing-table-wrap { width:100%; display:flex; flex-direction:column; align-items:center; }
.tp-pricing-table { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--tp-space-4); max-width:1100px; width:100%; margin:0 auto; }
.tp-pricing-card { border:2px solid var(--tp-border); border-radius:var(--tp-radius-xl); padding:var(--tp-space-6) var(--tp-space-5); position:relative; background:var(--tp-white); transition:box-shadow var(--tp-transition-md); display:flex; flex-direction:column; }
.tp-pricing-card:hover { box-shadow:var(--tp-shadow-lg); }
.tp-pricing-card--featured { border-color:var(--tp-primary); box-shadow:var(--tp-shadow-md); }
.tp-pricing-badge { position:absolute; top:0; right:var(--tp-space-4); background:var(--tp-accent-green); color:#fff; font-size:10px; font-weight:var(--tp-weight-bold); padding:3px var(--tp-space-3); border-radius:0 0 var(--tp-radius-sm) var(--tp-radius-sm); letter-spacing:0.04em; }
.tp-pricing-card__name { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin-bottom:var(--tp-space-2); }
.tp-pricing-card__desc { font-size:var(--tp-text-xs); color:var(--tp-body); margin-bottom:var(--tp-space-4); min-height:44px; line-height:1.5; }
.tp-pricing-card__price { margin-bottom:var(--tp-space-4); }

/* Price display — single currency, large and bold */
.tp-pricing-display { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.tp-pricing-display__code { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-bold); color:var(--tp-body); text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0; align-self:flex-start; padding-top:6px; }
.tp-pricing-display__amount { font-size:2.6rem; font-weight:800; color:var(--tp-heading); line-height:1; word-break:break-all; }

.tp-pricing-card__period { font-size:var(--tp-text-xs); color:var(--tp-body); display:block; margin-top:var(--tp-space-2); }
.tp-pricing-card__features { list-style:none; margin:0 0 var(--tp-space-5); padding:0; flex:1; }
.tp-pricing-card__features li { font-size:var(--tp-text-xs); color:var(--tp-body); padding:var(--tp-space-2) 0; border-bottom:1px solid var(--tp-border); text-align:center; }
.tp-pricing-card__features li:last-child { border-bottom:none; }
.tp-pricing-cta { display:block; text-align:center; margin-top:auto; }
.tp-pricing-notice { text-align:center; font-size:var(--tp-text-sm); color:var(--tp-body); margin-top:var(--tp-space-4); }

/* ── Auth page ───────────────────────────────────────────────────────────────── */
.tp-auth-page { min-height:100vh; background:linear-gradient(135deg,var(--tp-primary-light) 0%,#fff 60%); display:flex; align-items:center; justify-content:center; padding:var(--tp-space-6); }
.tp-auth-box { max-width:440px; width:100%; padding:var(--tp-space-10); }
.tp-auth-box__logo { text-align:center; margin-bottom:var(--tp-space-8); }
.tp-auth-box__logo img { height:80px; }
.tp-auth-divider { text-align:center; font-size:var(--tp-text-xs); color:var(--tp-body); letter-spacing:0.08em; margin:var(--tp-space-6) 0; position:relative; }
.tp-auth-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--tp-border); z-index:0; }
.tp-auth-divider { background:var(--tp-white); position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.tp-auth-option-btn { display:flex; align-items:center; gap:var(--tp-space-4); border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-4); text-decoration:none; color:var(--tp-heading); margin-bottom:var(--tp-space-3); transition:border-color var(--tp-transition), box-shadow var(--tp-transition); }
.tp-auth-option-btn:hover { border-color:var(--tp-primary); box-shadow:var(--tp-shadow-sm); }
.tp-auth-option-btn__icon { font-size:1.5rem; flex-shrink:0; }
.tp-auth-option-btn strong { display:block; font-size:var(--tp-text-sm); }
.tp-auth-option-btn small { color:var(--tp-body); font-size:var(--tp-text-xs); }
.tp-auth-option-btn > span:last-child { margin-left:auto; color:var(--tp-body); }
.tp-auth-box__terms { font-size:var(--tp-text-xs); color:var(--tp-body); text-align:center; margin-top:var(--tp-space-5); }
.tp-checkbox { display:flex; align-items:center; gap:var(--tp-space-2); font-size:var(--tp-text-sm); color:var(--tp-body); cursor:pointer; }
.tp-empty-state { color:var(--tp-body); font-size:var(--tp-text-sm); text-align:center; padding:var(--tp-space-6); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tp-stat-row { grid-template-columns: repeat(2, 1fr); }
    .tp-dashboard__grid { grid-template-columns: 1fr; }
    .tp-pricing-table { grid-template-columns: repeat(2, 1fr); gap:var(--tp-space-4); }
}
@media (max-width: 768px) {
    .tp-hamburger { display:flex; align-items:center; }
    .tp-sidebar { position:fixed; top:0; left:0; height:100vh; z-index:150; transition:transform 0.25s ease; display:flex; transform:translateX(-100%); }
    .tp-sidebar--open { transform:translateX(0); }
    .tp-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .tp-jobs-layout { grid-template-columns:1fr; }
    .tp-jobs-filters { display:none; }
    .tp-jobs-search-bar { flex-direction:column; border-radius:var(--tp-radius-lg); }
    .tp-jobs-search-bar__field { border-right:none; border-bottom:1px solid var(--tp-border); padding:var(--tp-space-3) var(--tp-space-4); }
    .tp-jobs-search-btn { border-radius:0 0 var(--tp-radius-lg) var(--tp-radius-lg); }
    .tp-job-card { grid-template-columns:40px 1fr; }
    .tp-job-card__actions { grid-column:1/-1; flex-direction:row; }
    .tp-recommended-jobs-grid { grid-template-columns:1fr; }
    .tp-plan-cards { grid-template-columns:1fr; }
    .tp-pricing-table { grid-template-columns:1fr; }
    .tp-stat-row { grid-template-columns:1fr 1fr; }
    .tp-welcome-card { flex-direction:column; text-align:center; }
    .tp-welcome-card__actions { justify-content:center; }
}

/* ── Notification tray items ─────────────────────────────────────────────────── */
.tp-notif-item { display:flex; align-items:flex-start; gap:var(--tp-space-3); padding:var(--tp-space-3) var(--tp-space-4); border-bottom:1px solid var(--tp-border); transition:background var(--tp-transition); }
.tp-notif-item:last-child { border-bottom:none; }
.tp-notif-item--unread { background:#eff6ff; }
.tp-notif-item:hover { background:var(--tp-bg); }
.tp-notif-item__icon { font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.tp-notif-item__body { flex:1; min-width:0; }
.tp-notif-item__msg { font-size:var(--tp-text-xs); color:var(--tp-heading); margin:0 0 4px; line-height:1.4; }
.tp-notif-item__time { font-size:11px; color:var(--tp-body); }
.tp-notif-tray__list { max-height:360px; overflow-y:auto; }

/* ── Job manage rows (company Jobs tab) ──────────────────────────────────────── */
.tp-job-manage-row { padding:var(--tp-space-4) var(--tp-space-5); }
.tp-job-manage-row__main { margin-bottom:var(--tp-space-3); }
.tp-job-manage-row__title { font-size:var(--tp-text-base); color:var(--tp-heading); }
.tp-job-manage-row__meta { font-size:var(--tp-text-xs); color:var(--tp-body); margin-top:var(--tp-space-1); display:flex; flex-wrap:wrap; gap:var(--tp-space-2); }
.tp-job-manage-row__actions { display:flex; align-items:center; gap:var(--tp-space-2); flex-wrap:wrap; }

/* ── Applicant rows (company Applicants tab) ─────────────────────────────────── */
.tp-applicant-row { display:grid; grid-template-columns:40px 1fr 160px 160px; gap:var(--tp-space-4); align-items:center; padding:var(--tp-space-4); border-bottom:1px solid var(--tp-border); transition:background var(--tp-transition); }
.tp-applicant-row:last-child { border-bottom:none; }
.tp-applicant-row:hover { background:var(--tp-bg); }
.tp-applicant-row__photo { display:flex; align-items:center; }
.tp-applicant-row__info { min-width:0; }
.tp-applicant-row__name { display:block; font-size:var(--tp-text-sm); color:var(--tp-heading); margin-bottom:var(--tp-space-1); }
.tp-applicant-row__meta { font-size:var(--tp-text-xs); color:var(--tp-body); display:block; margin-bottom:var(--tp-space-2); }
.tp-applicant-row__skills { display:flex; flex-wrap:wrap; gap:var(--tp-space-1); }
.tp-applicant-contact { display:flex; gap:var(--tp-space-3); flex-wrap:wrap; margin-top:var(--tp-space-1); font-size:var(--tp-text-xs); color:var(--tp-body); }
.tp-applicant-row__score { display:flex; flex-direction:column; gap:var(--tp-space-1); }
.tp-applicant-row__status { display:flex; justify-content:flex-end; }

/* Status colours */
.tp-status { display:inline-block; padding:3px 10px; border-radius:var(--tp-radius-full); font-size:var(--tp-text-xs); font-weight:var(--tp-weight-semibold); }
.tp-status--active   { background:#dcfce7; color:#166534; }
.tp-status--draft    { background:#f3f4f6; color:#6b7280; }
.tp-status--paused   { background:#fef9c3; color:#854d0e; }
.tp-status--closed   { background:#fee2e2; color:#991b1b; }
.tp-status--reviewing{ background:#dbeafe; color:#1e40af; }
.tp-status--hired    { background:#dcfce7; color:#166534; }
.tp-status--rejected { background:#fee2e2; color:#991b1b; }

@media (max-width:768px) {
    .tp-applicant-row { grid-template-columns:40px 1fr; }
    .tp-applicant-row__score,
    .tp-applicant-row__status { grid-column:2; }
    .tp-job-manage-row__actions { flex-direction:column; align-items:flex-start; }
}

/* ── Job Detail Page ─────────────────────────────────────────────────────────── */
.tp-job-detail-page { background:var(--tp-bg); min-height:100vh; padding:var(--tp-space-8) var(--tp-space-6); }
.tp-job-detail-wrap { max-width:1080px; margin:0 auto; }

.tp-job-detail-back { display:inline-flex; align-items:center; gap:var(--tp-space-2); color:var(--tp-body); text-decoration:none; font-size:var(--tp-text-sm); font-weight:var(--tp-weight-medium); margin-bottom:var(--tp-space-5); transition:color var(--tp-transition); }
.tp-job-detail-back:hover { color:var(--tp-primary); }

.tp-job-detail-card { background:var(--tp-white); border:1px solid var(--tp-border); border-radius:var(--tp-radius-xl); overflow:hidden; box-shadow:var(--tp-shadow-sm); }

/* Header */
.tp-job-detail-header { display:grid; grid-template-columns:72px 1fr auto; gap:var(--tp-space-5); align-items:flex-start; padding:var(--tp-space-8); border-bottom:1px solid var(--tp-border); }
.tp-job-detail-header__logo { flex-shrink:0; }
.tp-job-detail-header__badges { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); margin-bottom:var(--tp-space-3); }
.tp-job-detail-title { font-size:var(--tp-text-2xl) !important; font-weight:var(--tp-weight-bold) !important; color:var(--tp-heading) !important; margin:0 0 var(--tp-space-3) !important; line-height:1.2 !important; }
.tp-job-detail-meta { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); font-size:var(--tp-text-sm); color:var(--tp-body); align-items:center; }
.tp-job-detail-actions { display:flex; flex-direction:column; gap:var(--tp-space-3); align-items:stretch; min-width:140px; }

.tp-job-detail-notice { margin:0 var(--tp-space-8); }

/* Body layout */
.tp-job-detail-body { display:grid; grid-template-columns:1fr 300px; gap:var(--tp-space-8); padding:var(--tp-space-8); align-items:flex-start; }
.tp-job-detail-main { min-width:0; }

/* Sections */
.tp-job-detail-section { margin-bottom:var(--tp-space-8); }
.tp-job-detail-section:last-child { margin-bottom:0; }
.tp-job-detail-section__title { font-size:var(--tp-text-lg) !important; font-weight:var(--tp-weight-bold) !important; color:var(--tp-heading) !important; margin:0 0 var(--tp-space-4) !important; padding-bottom:var(--tp-space-3); border-bottom:2px solid var(--tp-primary-light); line-height:1.3 !important; }
.tp-job-detail-description { font-size:var(--tp-text-base); color:var(--tp-body); line-height:1.8; }
.tp-job-detail-description p { margin:0 0 0.6em !important; }

/* Skills */
.tp-job-detail-skills { display:flex; flex-wrap:wrap; gap:var(--tp-space-3); }
.tp-job-skill--lg { font-size:var(--tp-text-sm); padding:var(--tp-space-2) var(--tp-space-4); border-radius:var(--tp-radius-full); background:var(--tp-primary-light); color:var(--tp-primary); font-weight:var(--tp-weight-medium); border:1.5px solid rgba(56,179,250,0.3); }

/* Apply CTA */
.tp-job-detail-apply-cta { background:var(--tp-bg); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-6); text-align:center; }

/* Sidebar */
.tp-job-detail-sidebar { display:flex; flex-direction:column; gap:var(--tp-space-4); position:sticky; top:var(--tp-space-4); }
.tp-job-detail-info-card { background:var(--tp-bg); border:1px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); }
.tp-job-detail-info-card__title { font-size:var(--tp-text-sm) !important; font-weight:var(--tp-weight-bold) !important; color:var(--tp-heading) !important; margin:0 0 var(--tp-space-4) !important; text-transform:uppercase; letter-spacing:0.05em; line-height:1.3 !important; }
.tp-job-detail-info-row { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--tp-space-3); padding:var(--tp-space-3) 0; border-bottom:1px solid var(--tp-border); font-size:var(--tp-text-sm); }
.tp-job-detail-info-row:last-child { border-bottom:none; padding-bottom:0; }
.tp-job-detail-info-row__label { color:var(--tp-body); flex-shrink:0; }
.tp-job-detail-info-row__value { color:var(--tp-heading); font-weight:var(--tp-weight-medium); text-align:right; }

/* Responsive */
@media (max-width:768px) {
    .tp-job-detail-header { grid-template-columns:48px 1fr; }
    .tp-job-detail-actions { grid-column:1/-1; flex-direction:row; }
    .tp-job-detail-body { grid-template-columns:1fr; }
    .tp-job-detail-sidebar { position:static; }
    .tp-job-detail-page { padding:var(--tp-space-4); }
}

/* ── Onboarding Tour Modal ───────────────────────────────────────────────────── */
.tp-modal__box--onboarding {
    max-width:760px;
    padding:0;
    overflow:hidden;
}
.tp-onboarding-slides { }
.tp-onboarding-slide {
    display:none;
    flex-direction:row;
    min-height:340px;
}
.tp-onboarding-slide--active { display:flex; }
.tp-onboarding-slide__graphic {
    width:40%;
    flex-shrink:0;
    background:var(--tp-primary-light, #eff6ff);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--tp-radius-xl) 0 0 0;
}
.tp-onboarding-placeholder {
    width:80%;
    aspect-ratio:1;
    max-width:200px;
    border:2px dashed var(--tp-border);
    border-radius:var(--tp-radius-lg);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--tp-body);
    font-size:var(--tp-text-xs);
    text-align:center;
    padding:var(--tp-space-4);
}
.tp-onboarding-slide__content {
    width:60%;
    padding:var(--tp-space-8);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.tp-onboarding-slide__step {
    font-size:var(--tp-text-xs);
    color:var(--tp-body);
    margin:0 0 var(--tp-space-2);
    text-transform:uppercase;
    letter-spacing:0.05em;
}
.tp-onboarding-slide__title {
    font-size:var(--tp-text-xl);
    font-weight:var(--tp-weight-bold);
    color:var(--tp-heading);
    margin:0 0 var(--tp-space-3);
}
.tp-onboarding-slide__desc {
    font-size:var(--tp-text-sm);
    color:var(--tp-body);
    line-height:1.6;
    margin:0;
}
.tp-onboarding-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--tp-space-4) var(--tp-space-8);
    border-top:1px solid var(--tp-border);
    background:var(--tp-white);
    border-radius:0 0 var(--tp-radius-xl) var(--tp-radius-xl);
}
.tp-onboarding-dots { display:flex; gap:var(--tp-space-2); }
.tp-onboarding-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--tp-border);
    cursor:pointer;
    transition:background var(--tp-transition);
}
.tp-onboarding-dot--active { background:var(--tp-primary); }
.tp-onboarding-nav-btns { display:flex; gap:var(--tp-space-3); }

@media (max-width:600px) {
    .tp-onboarding-slide { flex-direction:column; }
    .tp-onboarding-slide__graphic {
        width:100%;
        min-height:160px;
        border-radius:var(--tp-radius-xl) var(--tp-radius-xl) 0 0;
    }
    .tp-onboarding-slide__content { width:100%; padding:var(--tp-space-6); }
}