/* ============================================================ WB Dashboard — BEM component styles Adapts to light/dark via .wb-dark class on ============================================================ */ :root { --wbd-accent: #C8A56D; --wbd-accent-dark: #A8853D; --wbd-bg: #F8F7F4; --wbd-card: #FFFFFF; --wbd-muted: #F0EDE8; --wbd-border: #E5E0D8; --wbd-text: #1A1A18; --wbd-text-muted: #6B6660; --wbd-shadow: 0 2px 16px rgba(0,0,0,.07); --wbd-shadow-lg: 0 8px 40px rgba(0,0,0,.12); --wbd-radius: 12px; --wbd-radius-sm: 8px; --wbd-green: #10B981; --wbd-warning: #F59E0B; --wbd-red: #EF4444; } .wb-dark { --wbd-bg: #12100E; --wbd-card: #1E1C19; --wbd-muted: #252220; --wbd-border: #2E2B27; --wbd-text: #F5F2EE; --wbd-text-muted: #9A9590; --wbd-shadow: 0 2px 16px rgba(0,0,0,.4); --wbd-shadow-lg: 0 8px 40px rgba(0,0,0,.5); } /* ── App shell (page-dashboard.php) ── */ .wb-app { background: var(--wbd-bg); min-height: calc(100vh - var(--wb-nav-h, 72px)); padding-top: var(--wb-nav-h, 72px); } .wb-app__body { width: 100%; padding: 20px 20px 60px; } /* ── Base ── */ .wb-dashboard { width: 100%; } .wbd { font-family: 'DM Sans', sans-serif; color: var(--wbd-text); width: 100%; } .wbd * { box-sizing: border-box; } a.wbd, .wbd a { text-decoration: none; } /* ── Header ── */ .wbd__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 28px 36px; margin-bottom: 24px; box-shadow: var(--wbd-shadow); } .wbd__header-inner { display: flex; align-items: center; gap: 16px; } .wbd__avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--wbd-accent), var(--wbd-accent-dark)); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: #fff; flex-shrink: 0; } .wbd__avatar--employer { background: linear-gradient(135deg, #C8A56D, #8B6914); } .wbd__avatar--event { background: linear-gradient(135deg, #10B981, #047857); } .wbd__avatar--admin { background: linear-gradient(135deg, #7B61FF, #4F35CC); } .wbd__greeting { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; margin: 0 0 2px; } .wbd__subtitle { font-size: 13px; color: var(--wbd-text-muted); margin: 0; } .wbd__header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wbd__credit-badge { background: var(--wbd-accent)1a; color: var(--wbd-accent); border: 1px solid var(--wbd-accent)44; border-radius: 20px; padding: 6px 16px; font-size: 13px; } .wbd__credit-badge--event { background: #10B98118; color: var(--wbd-green); border-color: #10B98144; } /* ── Stats strip ── */ .wbd__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .wbd__stats--4 { grid-template-columns: repeat(4, 1fr); } .wbd__stat { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 24px 28px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--wbd-shadow); } .wbd__stat-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--wbd-accent); } .wbd__stat-num--warning { color: var(--wbd-warning); } .wbd__stat-num--green { color: var(--wbd-green); } .wbd__stat-label { font-size: 12px; color: var(--wbd-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* ── Tabs ── */ .wbd__tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--wbd-border); margin-bottom: 28px; } .wbd__tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 13px 22px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--wbd-text-muted); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .2s; border-radius: 6px 6px 0 0; } .wbd__tab:hover { color: var(--wbd-text); background: var(--wbd-muted); } .wbd__tab--active { color: var(--wbd-accent); border-bottom-color: var(--wbd-accent); font-weight: 600; } .wbd__tab-badge { background: var(--wbd-muted); color: var(--wbd-text-muted); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .wbd__tab-badge--warning { background: #F59E0B1a; color: var(--wbd-warning); } /* ── Panels ── */ .wbd__panel { display: none; } .wbd__panel--active { display: block; } /* ── Tables ── */ .wbd__table-wrap { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); overflow: auto; box-shadow: var(--wbd-shadow); } .wbd__table { width: 100%; border-collapse: collapse; } .wbd__table thead tr { background: var(--wbd-muted); } .wbd__table th { padding: 13px 18px; text-align: left; font-size: 11px; font-weight: 700; color: var(--wbd-text-muted); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--wbd-border); } .wbd__table td { padding: 15px 18px; font-size: 13px; color: var(--wbd-text); border-bottom: 1px solid var(--wbd-border); vertical-align: middle; } .wbd__table tbody tr:last-child td { border-bottom: none; } .wbd__table tbody tr:hover { background: var(--wbd-muted); } .wbd__td--title { font-weight: 600; } .wbd__td-sub { display: block; font-size: 11px; color: var(--wbd-text-muted); font-weight: 400; margin-top: 2px; } .wbd__td-link { color: var(--wbd-accent); font-size: 12px; margin-left: 6px; } .wbd__td--pay { font-weight: 600; color: var(--wbd-accent); font-family: 'Cormorant Garamond', serif; font-size: 16px; } .wbd__td--date { font-size: 12px; color: var(--wbd-text-muted); } .wbd__td--email{ font-size: 12px; color: var(--wbd-text-muted); } .wbd__td--actions { white-space: nowrap; } /* ── Status badges ── */ .wbd__status { display: inline-block; border-radius: 20px; padding: 3px 12px; font-size: 11px; font-weight: 600; } .wbd__status--active, .wbd__status--interview-scheduled { background: #10B98118; color: var(--wbd-green); } .wbd__status--pending-review, .wbd__status--under-review { background: #F59E0B18; color: var(--wbd-warning); } .wbd__status--draft, .wbd__status--viewed { background: #0EA5E918; color: #0EA5E9; } .wbd__status--rejected { background: #EF444418; color: var(--wbd-red); } /* Type badges */ .wbd__type-badge { display: inline-block; border-radius: 10px; padding: 3px 10px; font-size: 11px; font-weight: 600; } .wbd__type-badge--job { background: #7B61FF22; color: #7B61FF; } .wbd__type-badge--event { background: #10B98122; color: var(--wbd-green); } /* ── Buttons ── */ .wbd__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border-radius: var(--wbd-radius-sm); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; border: 1px solid transparent; } .wbd__btn--gold { background: var(--wbd-accent); color: #fff; border-color: var(--wbd-accent); } .wbd__btn--gold:hover { background: var(--wbd-accent-dark); border-color: var(--wbd-accent-dark); } .wbd__btn--ghost { background: none; border-color: var(--wbd-border); color: var(--wbd-text-muted); } .wbd__btn--ghost:hover { border-color: var(--wbd-accent); color: var(--wbd-accent); } .wbd__btn--approve { background: #10B98118; color: var(--wbd-green); border-color: #10B98144; } .wbd__btn--approve:hover { background: var(--wbd-green); color: #fff; } .wbd__btn--reject { background: #EF444418; color: var(--wbd-red); border-color: #EF444444; } .wbd__btn--reject:hover { background: var(--wbd-red); color: #fff; } .wbd__btn--sm { padding: 5px 12px; font-size: 12px; } .wbd__btn--full { width: 100%; } .wbd__btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Forms ── */ .wbd__form { display: flex; flex-direction: column; gap: 20px; width: 100%; } .wbd__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wbd__form-row--3 { grid-template-columns: 1fr 1fr 1fr; } .wbd__form-group { display: flex; flex-direction: column; gap: 6px; } .wbd__form-group label { font-size: 12px; font-weight: 600; color: var(--wbd-text-muted); text-transform: uppercase; letter-spacing: .06em; } .wbd__form-group input, .wbd__form-group select, .wbd__form-group textarea { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); padding: 11px 14px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--wbd-text); outline: none; transition: border-color .2s; } .wbd__form-group input:focus, .wbd__form-group select:focus, .wbd__form-group textarea:focus { border-color: var(--wbd-accent); } .wbd__form-group input:disabled { background: var(--wbd-muted); cursor: not-allowed; } .wbd__form-group textarea { resize: vertical; line-height: 1.6; } .wbd__form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wbd__form-msg { font-size: 13px; font-weight: 500; } .wbd__form-msg.success { color: var(--wbd-green); } .wbd__form-msg.error { color: var(--wbd-red); } .wbd__form-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--wbd-text); margin: 0 0 20px; } /* ── Inline form panel ── */ .wbd__inline-form { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 32px 40px; margin-bottom: 24px; box-shadow: var(--wbd-shadow); } .wbd__inline-form form { display: flex; flex-direction: column; gap: 18px; } /* ── Packages grid ── */ .wbd__packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 4px; } .wbd__package { background: var(--wbd-card); border: 2px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 32px 28px; position: relative; transition: all .2s; box-shadow: var(--wbd-shadow); } .wbd__package--featured { border-color: var(--wbd-accent); box-shadow: 0 0 0 4px var(--wbd-accent)1a, var(--wbd-shadow-lg); } .wbd__package-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--wbd-accent); color: #fff; border-radius: 10px; padding: 3px 14px; font-size: 10px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; } .wbd__package-name { font-size: 13px; font-weight: 600; color: var(--wbd-text-muted); margin: 0 0 4px; } .wbd__package-price { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 700; color: var(--wbd-text); line-height: 1; } .wbd__package-credits { font-size: 13px; color: var(--wbd-accent); font-weight: 600; margin: 4px 0 16px; } .wbd__package-features { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--wbd-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .wbd__package-features li { font-size: 12px; color: var(--wbd-text-muted); display: flex; align-items: flex-start; gap: 8px; } .wbd__package-features li::before { content: '✓'; color: var(--wbd-accent); font-weight: 700; flex-shrink: 0; } /* ── Jobs grid (saved) ── */ .wbd__jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .wbd__job-card { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 24px; box-shadow: var(--wbd-shadow); display: flex; flex-direction: column; gap: 8px; } .wbd__job-card-top { display: flex; justify-content: space-between; align-items: flex-start; } .wbd__job-cat { border-radius: 20px; padding: 3px 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--wbd-accent)18; color: var(--wbd-accent); } .wbd__job-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--wbd-text); margin: 4px 0 0; } .wbd__job-title a { color: inherit; text-decoration: none; } .wbd__job-title a:hover { color: var(--wbd-accent); } .wbd__job-meta { font-size: 13px; color: var(--wbd-text-muted); margin: 0; } .wbd__job-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wbd-border); } .wbd__job-pay { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--wbd-accent); } .wbd__unsave { background: none; border: none; cursor: pointer; color: var(--wbd-text-muted); font-size: 14px; padding: 4px; } .wbd__unsave:hover { color: var(--wbd-red); } /* ── Notices ── */ .wbd__notice { border-radius: var(--wbd-radius-sm); padding: 14px 18px; font-size: 13px; margin-bottom: 20px; } .wbd__notice--warning { background: #F59E0B18; border: 1px solid #F59E0B44; color: var(--wbd-text); } .wbd__notice--warning a { color: var(--wbd-accent); font-weight: 600; } /* ── Empty state ── */ .wbd__empty { text-align: center; padding: 80px 32px; color: var(--wbd-text-muted); font-size: 14px; } .wbd__empty-icon { font-size: 40px; margin-bottom: 12px; } .wbd__empty a { color: var(--wbd-accent); font-weight: 600; } /* ── Revenue total ── */ .wbd__revenue-total { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--wbd-border); font-size: 14px; color: var(--wbd-text-muted); } .wbd__revenue-total strong { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 700; color: var(--wbd-accent); } /* ── Login notice ── */ .wb-login-notice, .wb-access-denied { background: var(--wbd-muted); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 24px; text-align: center; font-size: 15px; color: var(--wbd-text-muted); } .wb-login-notice a, .wb-access-denied a { color: var(--wbd-accent); font-weight: 600; } /* ── Responsive ── */ /* ---- Repeatable entries (experience / education) ---- */ .wbd__repeatable { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .wbd__repeat-entry { background: var(--wbd-muted); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .wbd__repeat-remove { align-self: flex-start; background: none; border: 1px solid var(--wbd-red); color: var(--wbd-red); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: background .15s; } .wbd__repeat-remove:hover { background: var(--wbd-red); color: #fff; } .wbd__form-group--check { justify-content: flex-end; padding-bottom: 4px; } .wbd__form-group--check label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } /* ---- Resume upload ---- */ .wbd__resume-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wbd__upload-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--wbd-muted); border: 1px solid var(--wbd-border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; color: var(--wbd-text); } .wbd__upload-btn:hover { background: var(--wbd-border); } .wbd__resume-status { font-size: 12px; color: var(--wbd-text-muted); } .wbd__resume-link { color: var(--wbd-accent); text-decoration: none; } .wbd__resume-link:hover { text-decoration: underline; } @media (max-width: 1280px) { .wb-app__body { padding: 32px 32px 64px; } } @media (max-width: 1024px) { .wb-app__body { padding: 28px 24px 56px; } .wbd__stats--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .wb-app__body { padding: 20px 16px 48px; } .wbd__header { flex-direction: column; align-items: flex-start; padding: 20px 24px; } .wbd__stats { grid-template-columns: repeat(2, 1fr); } .wbd__stats--4 { grid-template-columns: repeat(2, 1fr); } .wbd__packages { grid-template-columns: 1fr; } .wbd__form-row, .wbd__form-row--3 { grid-template-columns: 1fr; } .wbd__tabs { flex-wrap: wrap; } .wbd__table { font-size: 12px; } .wbd__table th, .wbd__table td { padding: 10px 12px; } .wbd__inline-form { padding: 20px 24px; } } @media (max-width: 480px) { .wbd__stats { grid-template-columns: 1fr 1fr; } .wbd__header { padding: 16px 20px; } .wbd__inline-form{ padding: 16px 20px; } } /* ── 5-col stats (admin) ── */ .wbd__stats--5 { grid-template-columns: repeat(5, 1fr); } /* ── Section headings within panels ── */ .wbd__section-heading { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--wbd-text); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } @media (max-width: 1024px) { .wbd__stats--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .wbd__stats--5 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Employer Dashboard v2 — sidebar layout + job cards ============================================================ */ /* ── Expiry banner ── */ .wbd__expiry-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #F59E0B18; border: 1px solid #F59E0B55; border-radius: var(--wbd-radius-sm); padding: 12px 20px; margin-bottom: 20px; font-size: 13px; color: var(--wbd-text); } .wbd__expiry-icon { font-size: 16px; flex-shrink: 0; } .wbd__expiry-cta { margin-left: auto; color: var(--wbd-warning); font-weight: 600; white-space: nowrap; } /* ── Two-column layout ── */ .wbd__layout { display: flex; align-items: flex-start; gap: 28px; } .wbd__sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--wb-nav-h, 72px) + 20px); } .wbd__main { flex: 1; min-width: 0; } /* ── Sidebar profile block ── */ .wbd__sidebar-profile { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--wbd-shadow); } .wbd__sidebar-info { min-width: 0; } .wbd__sidebar-name { font-weight: 700; font-size: 14px; color: var(--wbd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd__sidebar-sub { font-size: 12px; color: var(--wbd-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Credit progress bar ── */ .wbd__credit-bar-wrap { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 16px 20px; box-shadow: var(--wbd-shadow); } .wbd__credit-bar-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--wbd-text-muted); margin-bottom: 10px; } .wbd__credit-bar-header strong { color: var(--wbd-text); } .wbd__credit-bar { height: 6px; background: var(--wbd-muted); border-radius: 3px; overflow: hidden; } .wbd__credit-bar-fill { height: 100%; background: linear-gradient(90deg, var(--wbd-accent), var(--wbd-accent-dark)); border-radius: 3px; transition: width .5s ease; min-width: 4px; } .wbd__credit-bar-used { font-size: 11px; color: var(--wbd-text-muted); margin-top: 8px; text-align: right; } /* ── Sidebar nav ── */ .wbd__sidenav { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); overflow: hidden; box-shadow: var(--wbd-shadow); } .wbd__sidenav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; background: none; border: none; border-bottom: 1px solid var(--wbd-border); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--wbd-text-muted); cursor: pointer; text-align: left; transition: all .15s; } .wbd__sidenav-item:last-child { border-bottom: none; } .wbd__sidenav-item:hover { background: var(--wbd-muted); color: var(--wbd-text); } .wbd__sidenav-item--active { background: var(--wbd-accent)12; color: var(--wbd-accent); font-weight: 600; } .wbd__sidenav-item--active:hover { background: var(--wbd-accent)18; } .wbd__sidenav-icon { font-size: 15px; flex-shrink: 0; } .wbd__sidenav-badge { margin-left: auto; background: var(--wbd-muted); color: var(--wbd-text-muted); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .wbd__sidenav-badge--green { background: #10B98118; color: var(--wbd-green); } .wbd__sidenav-badge--warning { background: #F59E0B18; color: var(--wbd-warning); } /* ── Sidebar CTA ── */ .wbd__sidebar-cta { display: flex; flex-direction: column; gap: 8px; } .wbd__sidebar-cta-hint { font-size: 12px; text-align: center; color: var(--wbd-text-muted); margin: 0; } .wbd__sidebar-cta-hint a { color: var(--wbd-accent); font-weight: 600; } /* ── Panel header ── */ .wbd__panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .wbd__panel-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--wbd-text); margin: 0; } .wbd__notice-inline { font-size: 12px; color: var(--wbd-warning); background: #F59E0B12; border: 1px solid #F59E0B33; border-radius: 6px; padding: 4px 12px; } /* ── Job cards grid ── */ .wbd__job-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .wbd__jcard { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 22px 24px; box-shadow: var(--wbd-shadow); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, border-color .2s; } .wbd__jcard:hover { box-shadow: var(--wbd-shadow-lg); border-color: var(--wbd-accent)44; } .wbd__jcard--urgent { border-left: 3px solid var(--wbd-warning); } .wbd__jcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wbd__jcard-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--wbd-text-muted); background: var(--wbd-muted); border-radius: 6px; padding: 3px 10px; } .wbd__jcard-title { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 700; color: var(--wbd-text); margin: 0; line-height: 1.2; } .wbd__jcard-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--wbd-text-muted); } .wbd__jcard-pay { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 700; color: var(--wbd-accent); } .wbd__jcard-stats { display: flex; gap: 0; border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); overflow: hidden; margin-top: 4px; } .wbd__jcard-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 8px; border-right: 1px solid var(--wbd-border); background: var(--wbd-muted); } .wbd__jcard-stat:last-child { border-right: none; } .wbd__jcard-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; line-height: 1; color: var(--wbd-text); } .wbd__jcard-stat-num--green { color: var(--wbd-green); } .wbd__jcard-stat-num--warn { color: var(--wbd-warning); } .wbd__jcard-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--wbd-text-muted); font-weight: 600; margin-top: 3px; } .wbd__jcard-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* ── Applicant drawer ── */ .wbd__jcard-drawer { border-top: 1px solid var(--wbd-border); margin: 0 -24px -22px; padding: 20px 24px; background: var(--wbd-muted); border-radius: 0 0 var(--wbd-radius) var(--wbd-radius); } .wbd__jcard-drawer-inner { display: flex; flex-direction: column; gap: 12px; } /* ── Applicant cards (drawer + inbox) ── */ .wbd__applicant-card { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .wbd__applicant-header { display: flex; align-items: flex-start; gap: 10px; } .wbd__applicant-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--wbd-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .wbd__applicant-info { flex: 1; min-width: 0; } .wbd__applicant-name { font-size: 14px; font-weight: 600; color: var(--wbd-text); } .wbd__applicant-contact { font-size: 12px; color: var(--wbd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd__applicant-date { font-size: 11px; color: var(--wbd-text-muted); white-space: nowrap; margin-left: auto; padding-top: 2px; } .wbd__ameta { display: flex; flex-wrap: wrap; gap: 4px; } .wbd__ameta-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--wbd-muted); color: var(--wbd-text-muted); display: inline-flex; align-items: center; gap: 3px; } .wbd__askills { display: flex; flex-wrap: wrap; gap: 4px; } .wbd__skill-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--wbd-accent)18; color: var(--wbd-accent); font-weight: 500; } .wbd__applicant-bio { font-size: 12px; color: var(--wbd-text-muted); line-height: 1.5; } .wbd__applicant-links { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Applicants inbox tab ── */ .wbd__inbox-group { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); overflow: hidden; margin-bottom: 16px; box-shadow: var(--wbd-shadow); } .wbd__inbox-group-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; transition: background .15s; border-bottom: 1px solid var(--wbd-border); } .wbd__inbox-group-header:hover { background: var(--wbd-muted); } .wbd__inbox-group-header.open { background: var(--wbd-muted); } .wbd__inbox-job-title { font-weight: 600; font-size: 14px; flex: 1; } .wbd__inbox-count { font-size: 12px; background: var(--wbd-accent)18; color: var(--wbd-accent); border-radius: 10px; padding: 2px 10px; font-weight: 600; } .wbd__inbox-toggle { font-size: 11px; color: var(--wbd-text-muted); transition: transform .2s; } .wbd__inbox-group-header.open .wbd__inbox-toggle { transform: rotate(180deg); } .wbd__inbox-applicants { display: none; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .wbd__inbox-loading { grid-column: 1/-1; text-align: center; padding: 20px; color: var(--wbd-text-muted); font-size: 13px; } /* ── Package improvements ── */ .wbd__package-per-post { font-size: 12px; color: var(--wbd-text-muted); margin: 0 0 4px; } .wbd__package-savings { display: inline-block; background: #10B98118; color: var(--wbd-green); border: 1px solid #10B98133; border-radius: 6px; padding: 2px 10px; font-size: 11px; font-weight: 700; margin-bottom: 8px; } .wbd__package-badge--recommend { background: var(--wbd-accent); color: #fff; } .wbd__credits-footer { text-align: center; font-size: 12px; color: var(--wbd-text-muted); margin-top: 24px; } /* ── Form sections ── */ .wbd__form-section { display: flex; flex-direction: column; gap: 16px; } .wbd__form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wbd-text-muted); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--wbd-border); } /* ── Onboarding checklist ── */ .wbd__onboarding { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 28px 32px; margin-bottom: 24px; box-shadow: var(--wbd-shadow); } .wbd__onboarding-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--wbd-text); } .wbd__onboarding-steps { display: flex; flex-direction: column; gap: 16px; } .wbd__onboarding-step { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); } .wbd__onboarding-step--done { border-color: #10B98133; background: #10B98108; } .wbd__onboarding-step--done .wbd__onboarding-check { background: var(--wbd-green); } .wbd__onboarding-step--locked { opacity: .5; } .wbd__onboarding-check { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--wbd-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .wbd__onboarding-step strong { display: block; font-size: 14px; margin-bottom: 4px; } .wbd__onboarding-step p { font-size: 12px; color: var(--wbd-text-muted); margin: 0 0 8px; line-height: 1.5; } .wbd__onboarding-link { font-size: 12px; color: var(--wbd-accent); font-weight: 600; } /* ── Responsive: sidebar collapses ── */ @media (max-width: 1024px) { .wbd__sidebar { width: 220px; } } @media (max-width: 768px) { .wbd__layout { flex-direction: column; } .wbd__sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; gap: 12px; } .wbd__sidebar-profile { flex: 1; min-width: 200px; } .wbd__credit-bar-wrap { flex: 1; min-width: 200px; } .wbd__sidenav { display: flex; flex: 100%; overflow-x: auto; border-radius: var(--wbd-radius-sm); } .wbd__sidenav-item { border-bottom: none; border-right: 1px solid var(--wbd-border); white-space: nowrap; flex-shrink: 0; } .wbd__sidenav-item:last-child { border-right: none; } .wbd__sidebar-cta { flex: 100%; } .wbd__job-cards-grid { grid-template-columns: 1fr; } .wbd__inbox-applicants { grid-template-columns: 1fr; } } @media (max-width: 480px) { .wbd__sidebar { gap: 10px; } .wbd__sidebar-profile, .wbd__credit-bar-wrap { flex: 100%; } .wbd__onboarding { padding: 20px; } } /* ============================================================ Candidate + shared improvements — v2 ============================================================ */ /* ── Onboarding close button ── */ .wbd__onboarding { position: relative; } .wbd__onboarding-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 16px; color: var(--wbd-text-muted); cursor: pointer; line-height: 1; padding: 4px; transition: color .15s; } .wbd__onboarding-close:hover { color: var(--wbd-text); } /* ── Edit job modal ── */ .wbd__edit-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .wbd__edit-modal-inner { background: var(--wbd-card); border-radius: var(--wbd-radius); width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto; box-shadow: var(--wbd-shadow-lg); padding: 32px 36px; } .wbd__edit-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .wbd__edit-modal-close { background: none; border: none; font-size: 20px; color: var(--wbd-text-muted); cursor: pointer; padding: 4px; } .wbd__edit-modal-close:hover { color: var(--wbd-text); } /* ── Application cards ── */ .wbd__app-cards { display: flex; flex-direction: column; gap: 16px; } .wbd__app-card { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 20px 24px; box-shadow: var(--wbd-shadow); display: flex; flex-direction: column; gap: 12px; } .wbd__app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .wbd__app-card-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; margin: 0 0 3px; } .wbd__app-card-meta { font-size: 13px; color: var(--wbd-text-muted); } .wbd__app-card-pay { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 700; color: var(--wbd-accent); } .wbd__app-card-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wbd__app-card-date { font-size: 12px; color: var(--wbd-text-muted); margin-right: auto; } /* ── Application status timeline ── */ .wbd__app-timeline { display: flex; align-items: flex-start; gap: 0; padding: 4px 0; } .wbd__app-timeline-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; } .wbd__app-timeline-step:not(:last-child)::after { content: ''; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--wbd-border); z-index: 0; } .wbd__app-timeline-step--done::after { background: var(--wbd-accent) !important; } .wbd__app-timeline-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--wbd-border); border: 2px solid var(--wbd-border); position: relative; z-index: 1; flex-shrink: 0; transition: background .2s; } .wbd__app-timeline-step--done .wbd__app-timeline-dot { background: var(--wbd-accent); border-color: var(--wbd-accent); } .wbd__app-timeline-step--current .wbd__app-timeline-dot { background: var(--wbd-warning); border-color: var(--wbd-warning); box-shadow: 0 0 0 3px var(--wbd-warning)33; } .wbd__app-timeline-label { font-size: 10px; color: var(--wbd-text-muted); margin-top: 5px; line-height: 1.3; max-width: 60px; } .wbd__app-timeline-step--done .wbd__app-timeline-label { color: var(--wbd-accent); font-weight: 600; } .wbd__app-timeline-step--current .wbd__app-timeline-label { color: var(--wbd-warning); font-weight: 600; } /* ── Application notes ── */ .wbd__app-note-wrap { border-top: 1px solid var(--wbd-border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .wbd__app-note-input { width: 100%; padding: 10px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--wbd-muted); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); resize: vertical; color: var(--wbd-text); min-height: 70px; } .wbd__app-note-msg { font-size: 12px; color: var(--wbd-green); } /* ── Filter bar ── */ .wbd__filter-bar { display: flex; gap: 6px; flex-wrap: wrap; } .wbd__filter-btn { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--wbd-muted); border: 1px solid var(--wbd-border); color: var(--wbd-text-muted); cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; } .wbd__filter-btn:hover, .wbd__filter-btn--active { background: var(--wbd-accent); border-color: var(--wbd-accent); color: #fff; } /* ── Profile strength chip ── */ .wbd__strength-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wbd-text-muted); } .wbd__strength-mini { width: 60px; height: 6px; background: var(--wbd-muted); border-radius: 3px; overflow: hidden; position: relative; } .wbd__strength-mini::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: var(--pct); background: var(--wbd-accent); border-radius: 3px; transition: width .4s; } /* ── Profile tips bar ── */ .wbd__profile-tips { background: var(--wbd-accent)10; border: 1px solid var(--wbd-accent)33; border-radius: var(--wbd-radius-sm); padding: 10px 16px; font-size: 12px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wbd__profile-tip { background: var(--wbd-accent)18; border-radius: 6px; padding: 3px 10px; color: var(--wbd-accent); font-weight: 600; } /* ── Job alerts ── */ .wbd__alerts-card { background: var(--wbd-card); border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius); padding: 28px 32px; box-shadow: var(--wbd-shadow); max-width: 600px; } .wbd__alerts-desc { font-size: 14px; color: var(--wbd-text-muted); margin: 0 0 20px; line-height: 1.6; } .wbd__alerts-toggle-row { display: flex; align-items: center; margin-bottom: 16px; } .wbd__toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 500; } .wbd__toggle-label input { display: none; } .wbd__toggle-switch { width: 40px; height: 22px; background: var(--wbd-border); border-radius: 11px; position: relative; transition: background .2s; flex-shrink: 0; } .wbd__toggle-switch::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .wbd__toggle-label input:checked ~ .wbd__toggle-switch { background: var(--wbd-accent); } .wbd__toggle-label input:checked ~ .wbd__toggle-switch::after { left: 21px; } /* ── Candidate avatar colour ── */ .wbd__avatar--candidate { background: linear-gradient(135deg, #7B61FF, #4F35CC); } /* ── Responsive ── */ @media (max-width: 768px) { .wbd__app-timeline-label { font-size: 9px; max-width: 48px; } .wbd__edit-modal-inner { padding: 20px; } .wbd__alerts-card { padding: 20px; } } /* ── Admin panel extras ── */ .wbd__td-preview { font-size: 12px; color: var(--wbd-text-muted); margin-top: 4px; max-width: 320px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wbd__td-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 4px; background: var(--wbd-accent)18; color: var(--wbd-accent); margin-top: 3px; margin-right: 4px; } .wbd__td-badge--blue { background: #0EA5E918; color: #0EA5E9; } .wbd__td--warn { color: var(--wbd-warning) !important; font-weight: 600; } .wbd__admin-search { padding: 8px 14px; border: 1px solid var(--wbd-border); border-radius: var(--wbd-radius-sm); font-family: 'DM Sans', sans-serif; font-size: 13px; background: var(--wbd-card); color: var(--wbd-text); outline: none; width: 220px; } .wbd__admin-search:focus { border-color: var(--wbd-accent); } /* ---- SVG icon sizing ---- */ .wbd__sidenav-icon svg { width: 16px; height: 16px; display: block; flex-shrink: 0; } .wbd__empty-icon svg { width: 48px; height: 48px; stroke: var(--wbd-border); } .wbd__expiry-icon svg { width: 16px; height: 16px; flex-shrink: 0; } .wbd__edit-modal-close svg, .wbd__onboarding-close svg { width: 16px; height: 16px; display: block; } .wbd__check-svg svg { width: 14px; height: 14px; display: inline-block; vertical-align: middle; } .wbd__jcard-meta svg, .wbd__ameta-chip svg { width: 12px; height: 12px; flex-shrink: 0; } .wbd__btn svg { width: 13px; height: 13px; display: inline-block; vertical-align: middle; margin-right: 4px; flex-shrink: 0; } .wbd__credits-footer svg { width: 13px; height: 13px; display: inline-block; vertical-align: middle; margin-right: 3px; } /* ── My Tickets tab ─────────────────────────────────────── */ #tab-my-tickets .wbd__table td:nth-child(5) { font-family: monospace; font-size: 12px; letter-spacing: .06em; color: var(--wbd-accent); }