/* ============================================================ Portal Common Design System - Shared styles for Freelance & Enterprise portals - Theme switching via data-theme attribute on ============================================================ */ /* ── CSS Variables ── */ :root { /* Greyscale & shared tokens (assign-navi準拠) */ --portal-text: rgba(0,0,0,0.87); --portal-text-sub: rgba(84,110,122,0.87); --portal-text-label: #999; --portal-text-muted: #bbb; --portal-bg: #eee; --portal-card-bg: #fff; --portal-border: #ddd; --portal-border-light: #eee; --portal-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12); --portal-shadow-md: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12); --portal-shadow-hover: 0 5px 11px rgba(0,0,0,0.18), 0 4px 15px rgba(0,0,0,0.15); --portal-radius-sm: 4px; --portal-radius: 4px; --portal-radius-md: 4px; --portal-radius-lg: 4px; --portal-radius-xl: 8px; --portal-radius-pill: 999px; } /* Theme: Freelance */ [data-theme="freelance"] { --portal-primary: #43b89c; --portal-primary-dark: #3a9d8f; --portal-primary-rgb: 67,184,156; } /* Theme: Enterprise */ [data-theme="enterprise"] { --portal-primary: #ff9500; --portal-primary-dark: #e68600; --portal-primary-rgb: 255,149,0; } /* ── Base / Reset ── */ * { box-sizing: border-box; } html { height: 100%; overflow-x: hidden; } body { min-height: 100%; font-family: "Noto Sans JP", "Noto Sans Japanese", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; background-color: var(--portal-bg); color: var(--portal-text); } /* ============================================================ LAYOUT: Header / Content / Footer ============================================================ */ .portal-header { background: var(--portal-card-bg); border-bottom: 1px solid rgba(0,0,0,0.08); padding: 0.75rem 0; position: sticky; top: 0; z-index: 1030; } .portal-header .brand { font-size: 1.125rem; font-weight: 700; color: var(--portal-text); text-decoration: none; } .portal-header .brand:hover { color: var(--portal-primary); } .portal-header .nav-link { font-size: 1rem; color: var(--portal-text-sub); text-decoration: none; padding: 0.25rem 0.75rem; } .portal-header .nav-link:hover { color: var(--portal-text); } .portal-header .nav-link.active { color: var(--portal-primary); font-weight: 600; } .portal-content { min-height: calc(100vh - 120px); padding: 0 0 2rem; } .portal-footer { padding: 1.5rem 0; text-align: center; color: var(--portal-text-label); font-size: 0.8125rem; } /* ============================================================ CARDS ============================================================ */ /* Base card */ .portal-card { background: var(--portal-card-bg); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow); padding: 1.5rem; } .portal-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; color: var(--portal-text); } /* Form-width card (max 680px) */ .portal-card-form { max-width: 680px; margin: 0 auto; background: var(--portal-card-bg); border-radius: var(--portal-radius-xl); box-shadow: var(--portal-shadow-md); padding: 2.5rem; } .portal-card-form h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .portal-card-form .lead { color: var(--portal-text-label); font-size: 1rem; margin-bottom: 2rem; } /* Wide form card (max 860px) — profile editing */ .portal-card-form-wide { max-width: 860px; margin: 0 auto; background: var(--portal-card-bg); border-radius: var(--portal-radius-xl); box-shadow: var(--portal-shadow-md); padding: 2.5rem; } .portal-card-form-wide .lead { color: var(--portal-text-label); font-size: 1rem; margin-bottom: 2rem; } /* Checkbox tag grid */ .portal-check-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .portal-check-tag { display: inline-flex; align-items: center; cursor: pointer; margin: 0; } .portal-check-tag input[type="checkbox"] { display: none; } .portal-check-tag span { display: inline-block; padding: 0.35rem 0.85rem; border: 1.5px solid var(--portal-border); border-radius: 20px; font-size: 0.9375rem; color: var(--portal-text-label); background: var(--portal-card-bg); transition: all 0.15s; user-select: none; } .portal-check-tag input[type="checkbox"]:checked + span { background: var(--portal-primary); color: #fff; border-color: var(--portal-primary); } .portal-check-tag:hover span { border-color: var(--portal-primary); } /* Character counter */ .char-counter-wrap { position: relative; } .char-counter { text-align: right; font-size: 0.8125rem; color: var(--portal-text-label); margin-top: 0.25rem; } /* Login card (max 440px) */ .portal-card-login { max-width: 440px; margin: 3rem auto 0; background: var(--portal-card-bg); border-radius: var(--portal-radius-xl); box-shadow: var(--portal-shadow-md); padding: 2.5rem; } .portal-card-login h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; text-align: center; } .portal-card-login .lead { color: var(--portal-text-label); font-size: 0.875rem; margin-bottom: 2rem; text-align: center; } /* Detail card (max 860px) */ .portal-card-detail { background: var(--portal-card-bg); border-radius: var(--portal-radius-md); box-shadow: var(--portal-shadow); padding: 1.5rem 2rem; margin-bottom: 1rem; max-width: 1020px; margin-left: auto; margin-right: auto; } /* ============================================================ BUTTONS ============================================================ */ .portal-btn { background: var(--portal-primary); color: #fff; border: none; font-weight: 600; border-radius: var(--portal-radius); padding: 0.625rem 1.5rem; font-size: 0.9375rem; cursor: pointer; transition: background 0.15s; display: inline-block; text-decoration: none; text-align: center; } .portal-btn:hover { background: var(--portal-primary-dark); color: #fff; } .portal-btn-lg { padding: 0.75rem 2rem; font-size: 1rem; } .portal-btn-sm { padding: 0.5rem 1rem; font-size: 1rem; } .portal-btn-outline { background: transparent; color: var(--portal-primary); border: 2px solid var(--portal-primary); font-weight: 600; border-radius: var(--portal-radius); padding: 0.5rem 1.25rem; font-size: 0.9375rem; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-block; text-decoration: none; text-align: center; } .portal-btn-outline:hover { background: rgba(var(--portal-primary-rgb), 0.08); color: var(--portal-primary-dark); } /* ============================================================ BREADCRUMB BAR (plain row above the banner) ============================================================ */ .portal-breadcrumb-bar { background: var(--portal-card-bg); border-bottom: 1px solid var(--portal-border); padding: 0.5rem 1.25rem; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .portal-breadcrumb-bar .portal-breadcrumb { font-size: 0.857rem; color: var(--portal-text-sub); } .portal-breadcrumb-bar .portal-breadcrumb a { color: var(--portal-primary); text-decoration: none; } .portal-breadcrumb-bar .portal-breadcrumb a:hover { color: var(--portal-primary-dark); text-decoration: underline; } /* ============================================================ PAGE HEADER (gradient banner — h1 only, full-width) ============================================================ */ .portal-page-header { background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%); border-radius: 0; padding: 0.75rem 1.25rem; min-height: 2.75rem; display: flex; align-items: center; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-bottom: 1.5rem; color: #fff; } .portal-page-header h1 { font-size: 1.6rem; font-weight: 400; margin: 0; line-height: 1.2; flex: 1; min-width: 0; } .portal-page-header .br-actions-btn { background: none; border: none; color: #fff; font-size: 1.25rem; width: auto; height: auto; padding: 0; line-height: 1; cursor: pointer; opacity: 0.85; } .portal-page-header .br-actions-btn:hover { opacity: 1; } .portal-page-header > .portal-btn { white-space: nowrap; flex-shrink: 0; padding: 0.3rem 1.25rem; font-size: 0.875rem; } /* ============================================================ SECTION HEADER (left border accent) ============================================================ */ .portal-section-header { font-size: 1.125rem; font-weight: 700; color: var(--portal-text); padding-left: 0.75rem; margin-bottom: 1rem; margin-top: 0.5rem; border-left: 3px solid var(--portal-primary); } /* ============================================================ LAYOUT: Sidebar + Main (2-column) ============================================================ */ .portal-layout { display: flex; gap: 1.5rem; align-items: flex-start; } .portal-layout .portal-main { flex: 1; min-width: 0; } @media (max-width: 768px) { .portal-layout { flex-direction: column; align-items: stretch; } .portal-layout .portal-sidebar { width: 100% !important; min-width: unset !important; position: static !important; } } /* ============================================================ SIDEBAR (filter panel) ============================================================ */ .portal-sidebar { width: 300px; min-width: 300px; flex-shrink: 0; background: var(--portal-card-bg); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow); padding: 1.5rem; position: sticky; top: 1rem; } .portal-filter-section { margin-bottom: 1.25rem; } .portal-filter-section:last-child { margin-bottom: 0; } .portal-filter-label { font-size: 1.143rem; font-weight: 700; color: var(--portal-text); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; } .portal-filter-label i { color: var(--portal-primary); font-size: 1rem; } .portal-filter-input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 0; font-size: 1.143rem; height: 49px; background: var(--portal-bg); } .portal-filter-input:focus { outline: none; border-color: var(--portal-primary); box-shadow: 0 0 0 2px rgba(var(--portal-primary-rgb), 0.15); } .portal-filter-check { display: flex; flex-direction: column; gap: 0.375rem; } .portal-filter-check label { display: flex; align-items: center; gap: 0.375rem; font-size: 1rem; color: var(--portal-text); cursor: pointer; } .portal-filter-check input[type="checkbox"] { accent-color: var(--portal-primary); } .portal-btn-filter { width: 100%; padding: 0.875rem; border: none; border-radius: var(--portal-radius); background: var(--portal-primary); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.15s; } .portal-btn-filter:hover { background: var(--portal-primary-dark); } .portal-filter-reset { display: block; text-align: center; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--portal-text-label); text-decoration: none; } .portal-filter-reset:hover { color: var(--portal-text); } /* ============================================================ TABLE ============================================================ */ .portal-table { width: 100%; border-collapse: collapse; font-size: 1rem; } .portal-table tr { border-bottom: 1px solid var(--portal-border-light); } .portal-table tr:last-child { border-bottom: none; } .portal-table th { color: var(--portal-primary); font-weight: 500; padding: 0.75rem 0.5rem; width: 30%; vertical-align: top; text-align: left; } .portal-table td { color: var(--portal-text); font-weight: 500; padding: 0.75rem 0.5rem; vertical-align: top; } /* ============================================================ INFO ROW (key-value pairs) ============================================================ */ .portal-info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--portal-border-light); font-size: 1rem; } .portal-info-row:last-child { border-bottom: none; } .portal-info-row .info-label { color: var(--portal-text-label); } .portal-info-row .info-value { font-weight: 500; color: var(--portal-text); } /* ============================================================ BADGES ============================================================ */ .portal-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--portal-radius-pill); font-size: 0.75rem; font-weight: 600; } .portal-badge-sm { padding: 0.2rem 0.6rem; font-size: 0.7rem; } /* Status badge colors (shared) */ .badge-approved, .badge-status-approved { background: #e8f5e9; color: #2e7d32; } .badge-pending, .badge-status-pending { background: #fff3e0; color: #e65100; } .badge-rejected, .badge-status-rejected { background: #fce4ec; color: #c62828; } .badge-applied { background: #e3f2fd; color: #1565c0; } .badge-screening { background: #fff3e0; color: #e65100; } .badge-interviewing { background: #f3e5f5; color: #7b1fa2; } .badge-offered { background: #e8f5e9; color: #2e7d32; } .badge-contracted { background: #e8f5e9; color: #1b5e20; } .badge-draft { background: #f2f2f7; color: #86868b; } .badge-open { background: #e8f5e9; color: #2e7d32; } .badge-closed { background: #fce4ec; color: #c62828; } .badge-new { background: #e3f2fd; color: #1565c0; } .badge-analyzed { background: #fff3e0; color: #e65100; } .badge-sent { background: #e8f5e9; color: #2e7d32; } /* ============================================================ STAT NUMBER ============================================================ */ .portal-stat { font-size: 2rem; font-weight: 700; color: var(--portal-primary); } .portal-stat-label { font-size: 0.875rem; color: var(--portal-text-label); } /* ============================================================ QUICK LINKS ============================================================ */ .portal-quick-links a { display: block; padding: 0.75rem 1rem; border-radius: var(--portal-radius); text-decoration: none; color: var(--portal-text); font-size: 1rem; transition: background 0.15s; } .portal-quick-links a:hover { background: var(--portal-border-light); } .portal-quick-links a i { color: var(--portal-primary); margin-right: 0.5rem; } /* ============================================================ OPPORTUNITY CARD (assign-navi style list item) ============================================================ */ .portal-opp-card { background: var(--portal-card-bg); border-bottom: 1px solid #e9ecef; padding: 1.5rem; position: relative; transition: background 0.15s; } .portal-opp-card:first-child { border-top-left-radius: var(--portal-radius-lg); border-top-right-radius: var(--portal-radius-lg); } .portal-opp-card:last-child { border-bottom: none; border-bottom-left-radius: var(--portal-radius-lg); border-bottom-right-radius: var(--portal-radius-lg); } .portal-opp-card:hover { background: #fafbfc; } /* Card header: title + meta (assign-navi accent style) */ .portal-opp-card .opp-card-header { background: rgba(var(--portal-primary-rgb), 0.1); margin: -1.5rem -1.5rem 1rem -1.5rem; padding: 1rem 1.5rem; border-radius: var(--portal-radius-lg) var(--portal-radius-lg) 0 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .portal-opp-card .opp-card-title { font-size: 1.43rem; font-weight: 300; line-height: 1.3; } .portal-opp-card .opp-card-title a { color: var(--portal-primary); text-decoration: none; } .portal-opp-card .opp-card-title a:hover { color: var(--portal-primary-dark); text-decoration: underline; } /* NEW! badge */ .portal-opp-card .badge-new-label { display: inline-block; background: var(--portal-primary); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px; margin-right: 0.375rem; vertical-align: middle; letter-spacing: 0.025em; } /* Update / registration dates */ .portal-opp-card .opp-card-meta { font-size: 1rem; color: rgb(69, 89, 101); font-weight: 300; margin-bottom: 0.5rem; } /* Description */ .portal-opp-card .opp-card-desc { font-size: 1rem; color: #3a3a3c; line-height: 1.7; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Detail grid (2-column) */ .portal-opp-card .opp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 2rem; font-size: 1rem; border-top: 1px solid var(--portal-border-light); padding-top: 0.75rem; } .portal-opp-card .opp-detail-row { display: flex; gap: 0.75rem; padding: 0.3rem 0; } .portal-opp-card .opp-detail-label { color: var(--portal-text-sub); font-weight: 700; white-space: nowrap; min-width: 5em; } .portal-opp-card .opp-detail-value { color: var(--portal-text); font-weight: 400; } /* Card message (sent message display) */ .portal-opp-card .opp-card-message { margin-top: 0.75rem; } .portal-opp-card .opp-card-message-label { font-size: 0.875rem; font-weight: 600; color: var(--portal-text-label); margin-bottom: 0.25rem; } .portal-opp-card .opp-card-message-body { background: var(--portal-bg, #f8f9fa); border-radius: var(--portal-radius-sm); padding: 0.6rem 0.85rem; font-size: 1rem; color: var(--portal-text); line-height: 1.6; white-space: pre-wrap; } /* Card actions (withdraw button etc.) */ .portal-opp-card .opp-card-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--portal-border-light); } /* Card list wrapper */ .opp-card-list { background: var(--portal-card-bg); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow); overflow: hidden; } @media (max-width: 576px) { .portal-opp-card { padding: 1rem; } .portal-opp-card .opp-card-header { margin: -1rem -1rem 0.75rem -1rem; padding: 0.75rem 1rem; } .portal-opp-card .opp-card-title { font-size: 1.1rem; } .portal-opp-card .opp-detail-grid { grid-template-columns: 1fr; } } /* ============================================================ SUMMARY BOX (key info area) ============================================================ */ .portal-summary-box { background: rgba(var(--portal-primary-rgb), 0.05); border-radius: var(--portal-radius); padding: 1.25rem 1.5rem; margin-top: 1.25rem; } .portal-summary-box .summary-price { font-size: 1.375rem; font-weight: 700; color: var(--portal-primary); margin-bottom: 0.75rem; } .portal-summary-box .summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; font-size: 1rem; } .portal-summary-box .summary-label { color: var(--portal-text-label); font-weight: 500; white-space: nowrap; } .portal-summary-box .summary-value { color: var(--portal-text); font-weight: 500; } /* ============================================================ TAGS ============================================================ */ .portal-tag { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--portal-radius-pill); font-size: 0.75rem; font-weight: 500; } .portal-tag-required { background: #e8f5e9; color: #2e7d32; } .portal-tag-preferred { background: #f3e5f5; color: #7b1fa2; } .portal-tag-feature { background: #e3f2fd; color: #1565c0; border-radius: var(--portal-radius-sm); padding: 0.25rem 0.625rem; } /* ============================================================ EMPTY STATE ============================================================ */ .portal-empty { text-align: center; padding: 3rem 1rem; color: var(--portal-text-label); } .portal-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; } /* ============================================================ NAVIGATION ============================================================ */ .portal-nav-link { font-size: 0.875rem; color: var(--portal-primary); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; } .portal-nav-link:hover { color: var(--portal-primary-dark); } .portal-breadcrumb { font-size: 0.857rem; margin-bottom: 0; } .portal-breadcrumb a { color: var(--portal-text-sub); text-decoration: none; } .portal-breadcrumb a:hover { color: var(--portal-primary); } /* ============================================================ RESULT BAR ============================================================ */ .portal-result-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; } .portal-result-bar .result-count { font-size: 0.9375rem; color: #3a3a3c; } .portal-result-bar .result-count strong { font-size: 1.25rem; font-weight: 700; color: var(--portal-text); } .portal-result-bar .sort-select { padding: 0.375rem 0.75rem; border: 1px solid #d2d2d7; border-radius: var(--portal-radius-sm); font-size: 0.8125rem; background: var(--portal-card-bg); } /* ============================================================ PAGINATION ============================================================ */ .portal-pagination { margin-top: 1.5rem; display: flex; justify-content: center; } .portal-pagination .page-link { color: var(--portal-primary); font-size: 0.875rem; } .portal-pagination .page-item.active .page-link { background: var(--portal-primary); border-color: var(--portal-primary); color: #fff; } /* ============================================================ WELCOME SECTION ============================================================ */ .portal-welcome { margin-bottom: 2rem; } .portal-welcome h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; } .portal-welcome .subtitle { color: var(--portal-text-label); font-size: 0.9375rem; } /* ============================================================ LOGIN / REGISTER footer links ============================================================ */ .portal-login-footer { text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--portal-text-label); } .portal-login-footer a { color: var(--portal-primary); text-decoration: none; } .portal-login-footer a:hover { text-decoration: underline; } /* ============================================================ FORM LABELS (shared) ============================================================ */ .portal-form-label { font-weight: 600; font-size: 0.875rem; } .portal-form-control:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(var(--portal-primary-rgb), 0.15); } .portal-form-check-input:checked { background-color: var(--portal-primary); border-color: var(--portal-primary); } /* ============================================================ APPLICATION CARD (applications list) ============================================================ */ .portal-app-card { background: var(--portal-card-bg); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: box-shadow 0.2s; } .portal-app-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .portal-app-card .app-title a { color: var(--portal-primary); font-weight: 600; font-size: 1.05rem; text-decoration: none; } .portal-app-card .app-title a:hover { text-decoration: underline; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 576px) { .portal-card-detail { padding: 1rem; } .portal-card-form { padding: 1.5rem 1rem; } .portal-card-form-wide { padding: 1.5rem 1rem; } .portal-summary-box .summary-grid { grid-template-columns: 1fr; gap: 0.375rem 0; } .portal-page-header h1 { font-size: 1.25rem; } .portal-page-header > .portal-btn { font-size: 0.875rem; padding: 0.5rem 1rem; } } /* ================================================================ Opportunity Table – shared between enterprise & freelance ================================================================ */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; } /* Filter sidebar overrides for opportunity pages */ .portal-sidebar h6 { font-size: 1rem; font-weight: 700; color: var(--portal-text); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.35rem; } .portal-sidebar .form-label { font-size: 0.875rem; font-weight: 600; color: var(--portal-text-label); margin-bottom: 0.35rem; } .portal-sidebar .form-control, .portal-sidebar .form-select { font-size: 1rem; border-radius: var(--portal-radius); border: 1px solid #e9ecef; } .portal-sidebar .form-control:focus, .portal-sidebar .form-select:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 0.2rem rgba(var(--portal-primary-rgb), 0.15); } .filter-section { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--portal-border-light); } .filter-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .filter-section h6[data-bs-toggle="collapse"] .filter-toggle-icon { transition: transform 0.2s ease; } .filter-section h6[data-bs-toggle="collapse"][aria-expanded="true"] .filter-toggle-icon { transform: rotate(180deg); } .filter-section h6[data-bs-toggle="collapse"]:hover { opacity: 0.8; } .portal-sidebar .form-check { padding-left: 1.75rem; margin-bottom: 0.35rem; } .portal-sidebar .form-check-label { font-size: 1rem; color: var(--portal-text); cursor: pointer; } .portal-sidebar .form-check-input:checked { background-color: var(--portal-primary); border-color: var(--portal-primary); } .portal-sidebar .btn-reset { font-size: 0.875rem; color: var(--portal-text-label); text-decoration: underline; cursor: pointer; border: none; background: none; padding: 0; } .portal-sidebar .btn-reset:hover { color: var(--portal-primary); } /* Result bar */ .result-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 1rem; flex-wrap: wrap; gap: 0.5rem; } .result-bar .result-count { color: var(--portal-text-label); font-weight: 500; } .result-bar .result-count strong { color: var(--portal-text); font-size: 1.714rem; font-weight: 700; } .result-bar .sort-select { padding: 0.375rem 0.75rem; border: 1px solid #d2d2d7; border-radius: var(--portal-radius-sm); font-size: 1rem; background: var(--portal-card-bg); } /* Table card wrapper */ .opp-table-card { background: var(--portal-card-bg); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow); overflow: hidden; } .opp-table { width: 100%; border-collapse: collapse; font-size: 1rem; } .opp-table th { background: var(--portal-bg); font-weight: 600; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e9ecef; font-size: 0.875rem; color: var(--portal-text-label); white-space: nowrap; } .opp-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--portal-border-light); vertical-align: middle; } .opp-table tr:last-child td { border-bottom: none; } .opp-table tr:hover { background: #fafafa; } .opp-title-link { color: var(--portal-text); text-decoration: none; font-weight: 600; font-size: 1.05rem; line-height: 1.4; } .opp-title-link:hover { color: var(--portal-primary); } .opp-subtitle { font-size: 0.9rem; color: var(--portal-text-label); margin-top: 2px; } /* Status & visibility badges (table) */ .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .status-draft { background: #f2f2f7; color: #86868b; } .status-open { background: #e8f5e9; color: #2e7d32; } .status-closed { background: #fce4ec; color: #c62828; } .status-applied { background: #e3f2fd; color: #1565c0; } .status-screening { background: #fff3e0; color: #e65100; } .status-interviewing { background: #f3e5f5; color: #7b1fa2; } .status-offered { background: #e8f5e9; color: #2e7d32; } .status-contracted { background: #e8f5e9; color: #1b5e20; } .status-rejected { background: #fce4ec; color: #c62828; } .status-withdrawn { background: #f2f2f7; color: #86868b; } .visibility-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; margin-left: 0.25rem; } .vis-public { background: #e3f2fd; color: #1565c0; } .vis-private { background: #fff3e0; color: #e65100; } /* Table cell helpers */ .deadline-text { font-size: 1rem; color: var(--portal-text); } .deadline-overdue { color: #c62828; font-weight: 600; } .memo-preview { font-size: 0.9rem; color: var(--portal-text-label); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .date-col { font-size: 0.9rem; color: var(--portal-text-label); white-space: nowrap; line-height: 1.5; } .price-range { white-space: nowrap; font-size: 0.9375rem; } /* Action buttons in table */ .action-btns { white-space: nowrap; } .action-btns .btn { padding: 0.375rem 0.75rem; font-size: 0.9rem; } /* ============================================================ MESSAGE LIST (conversation threads) ============================================================ */ .portal-msg-list { background: var(--portal-card-bg); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow); overflow: hidden; } .portal-msg-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--portal-border-light); border-left: 3px solid transparent; text-decoration: none; color: inherit; transition: background 0.15s, border-color 0.15s; } .portal-msg-row:last-child { border-bottom: none; } .portal-msg-row:hover { background: #fafbfc; } .portal-msg-row.unread { background: rgba(var(--portal-primary-rgb), 0.04); border-left-color: var(--portal-primary); } .portal-msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--portal-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; margin-top: 2px; } .portal-msg-body { flex: 1; min-width: 0; } .portal-msg-header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .portal-msg-name { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .portal-msg-status { flex-shrink: 0; } .portal-msg-opp { font-size: 0.875rem; color: var(--portal-text-label); margin-top: 0.15rem; } .portal-msg-opp i { font-size: 0.8125rem; } .portal-msg-preview { font-size: 0.9375rem; color: var(--portal-text-sub); margin-top: 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .portal-msg-meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; padding-top: 2px; } .portal-msg-time { font-size: 0.8125rem; color: var(--portal-text-label); white-space: nowrap; } .portal-msg-badge { display: inline-block; background: #dc3545; color: #fff; font-size: 0.75rem; font-weight: 700; min-width: 1.375rem; text-align: center; padding: 0.125em 0.4em; border-radius: 999px; } /* ============================================================ BUTTON VARIANTS (outline secondary / danger) ============================================================ */ .portal-btn-outline-secondary { background: transparent; color: var(--portal-text-sub); border: 1px solid var(--portal-border); font-weight: 600; border-radius: var(--portal-radius); padding: 0.5rem 1.25rem; font-size: 0.9375rem; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-block; text-decoration: none; text-align: center; } .portal-btn-outline-secondary:hover { background: #f5f5f7; color: var(--portal-text); } .portal-btn-outline.portal-btn-sm, .portal-btn-outline-secondary.portal-btn-sm { padding: 0.5rem 1rem; font-size: 1rem; } /* ============================================================ GLOBAL MOBILE RESPONSIVE OVERRIDES ============================================================ */ @media (max-width: 768px) { /* ── Message list ── */ .portal-msg-row { padding: 0.75rem; gap: 0.75rem; } .portal-msg-avatar { width: 34px; height: 34px; font-size: 0.75rem; } .portal-msg-name { font-size: 0.9375rem; } .portal-msg-opp { font-size: 0.8125rem; } .portal-msg-preview { font-size: 0.875rem; -webkit-line-clamp: 1; } .portal-msg-time { font-size: 0.75rem; } /* ── Info rows (dashboard) ── */ .portal-info-row { flex-wrap: wrap; gap: 0.15rem; } .portal-info-row .info-label { width: 100%; font-size: 0.8125rem; } /* ── Page header ── */ .portal-page-header h1 { font-size: 1.15rem; } /* ── Breadcrumb ── */ .portal-breadcrumb { font-size: 0.8125rem; } /* ── Quick links ── */ .portal-quick-links a { padding: 0.6rem 0.75rem; font-size: 0.9375rem; } /* ── Login card ── */ .portal-card-login { padding: 1.5rem 1.25rem; margin: 0 0.5rem; } .portal-card-login h1 { font-size: 1.25rem; } } @media (max-width: 576px) { /* ── Message list ── */ .portal-msg-row { padding: 0.6rem 0.5rem; gap: 0.5rem; } .portal-msg-avatar { width: 30px; height: 30px; font-size: 0.6875rem; } .portal-msg-meta { min-width: auto; } /* ── Login card ── */ .portal-card-login { padding: 1.25rem 1rem; } .portal-card-login .lead { font-size: 0.875rem; } /* ── iOS auto-zoom prevention: keep inputs at 16px minimum ── */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], textarea, select, .form-control, .form-select { font-size: max(1rem, 16px) !important; } }