/** * expert.css * The Expert Dashboard's own visual identity — loaded AFTER admin.css, and * every rule here is scoped under .expert-portal (set on in * layout-expert.ejs / layout-auth.ejs) so none of this touches the Admin * panel, which keeps its existing utilitarian look completely unchanged. * * Reuses admin.css's structural classes (.admin-shell, .card, .data-table, * etc.) for layout plumbing, but restyles color, spacing, shadows, and * form controls for a warmer, more "your own space" feel — this is a * surface many experts will use regularly, not an internal ops tool. */ .expert-portal { --ep-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06); --ep-shadow-lg: 0 8px 30px rgba(15, 23, 42, .10); --ep-radius: 14px; --ep-radius-sm: 10px; background: #f5f7fb; } /* ---- Sidebar: softer navy, subtle gradient, friendlier active state ---- */ .expert-portal .admin-sidebar { background: linear-gradient(180deg, #111827 0%, #0f172a 100%); } .expert-portal .sidebar-brand { border-bottom-color: rgba(255,255,255,.08); } .expert-portal .nav-link { border-radius: 10px; margin-bottom: 1px; } .expert-portal .nav-link:hover { background: rgba(255,255,255,.07); } .expert-portal .nav-link.is-active { background: linear-gradient(90deg, var(--brand) 0%, #4d84f0 100%); box-shadow: 0 4px 14px rgba(47,111,237,.35); } .expert-portal .sidebar-section-label { opacity: .45; } .expert-portal .nav-badge { box-shadow: 0 0 0 2px rgba(15,23,42,.4); } /* ---- Topbar ---- */ .expert-portal .admin-topbar { background: #fff; border-bottom: 1px solid #eef0f4; box-shadow: 0 1px 0 rgba(15,23,42,.02); } .expert-portal .topbar-title { font-weight: 800; letter-spacing: -.01em; } .expert-portal .topbar-user { font-weight: 600; color: var(--ink); } /* ---- Main content area ---- */ .expert-portal .admin-main { padding: 28px 32px; } /* ---- Cards ---- */ .expert-portal .card { border: 1px solid #eef0f4; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); transition: box-shadow .2s ease; } .expert-portal .card:hover { box-shadow: var(--ep-shadow-lg); } /* ---- Stat cards (dashboard widgets) ---- */ .expert-portal .stat-card { border: 1px solid #eef0f4; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 22px 20px; transition: transform .18s ease, box-shadow .18s ease; } .expert-portal .stat-card:hover { transform: translateY(-2px); box-shadow: var(--ep-shadow-lg); } .expert-portal .stat-label { font-weight: 600; letter-spacing: .02em; } .expert-portal .stat-value { font-size: 28px; font-weight: 800; } /* ---- Buttons: bolder, rounder, with a touch of life on hover ---- */ .expert-portal .btn { border-radius: 10px; font-weight: 700; padding: 10px 18px; transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease; } .expert-portal .btn:active { transform: translateY(1px); } .expert-portal .btn-primary { background: linear-gradient(180deg, #3b7bf5 0%, var(--brand) 100%); box-shadow: 0 4px 14px rgba(47,111,237,.28); border: none; } .expert-portal .btn-primary:hover { box-shadow: 0 6px 18px rgba(47,111,237,.38); background: var(--brand-dark); } .expert-portal .btn-ghost { border: 1px solid #e2e6ee; background: #fff; } .expert-portal .btn-ghost:hover { background: #f8fafc; border-color: #d3d9e6; } .expert-portal .btn-danger { border: 1px solid #fecaca; } .expert-portal .btn-sm { padding: 7px 14px; border-radius: 8px; } /* ---- Form controls: the actual "input fields look nicer" ask ---- */ .expert-portal input[type="text"], .expert-portal input[type="email"], .expert-portal input[type="password"], .expert-portal input[type="number"], .expert-portal input[type="date"], .expert-portal input[type="time"], .expert-portal input[type="file"], .expert-portal input[type="search"], .expert-portal select, .expert-portal textarea { border: 1.5px solid #e2e6ee; border-radius: var(--ep-radius-sm); padding: 11px 14px; font-size: 14.5px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .expert-portal input[type="text"]:focus, .expert-portal input[type="email"]:focus, .expert-portal input[type="password"]:focus, .expert-portal input[type="number"]:focus, .expert-portal input[type="date"]:focus, .expert-portal input[type="time"]:focus, .expert-portal input[type="search"]:focus, .expert-portal select:focus, .expert-portal textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,111,237,.12); } .expert-portal label { font-weight: 700; font-size: 13.5px; color: #374151; margin-bottom: 6px; display: block; } .expert-portal .hint { color: #8892a4; } .expert-portal .form-section-note { font-weight: 800; font-size: 16px; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid #f0f2f7; margin-bottom: 18px; } .expert-portal .form-divider { border: none; border-top: 1px solid #eef0f4; margin: 24px 0; } /* File inputs specifically look cramped by default — give the button its own defined shape instead of the raw OS control. */ .expert-portal input[type="file"] { padding: 8px 10px; cursor: pointer; } .expert-portal input[type="file"]::file-selector-button { border: none; background: #eef2ff; color: var(--brand-dark); font-weight: 700; padding: 7px 14px; border-radius: 7px; margin-right: 10px; cursor: pointer; transition: background-color .15s ease; } .expert-portal input[type="file"]::file-selector-button:hover { background: #dce6ff; } /* ---- Repeatable rows (Organizations, Certifications, Training Topics) ---- */ .expert-portal .repeat-row { background: #fafbfd; border: 1px solid #eef0f4; border-radius: var(--ep-radius-sm); padding: 14px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .expert-portal .org-row { align-items: center; } .expert-portal .org-row__edit { flex: 1 1 auto; } .expert-portal .repeat-row input, .expert-portal .repeat-row select, .expert-portal .repeat-row textarea { background: #fff; } /* Labeled grid used inside a repeat-row card (Training Topics) — each field gets its own label instead of relying on placeholder text alone. */ .expert-portal .tt-card { display: block; } .expert-portal .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; width: 100%; } .expert-portal .field-grid__item { display: flex; flex-direction: column; } .expert-portal .field-grid__item--wide { grid-column: 1 / -1; } .expert-portal .field-grid__item label { margin-bottom: 5px; font-size: 12.5px; } .expert-portal .field-grid__item input, .expert-portal .field-grid__item select, .expert-portal .field-grid__item textarea { width: 100%; } .expert-portal .field-grid--2col { grid-template-columns: repeat(2, 1fr); } .expert-portal .field-grid--3col { grid-template-columns: repeat(3, 1fr); } @media (max-width: 780px) { .expert-portal .field-grid--2col, .expert-portal .field-grid--3col { grid-template-columns: 1fr; } } /* ---- Training Topics accordion ---- */ .expert-portal .tt-accordion { background: #fff; border: 1px solid #eef0f4; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); margin-bottom: 16px; overflow: hidden; } .expert-portal .tt-accordion[open] { box-shadow: var(--ep-shadow-lg); } .expert-portal .tt-accordion__header { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fafbfd; transition: background-color .15s ease; } .expert-portal .tt-accordion__header::-webkit-details-marker { display: none; } .expert-portal .tt-accordion__header:hover { background: #f5f7fb; } .expert-portal .tt-accordion__caret { color: var(--brand); font-size: 15px; transition: transform .18s ease; flex-shrink: 0; } .expert-portal .tt-accordion[open] .tt-accordion__caret { transform: rotate(90deg); } .expert-portal .tt-accordion__title { font-weight: 800; font-size: 15.5px; flex: 1; } .expert-portal .tt-accordion__meta { color: #8892a4; font-size: 13px; font-weight: 600; } .expert-portal .tt-accordion__remove { flex-shrink: 0; } .expert-portal .tt-accordion__body { padding: 24px; display: flex; flex-direction: column; gap: 24px; } .expert-portal .tt-section { padding-bottom: 22px; border-bottom: 1px solid #f2f4f8; } .expert-portal .tt-section:last-child { border-bottom: none; padding-bottom: 0; } .expert-portal .tt-section__title { margin: 0 0 14px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-dark); } /* ---- Info notes (clarifying banners at the top of a page) ---- */ .expert-portal .info-note { background: #eef4ff; border: 1px solid #dbe6ff; border-radius: var(--ep-radius-sm); padding: 14px 18px; margin-bottom: 20px; } .expert-portal .info-note p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: #374151; } .expert-portal .info-note p:last-child { margin-bottom: 0; } /* ---- Organizations: each as its own card ---- */ .expert-portal .org-card { padding: 20px; margin-bottom: 14px; } .expert-portal .org-card__top { display: flex; gap: 16px; align-items: flex-start; } .expert-portal .org-card__logo { width: 56px; height: 56px; border-radius: 10px; background: #f1f4fa; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .expert-portal .org-card__logo img { width: 100%; height: 100%; object-fit: contain; } .expert-portal .org-card__logo-placeholder { font-size: 22px; opacity: .5; } /* No min-width:0 here on purpose — that's what let the file input's column get squeezed below its natural width and clip the "No file chosen" text. Fields stack full-width instead of sharing cramped grid columns. */ .expert-portal .org-card__form { flex: 1; display: flex; flex-direction: column; gap: 14px; } .expert-portal .org-card__field { display: flex; flex-direction: column; } .expert-portal .org-card__field label { margin-bottom: 5px; } .expert-portal .org-card__field input { width: 100%; } .expert-portal .org-card__remove-logo { align-self: flex-start; } .expert-portal .org-card__actions { margin-top: 4px; display: flex; justify-content: flex-end; } .expert-portal .org-card__footer { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f2f7; } /* ---- Tables ---- */ .expert-portal .data-table { border-radius: var(--ep-radius-sm); overflow: hidden; } .expert-portal .data-table th { background: #f8f9fc; font-weight: 700; color: #6b7280; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; } .expert-portal .data-table tbody tr:hover { background: #f5f8ff; } .expert-portal .table-card { padding: 0; overflow: hidden; } /* ---- Badges: slightly bolder pill shape ---- */ .expert-portal .badge { border-radius: 999px; font-weight: 700; padding: 4px 12px; font-size: 12px; } /* ---- Empty states ---- */ .expert-portal .empty-state { text-align: center; padding: 48px 24px; color: #8892a4; background: #fff; border: 1px dashed #dde2ee; border-radius: var(--ep-radius); } /* ---- Filter bar (Meetings search/filter) ---- */ .expert-portal .filter-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid #eef0f4; border-radius: var(--ep-radius); padding: 16px 18px; box-shadow: var(--ep-shadow); } .expert-portal .filter-bar__field { display: flex; flex-direction: column; gap: 5px; } .expert-portal .filter-bar__field label { margin-bottom: 0; font-size: 12px; } .expert-portal .filter-bar__field input, .expert-portal .filter-bar__field select { min-width: 200px; } /* ---- Check toggles (Availability days, Working Industries, etc.) ---- */ .expert-portal .check-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1.5px solid #e2e6ee; border-radius: 999px; font-weight: 600; font-size: 13.5px; cursor: pointer; margin: 0 6px 8px 0; transition: border-color .15s ease, background-color .15s ease; } .expert-portal .check-toggle:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); } .expert-portal .check-toggle input { margin: 0; accent-color: var(--brand); } /* ---- Auth pages (login / forgot / reset / change password) ---- */ .expert-portal.auth-body { background: linear-gradient(160deg, #eef4ff 0%, #f5f7fb 55%, #ffffff 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .expert-portal .auth-wrap { width: 100%; max-width: 440px; padding: 24px; } .expert-portal .auth-card { background: #fff; border-radius: 18px; box-shadow: var(--ep-shadow-lg); padding: 36px 34px; border: 1px solid #eef0f4; } .expert-portal .auth-head { text-align: center; margin-bottom: 26px; } .expert-portal .auth-logo { width: 44px; height: 44px; margin-bottom: 10px; } .expert-portal .auth-head h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; } .expert-portal .auth-head p { color: #8892a4; margin: 0; font-size: 14px; } .expert-portal .auth-form { display: flex; flex-direction: column; gap: 14px; } /* ---- Page intro text (change-password forced banner etc.) ---- */ .expert-portal .page-intro { color: #4b5568; margin-bottom: 18px; line-height: 1.6; } /* ---- Profile completion bar polish (dashboard) ---- */ .expert-portal .completion-bar { border-radius: 999px; overflow: hidden; } @media (max-width: 900px) { .expert-portal .admin-main { padding: 18px; } .expert-portal .filter-bar { flex-direction: column; align-items: stretch; } .expert-portal .filter-bar__field input, .expert-portal .filter-bar__field select { min-width: 0; width: 100%; } } /* ---- Calendar ---- */ .expert-portal .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .expert-portal .calendar-toolbar__title { margin: 0; font-size: 18px; font-weight: 800; } .expert-portal .calendar-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: #6b7280; margin-bottom: 16px; } .expert-portal .calendar-legend span { display: inline-flex; align-items: center; gap: 6px; } .expert-portal .calendar-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .expert-portal .calendar-dot--scheduled { background: #16a34a; } .expert-portal .calendar-dot--pending { background: #2563eb; } .expert-portal .calendar-dot--reschedule { background: #d97706; } .expert-portal .calendar-dot--blocked { background: #9ca3af; } .expert-portal .calendar-card { padding: 0; overflow: hidden; } .expert-portal .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .expert-portal .calendar-grid--head { border-bottom: 1px solid #eef0f4; background: #fafbfd; } .expert-portal .calendar-headcell { padding: 10px; text-align: center; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #8892a4; } .expert-portal .calendar-cell { min-height: 110px; padding: 8px; border: 1px solid #f2f4f8; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .expert-portal .calendar-cell--out { background: #fafbfd; opacity: .5; } .expert-portal .calendar-cell--today { background: #eef4ff; } .expert-portal .calendar-cell--blocked { background: #f9fafb; } .expert-portal .calendar-cell__num { font-size: 12.5px; font-weight: 700; color: #374151; } .expert-portal .calendar-chip { display: block; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .expert-portal a.calendar-chip:hover { filter: brightness(0.95); } .expert-portal .calendar-chip--scheduled { background: #dcfce7; color: #15803d; } .expert-portal .calendar-chip--pending { background: #dbeafe; color: #1d4ed8; } .expert-portal .calendar-chip--reschedule { background: #fef3c7; color: #b45309; } .expert-portal .calendar-chip--muted { background: #f1f5f9; color: #64748b; } .expert-portal .calendar-chip--blocked { background: #e5e7eb; color: #4b5563; cursor: default; } .expert-portal .calendar-weekly { display: flex; flex-direction: column; gap: 10px; } .expert-portal .calendar-weekly__day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .expert-portal .calendar-weekly__label { width: 42px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: #374151; } @media (max-width: 700px) { .expert-portal .calendar-grid { grid-template-columns: repeat(7, minmax(60px, 1fr)); overflow-x: auto; } .expert-portal .calendar-cell { min-height: 70px; } } /* ---- Reviews ---- */ .expert-portal .rating-dist { display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .expert-portal .rating-dist__row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .expert-portal .rating-dist__label { width: 36px; color: #6b7280; flex-shrink: 0; } .expert-portal .rating-dist__bar { flex: 1; height: 8px; background: #f1f4fa; border-radius: 999px; overflow: hidden; } .expert-portal .rating-dist__fill { display: block; height: 100%; background: #f59e0b; border-radius: 999px; } .expert-portal .rating-dist__count { width: 26px; text-align: right; color: #6b7280; flex-shrink: 0; } .expert-portal .reviews-sort { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; } .expert-portal .reviews-sort a { color: #6b7280; font-weight: 600; } .expert-portal .reviews-sort a.is-active { color: var(--brand-dark); text-decoration: underline; } .expert-portal .review-card { padding: 18px 20px; margin-bottom: 12px; } .expert-portal .review-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .expert-portal .review-card__stars { color: #f59e0b; letter-spacing: 1px; } .expert-portal .review-card__date { margin-left: auto; color: #8892a4; font-size: 12.5px; } .expert-portal .review-card__text { margin: 0; color: #374151; line-height: 1.6; font-size: 14px; }