/* ๐จ IMPORT DESIGN SYSTEM - MUST BE FIRST! */
@import url('design-tokens.css');
/* ๐ง PREVENT HORIZONTAL SCROLL - CRITICAL FIX */
html {
overflow-x: hidden;
max-width: 100vw;
/* Apply Inter font everywhere */
font-family: var(--font-sans);
/* Smooth font rendering (makes text look cleaner) */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after {
box-sizing: border-box;
/* REMOVE max-width from here - it causes issues */
}
* {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-warm-800);
overflow-x: hidden;
background: var(--color-warm-100);
}
@media (max-width: 768px) {
/* Prevent any element from causing horizontal scroll */
body {
overflow-x: hidden;
}
.main-content {
flex-direction: column;
padding: 8px;
gap: 8px;
margin-bottom: 80px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.panel {
padding: 12px 10px;
min-height: auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
}
/* Modern header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) var(--space-8);
width: 100%;
box-sizing: border-box;
min-height: 70px;
background: var(--color-warm-50);
/* Subtle border */
border-bottom: 1px solid var(--color-gray-200);
/* Softer shadow */
box-shadow: var(--shadow-sm);
/* Stick to top */
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
/* LEFT SIDE - Brand */
.brand {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* RIGHT SIDE - User Profile */
.user-profile {
display: flex;
flex-direction: column; /* Stack email under icon */
align-items: center;
gap: 4px;
flex-shrink: 0;
max-width: 140px; /* Prevent overflow */
}
.user-email {
font-size: 10px;
color: var(--color-warm-600);
font-weight: 500;
text-align: center;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
order: 2;
}
.user-icon {
width: 52px;
height: 52px;
background-color: var(--color-warm-50);
border-radius: 50%;
border: 2px solid #e9ecef;
flex-shrink: 0;
order: 1;
}
/* DESKTOP - Scale everything up */
@media (min-width: 769px) {
.header {
padding: 20px 50px !important;
min-height: 100px;
}
.brand-icon img {
height: 85px !important;
}
.user-profile {
gap: 6px;
flex-direction: column; /* Stack email under icon */
max-width: none;
}
.user-email {
font-size: 12px;
max-width: 150px;
text-align: center;
order: 2;
}
.user-icon {
width: 68px;
height: 68px;
order: 1; /* Icon on right on desktop */
}
}
.main-content {
display: flex;
gap: 20px;
padding: 20px;
}
.panel {
flex: 1;
background: var(--glass-warm-strong);
border-radius: var(--radius-2xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-warm-200);
min-height: 400px;
}
.feedback-item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 8px 15px;
padding: 16px 20px;
margin-bottom: 12px;
background: var(--color-warm-100);
border-radius: 12px;
border: 1px solid var(--color-warm-300);
}
.feedback-icon {
grid-column: 1;
grid-row: 1;
font-size: 18px;
}
.feedback-message {
grid-column: 2;
grid-row: 1;
font-weight: 500;
color: var(--color-warm-700);
}
.feedback-meta {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #6c757d;
margin-top: 4px;
}
.feedback-date {
grid-column: 3;
}
.feedback-sender {
grid-column: 4;
}
.send-feedback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.add-feedback-btn {
width: 120px;
height: 120px;
background-color: var(--color-warm-100);
border: 2px dashed #dee2e6;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 40px;
transition: all 0.2s ease;
}
.plus-icon {
font-size: 36px;
color: #6c757d;
font-weight: 300;
}
h2.received-title {
color: var(--color-warm-800);
font-weight: 600;
margin-bottom: 20px;
text-align: center;
font-size: 18px;
}
h2 {
color: var(--color-warm-800);
font-weight: 600;
margin-bottom: 20px;
text-align: center;
font-size: var(--text-lg);
}
.add-feedback-btn:hover {
background-color: #e9ecef;
border-color: #adb5bd;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
padding: 8px;
gap: 8px;
margin-bottom: 80px;
width: 100vw;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.panel {
padding: 12px 10px;
min-height: auto;
width: calc(100vw - 16px);
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
.floating-add-btn {
bottom: 16px;
right: 12px;
width: 56px;
height: 56px;
}
.floating-add-btn .plus-icon {
font-size: 24px;
}
}
.brand-icon {
display: flex;
align-items: center;
justify-content: center;
}
.brand-icon img {
height: 40px;
width: auto;
transition: transform 0.2s ease;
display: block;
}
.brand-icon img:hover {
transform: scale(1.1);
}
.floating-add-btn {
position: fixed;
background-color: var(--color-primary);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
z-index: 1000;
transition: all 0.2s ease;
}
.floating-add-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}
.floating-add-btn .plus-icon {
font-size: 28px;
color: white;
font-weight: 400;
}
/* CSS FOR FEEDBACK WIZARD */ /* CSS FOR FEEDBACK WIZARD */ /* CSS FOR FEEDBACK WIZARD */
.wizard-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/login-background1-2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Lighter overlay than before */
background-color: rgba(0, 0, 0, 0.15);
background-blend-mode: darken;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.wizard-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(20, 184, 166, 0.15);
z-index: 0;
pointer-events: none;
}
.wizard-content {
/* Glass effect like login box */
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
padding: 0;
max-width: 640px;
width: 100%;
position: relative;
z-index: 1;
max-height: 90vh;
overflow-y: auto;
/* Softer shadow like login */
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-top: 3px solid var(--color-primary);
}
.wizard-content::before {
content: '';
display: block;
width: 96px;
height: 96px;
margin: 20px auto 0;
background: url('/assets/Logo-v2.svg') no-repeat center;
background-size: contain;
opacity: 0.9;
}
.wizard-close {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
font-size: 18px;
background: rgba(95, 99, 104, 0.08);
color: var(--color-warm-600);
z-index: 10;
}
.wizard-close:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--color-error);
}
.wizard-progress {
background: var(--color-warm-100);
padding: 16px 24px 12px 24px;
border-bottom: 1px solid var(--color-warm-300);
position: relative;
}
.wizard-progress .progress-text {
font-size: 13px;
color: var(--color-warm-600);
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
}
.wizard-progress::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg,
var(--color-primary) 0%,
var(--color-primary) var(--progress-width, 25%),
var(--color-gray-200) var(--progress-width, 25%),
var(--color-gray-200) 100%);
}
.wizard-step {
display: none;
padding: 24px;
}
.wizard-step.active {
display: block;
}
/* Topic sub-step โ focused single-question screen */
.topic-substep-inner {
text-align: center;
padding: 32px 0 16px;
}
.topic-substep-icon {
font-size: 40px;
margin-bottom: 16px;
line-height: 1;
}
.topic-substep h3 {
font-size: 22px;
font-weight: 600;
color: var(--color-warm-800);
margin-bottom: 10px;
}
.topic-substep-hint {
font-size: 14px;
color: var(--color-warm-600);
margin-bottom: 28px;
line-height: 1.5;
}
.topic-substep-input {
max-width: 420px;
margin: 0 auto;
display: block;
font-size: 18px !important;
padding: 16px 20px !important;
text-align: center;
}
.wizard-step h3 {
margin: 0 0 24px 0;
color: var(--color-warm-800);
font-size: 20px;
font-weight: 600;
line-height: 24px;
}
.wizard-step input,
.wizard-step textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-warm-300);
border-radius: 8px;
margin-bottom: 20px;
font-family: inherit;
font-size: 16px;
color: var(--color-warm-900);
background: var(--color-warm-50);
transition: all 0.2s ease;
box-sizing: border-box;
}
.wizard-step input:focus,
.wizard-step textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.wizard-step input::placeholder,
.wizard-step textarea::placeholder {
color: var(--color-warm-500);
}
.wizard-step label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: var(--color-warm-700);
}
.wizard-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 24px 0 8px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Default style = ghost (back button) */
.wizard-buttons button {
background: transparent;
color: var(--color-warm-600);
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
min-height: 40px;
transition: color var(--transition-fast);
}
.wizard-buttons button:hover {
color: var(--color-warm-800);
}
/* Primary style = forward / submit buttons */
.wizard-buttons button:last-child,
#step1-next-btn,
#step2-next-btn,
#step3-next-btn,
#step4-next-btn,
#step5-next-btn {
background: var(--color-primary);
color: white;
border: none;
font-weight: 600;
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}
.wizard-buttons button:last-child:hover {
background: var(--color-primary-dark);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
transform: translateY(-1px);
}
/* Disabled state */
.wizard-buttons button:disabled,
.wizard-buttons button[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
pointer-events: none;
}
/* Workflow Button Styles */
.workflow-btn {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background-color: var(--color-warm-50);
border: 2px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.workflow-btn:hover {
border-color: var(--color-primary);
background-color: var(--color-warm-50);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
/* Icon Container */
.workflow-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.workflow-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Text Content */
.workflow-text {
flex: 1;
}
.workflow-text h3 {
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 600;
color: var(--color-warm-900);
}
.workflow-text p {
margin: 0;
font-size: 13px;
color: var(--color-warm-600);
}
/* Specific Button Colors */
.ask-feedback-btn:hover {
border-color: #2196F3;
}
.give-feedback-btn:hover {
border-color: #4CAF50;
}
.feedback-type-options {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.feedback-type-btn {
padding: 16px 20px;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-300);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
text-align: left;
transition: all 0.2s ease;
color: var(--color-warm-800);
display: flex;
align-items: center;
gap: 12px;
}
.feedback-type-btn:hover {
border-color: var(--color-primary);
background-color: var(--color-warm-50);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.feedback-type-btn.selected {
border-color: var(--color-primary);
background-color: var(--color-primary-50);
box-shadow: 0 2px 6px rgba(20, 184, 166, 0.15);
color: var(--color-primary-dark);
}
@media (max-width: 768px) {
.wizard-modal {
padding: 16px;
background-position: right center;
}
.wizard-content {
max-width: 100%;
border-radius: 16px;
}
.wizard-progress {
padding: 16px 20px 12px 20px;
border-radius: 16px 16px 0 0;
}
.wizard-step {
padding: 20px;
}
.wizard-buttons {
padding: 20px 0 8px;
max-width: 100%;
}
}
/* Request cards โ clean, flat, minimal */
.request-card {
background: var(--color-warm-50);
border-radius: var(--radius-xl);
padding: 0;
margin: var(--space-4) auto;
max-width: 700px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-warm-200);
position: relative;
cursor: pointer;
transition: box-shadow var(--transition-base), transform var(--transition-base);
overflow: hidden;
margin-left: 4px;
margin-right: 4px;
}
.request-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.card-date {
font-size: 12px;
color: var(--color-warm-600);
font-weight: 500;
}
/* Main card content area */
/* ๐ NEW - Better spacing */
.card-content {
padding: var(--space-6) var(--space-6);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--color-warm-800);
margin-bottom: 16px; /* More breathing room */
line-height: 1.2; /* Tighter leading */
font-family: var(--font-sans);
letter-spacing: -0.5px; /* Slightly tighter (modern) */
}
/* Status badge styling */
/* ๐ NEW - Modern badge styling */
.card-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-bold);
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-4);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: var(--color-warm-50);
border-bottom: 1px solid var(--color-gray-200);
}
.card-header-left {
display: flex;
align-items: center;
}
.card-type-badge {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
}
.card-type-badge .icon-mask {
width: 24px;
height: 24px;
background-image: none;
transition: none;
}
/* ๐ ENHANCED - Premium glass button */
.card-action-btn {
padding: var(--space-2) var(--space-4);
/* ๐ Glass button with teal tint */
background: rgba(20, 184, 166, 0.15);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
color: var(--color-primary-dark);
border: 1px solid var(--color-primary-light);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
font-family: var(--font-sans);
cursor: pointer;
transition: all var(--transition-fast);
/* ๐ Subtle shadow */
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
}
.card-action-btn:hover {
/* ๐ More opaque on hover */
background: rgba(20, 184, 166, 0.25);
/* ๐ Lift slightly */
transform: translateY(-2px);
/* ๐ Bigger shadow */
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
border-color: var(--color-primary);
}
.card-action-btn:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(20, 184, 166, 0.2);
}
.card-title-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.title-and-status {
flex: 1;
min-width: 0; /* Allows text to wrap properly */
}
/* ๐ ENHANCED - Active status with gentle pulse */
.status-active {
background: rgba(20, 184, 166, 0.1);
color: var(--color-primary-dark);
border: 1px solid var(--color-primary-light);
/* ๐ Add gentle pulsing animation */
animation: pulse-gentle 2s ease-in-out infinite;
/* ๐ Add a subtle glow effect */
box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.3);
/* Smooth transitions */
transition: all var(--transition-base);
}
/* ๐ On hover, pause the animation */
.status-active:hover {
animation-play-state: paused;
background: rgba(20, 184, 166, 0.15);
}
/* Keep other status styles unchanged */
.status-completed {
background: #e3f2fd;
color: #1565c0;
border: 1px solid #2196f3;
}
.status-overdue {
background: #ffebee;
color: #c62828;
border: 1px solid #f44336;
}
/* Progress bar for multiple recipients */
.card-progress {
margin-bottom: 16px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.progress-label {
font-size: 13px;
color: var(--color-warm-600);
font-weight: 500;
}
.progress-percentage {
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
}
.progress-bar-container {
height: 6px;
background: var(--color-warm-300);
border-radius: 3px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.4s ease;
}
/* Recipients info section */
.recipients-info {
margin-bottom: 16px;
}
/* ๐ Recipients visual display with person icons */
.recipients-visual {
display: inline-flex;
align-items: center;
gap: 8px;
}
.person-icons {
display: inline-flex;
align-items: center;
gap: 2px;
}
.person-icons svg {
transition: all 0.3s ease;
}
/* ๐ Hover effect - icons grow slightly */
.recipients-info:hover .person-icons svg {
transform: scale(1.1);
}
.recipients-count {
font-size: 14px;
color: var(--color-warm-600);
font-weight: 500;
margin-left: 4px;
}
.recipients-summary {
font-size: 13px;
color: var(--color-warm-800);
margin-bottom: 8px;
}
.recipient-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.recipient-tag {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--color-warm-200);
border-radius: 12px;
font-size: 11px;
color: var(--color-warm-600);
}
.recipient-tag.completed {
background: var(--color-primary-50);
color: var(--color-primary-dark);
}
.recipient-status-icon {
font-size: 10px;
}
/* Deadline info with urgency colors */
.deadline-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
background: var(--color-gray-50);
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
.deadline-text {
font-size: var(--text-sm);
color: var(--color-gray-700);
font-weight: var(--font-medium);
}
.days-remaining {
font-size: var(--text-sm);
font-weight: var(--font-bold);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
}
.days-remaining.urgent {
background: rgba(239, 68, 68, 0.1);
color: var(--color-error-600);
}
.days-remaining.warning {
background: rgba(245, 158, 11, 0.1);
color: var(--color-warning-600);
}
.days-remaining.safe {
background: rgba(20, 184, 166, 0.1);
color: var(--color-primary-dark);
}
.card-content > div:last-child {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-gray-200);
font-size: var(--text-xs);
color: var(--color-gray-600);
text-align: center;
}
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-5);
min-height: 100vh;
background: transparent;
/* ๐ Prevent clipping cards on mobile */
overflow-x: visible; /* Allow shadows to show */
}
/* ๐ Add padding on mobile to prevent clipping */
@media (max-width: 768px) {
.dashboard-container {
padding: 16px 8px;
}
}
/* ๐ Optional: Subtle noise texture overlay (adds warmth) */
.dashboard-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(20, 184, 166, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(45, 212, 191, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* ๐ Make sure content stays above the overlay */
.dashboard-container > * {
position: relative;
z-index: 1;
}
/* Minimal Stats Cards */
.stat-card {
background: transparent;
border: none;
padding: var(--space-2) var(--space-3);
text-align: center;
}
.stat-label {
font-size: 11px;
font-weight: var(--font-medium);
color: var(--color-warm-600);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-2);
line-height: 1.2;
}
.stat-number {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-warm-700);
line-height: 1;
white-space: nowrap;
}
/* ๐ Gradient border effect using pseudo-element */
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius-xl);
padding: 1px;
background: var(--gradient-border);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
}
/* Desktop: No hover effects for minimal look */
@media (min-width: 769px) {
.stat-card:hover {
background: transparent;
transform: none;
box-shadow: none;
border-color: transparent;
}
.stat-card:hover::before {
opacity: 0;
}
}
/* Mobile: Keep hover effects */
@media (max-width: 768px) {
.stat-card:hover {
background: var(--glass-white-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
}
/* ๐ When stat updates, animate it */
.stat-number.updating {
animation: count-up 0.5s var(--ease-bounce);
}
/* Two Column Grid */
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
.requests-section::before {
display: none;
}
.requests-section h2 {
color: var(--color-gray-900);
font-size: var(--text-3xl);
font-weight: var(--font-semibold);
font-family: var(--font-sans);
letter-spacing: -0.02em;
margin-bottom: var(--space-8);
line-height: 1.2;
}
/* Remove bar */
.requests-section h2::after {
display: none;
}
.sidebar-section {
display: flex;
flex-direction: column;
gap: 24px;
padding: 0 4px; /* ๐ ADDED - prevents clipping */
}
/* ๐ ADDED - more padding on mobile */
@media (max-width: 768px) {
.sidebar-section {
padding: 0 8px;
}
}
.activity-feed,
.todo-section {
background: var(--color-warm-50);
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-warm-300);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.stat-card {
padding: 12px 8px;
}
.stat-label {
font-size: 11px;
margin-bottom: var(--space-1);
}
.stat-number {
font-size: var(--text-xl); /* Smaller number */
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.dashboard-container {
padding: 16px 8px;
}
}
/* Activity Feed Styles - Add to your style.css */
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-warm-200);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
font-size: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.activity-content {
flex: 1;
min-width: 0;
}
.activity-text {
font-size: 13px;
color: var(--color-warm-800);
line-height: 1.4;
margin-bottom: 2px;
}
.activity-text strong {
color: var(--color-warm-900);
font-weight: 500;
}
.activity-date {
font-size: 11px;
color: var(--color-warm-600);
font-weight: 400;
}
/* To-Do List Styles - Add to your style.css */
.todo-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--color-warm-200);
}
.todo-item:last-child {
border-bottom: none;
}
.todo-item.urgent {
background: #fef7e0;
margin: 0 -20px;
padding: 16px 20px;
border-radius: 8px;
border-bottom: none;
}
.todo-content {
flex: 1;
min-width: 0;
}
.todo-text {
font-size: 13px;
color: var(--color-warm-800);
line-height: 1.4;
margin-bottom: 4px;
}
.todo-text strong {
color: var(--color-warm-900);
font-weight: 500;
}
.todo-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.todo-requester {
font-size: 11px;
color: var(--color-warm-600);
}
.todo-due {
font-size: 11px;
color: var(--color-primary-dark);
font-weight: 500;
}
.todo-item.urgent .todo-due {
color: var(--color-error);
}
.todo-action {
background: var(--color-primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.todo-action:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
.todo-action.urgent {
background: var(--color-error);
}
.todo-action.urgent:hover {
background: var(--color-error-600);
}
/* Action Buttons Styles - Zen & Minimalist */
.action-buttons {
display: flex;
gap: 24px;
margin-bottom: 32px;
justify-content: center; /* Centered on page */
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 20px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-300);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
outline: 2px solid rgba(20, 184, 166, 0.3);
outline-offset: -2px;
}
.primary-action {
display: flex;
justify-content: center;
margin-bottom: 32px;
}
/* ๐ NEW - Premium primary CTA with TEAL */
.primary-action-btn {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-6) var(--space-10);
/* YOUR TEAL BRAND COLOR! */
background: var(--color-primary);
color: white;
/* Remove that opacity - it was making it dull */
opacity: 1;
/* Subtle white border for definition */
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
cursor: pointer;
/* Typography */
font-size: var(--text-xl);
font-weight: var(--font-bold);
font-family: var(--font-sans);
/* Premium shadow */
box-shadow: var(--shadow-xl);
/* Smooth transitions */
transition: all var(--transition-base);
/* Prevent text selection */
user-select: none;
}
.primary-action-btn:hover {
/* Lighter teal on hover */
background: var(--color-primary-light);
/* Lift up */
transform: translateY(-3px);
/* Bigger shadow with TEAL glow */
box-shadow: 0 12px 32px rgba(20, 184, 166, 0.35);
/* Border gets more visible */
border-color: rgba(255, 255, 255, 0.3);
}
.primary-action-btn:active {
/* Press down */
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.primary-action-btn .action-icon {
width: 36px;
height: 36px;
margin-bottom: 0;
flex-shrink: 0;
}
.primary-action-btn .action-icon img {
filter: brightness(0) invert(1);
}
.action-icon {
width: 36px;
height: 36px;
margin-bottom: 12px;
}
.action-icon img {
width: 100%;
height: 100%;
/* Keep original icon colors */
}
.action-label {
font-size: 13px;
font-weight: 500;
color: var(--color-warm-700);
text-align: center;
line-height: 1.3;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.action-buttons {
gap: 16px;
}
.action-btn {
min-width: 120px;
padding: 20px 16px;
}
}
/* GIVE FEEDBACK PAGE GIVE FEEDBACK PAGE GIVE FEEDBACK PAGE GIVE FEEDBACK PAGE GIVE FEEDBACK PAGE GIVE FEEDBACK PAGE */
.feedback-body {
background-color: var(--color-warm-100);
margin: 0;
padding: 0;
font-family: var(--font-sans);
min-height: 100vh;
overflow-x: hidden;
}
/* Progress Bar */
.feedback-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
padding: 12px 20px 8px 20px; /* Reduced padding */
border-bottom: 1px solid rgba(232, 234, 237, 0.3);
z-index: 100;
}
.progress-bar {
height: 4px;
background: rgba(232, 234, 237, 0.4);
border-radius: 2px;
overflow: hidden;
margin-bottom: 6px;
}
.progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
width: 0%;
transition: width 0.4s ease;
}
.progress-text {
font-size: 11px;
color: var(--color-warm-600);
text-align: center;
font-weight: 500;
letter-spacing: 0.3px;
}
/* Main Container */
.feedback-container {
padding-top: 56px;
min-height: calc(100vh - 56px);
display: flex;
align-items: center;
justify-content: center;
}
.feedback-screen {
display: none;
width: 100%;
max-width: 600px;
padding: 40px 20px;
text-align: center;
}
.feedback-screen.active {
display: block;
animation: screenFadeIn 0.28s var(--ease-smooth) both;
}
.screen-content {
background: var(--color-warm-50);
border-radius: 16px;
padding: 48px 40px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-warm-200);
}
/* Typography */
.feedback-screen h1 {
font-size: 28px;
font-weight: 400;
color: var(--color-warm-900);
margin-bottom: 16px;
line-height: 1.3;
}
.subtitle {
font-size: 16px;
color: var(--color-warm-600);
margin-bottom: 8px;
}
.time-estimate {
font-size: 14px;
color: var(--color-warm-500);
margin-bottom: 32px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.screen-content {
padding: 32px 24px;
margin: 0 16px;
}
.feedback-screen h1 {
font-size: 24px;
}
}
/* Give Feedback Page - Screen 1 Styling */
.helper-text {
font-size: 14px;
color: var(--color-warm-500);
margin-bottom: 32px;
}
.input-group {
margin-bottom: 32px;
text-align: left;
}
.input-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--color-warm-800);
margin-bottom: 8px;
text-align: left;
}
/* Override browser autofill highlight on form fields. Chromium ignores
`background-color` on autofilled inputs and paints them pale yellow โ
which looks wrong against the warm-cream palette in light mode and
actively jarring against dark mode surfaces. The inset box-shadow hack
is the standard workaround: paint a same-coloured shadow at full spread
so the autofill yellow never shows. Disappears when the user types
because the field loses its `:autofill` state. */
.feedback-input:-webkit-autofill,
.feedback-input:-webkit-autofill:hover,
.feedback-input:-webkit-autofill:focus,
.feedback-textarea:-webkit-autofill,
.feedback-textarea:-webkit-autofill:hover,
.feedback-textarea:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--color-warm-50) inset !important;
-webkit-text-fill-color: var(--color-warm-800) !important;
caret-color: var(--color-warm-800);
transition: background-color 9999s ease-in-out 0s;
}
.feedback-input {
width: 100%;
padding: 16px 20px;
border: 1px solid var(--color-warm-300);
border-radius: 8px;
font-size: 16px;
font-family: inherit;
color: var(--color-warm-800);
background: var(--color-warm-50);
transition: all 0.2s ease;
box-sizing: border-box;
outline: none;
}
.feedback-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.feedback-input::placeholder {
color: var(--color-warm-500);
}
select.feedback-input {
font-family: inherit !important;
font-size: 16px !important;
color: var(--color-warm-900);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa0a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.button-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.secondary-btn {
background: var(--color-warm-50);
color: var(--color-warm-700);
border: 1px solid var(--color-warm-300);
padding: 14px 32px;
border-radius: 24px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 140px;
}
.secondary-btn:hover {
background: var(--color-warm-100);
border-color: var(--color-warm-400);
color: var(--color-warm-800);
}
/* Continue Button */
.continue-btn {
background: var(--color-primary);
color: white;
border: none;
padding: 14px 32px;
border-radius: 24px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
min-width: 140px;
}
.continue-btn:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
}
.continue-btn:disabled,
.continue-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
pointer-events: none;
}
/* Screen 2: Feedback Form Styling */
.feedback-form {
text-align: left;
margin-bottom: 32px;
}
.form-section {
margin-bottom: 24px;
}
.form-section label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.field-description {
font-size: 14px;
color: var(--color-warm-600);
margin-bottom: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
background: var(--color-warm-100);
padding: 8px 12px;
border-radius: 6px;
}
.feedback-textarea {
width: 100%;
padding: 16px 20px;
border: 1px solid var(--color-warm-300);
border-radius: 8px;
font-size: 16px;
color: var(--color-warm-900);
background: var(--color-warm-50);
transition: all 0.2s ease;
box-sizing: border-box;
outline: none;
font-family: inherit;
resize: vertical;
min-height: 80px;
}
.feedback-textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.feedback-textarea::placeholder {
color: var(--color-warm-500);
line-height: 1.4;
}
/* Screen 3: Thank You Page Styling */
.success-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0;
animation: fadeInScale 0.6s ease forwards;
}
.thank-you-message {
font-size: 14px;
color: var(--color-warm-600);
line-height: 1.5;
margin-bottom: 32px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.next-steps {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.next-steps .continue-btn {
background: var(--color-primary);
}
.next-steps .continue-btn:hover {
background: var(--color-primary-dark);
}
/* Success animation */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes screenFadeIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Thank-you screen staggered entrance */
.thank-you-content .thank-you-logo-top { animation: fadeInScale 0.5s ease-out 0s both; }
.thank-you-content h1 { animation: screenFadeIn 0.4s ease-out 0.15s both; }
.thank-you-content .confirmation-message { animation: screenFadeIn 0.4s ease-out 0.3s both; }
.thank-you-content .next-steps { animation: screenFadeIn 0.4s ease-out 0.45s both; }
/* Mobile adjustments for thank you page */
@media (max-width: 768px) {
.next-steps {
width: 100%;
}
.next-steps button {
width: 100%;
}
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Screen 3: Review โ redesigned
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.gf-card.gf-review {
text-align: left;
}
/* Hero */
.gf-review-hero {
text-align: center;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--color-warm-200);
}
.gf-review-title {
font-family: 'Lora', Georgia, serif;
font-size: 26px;
font-weight: 600;
line-height: 1.25;
color: var(--color-warm-800);
margin: 0 0 8px;
}
.gf-review-title span {
color: var(--color-primary-darker);
}
.gf-review-stats {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 8px;
margin: 0;
font-size: 13px;
color: var(--color-warm-600);
}
.gf-review-stat strong {
color: var(--color-warm-800);
font-weight: 700;
font-size: 14px;
margin-right: 3px;
}
.gf-review-stat--muted strong { color: var(--color-warm-500); }
.gf-review-stat-sep { color: var(--color-warm-400); }
/* Per-question card */
.gf-review-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 28px;
}
.gf-review-card {
border: 1px solid var(--color-warm-200);
border-radius: 14px;
background: var(--color-warm-50);
padding: 18px 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gf-review-card:hover {
border-color: var(--color-warm-300);
box-shadow: 0 2px 10px rgba(20, 184, 166, 0.06);
}
.gf-review-card--skipped {
background: var(--color-warm-100);
border-color: var(--color-warm-400);
border-style: dashed;
}
.gf-review-card--empty {
background: var(--color-warning-50);
border-color: var(--color-warning-600);
border-style: dashed;
}
.gf-review-card-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.gf-review-card-num {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-primary-50);
color: var(--color-primary-darker);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-top: 2px;
}
.gf-review-card-q {
flex: 1;
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 600;
line-height: 1.4;
color: var(--color-warm-800);
}
.gf-review-card-edit {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--color-warm-300);
border-radius: 999px;
color: var(--color-warm-700);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
margin-top: 1px;
}
.gf-review-card-edit:hover {
border-color: var(--color-primary);
color: var(--color-primary-dark);
background: var(--color-primary-50);
}
/* Answer body โ soft teal-tinted card with left rule, Lora italic.
Mirrors the question-screen .gf-tf-display so the giver's voice is
visually contained and distinct from the bold sans question above. */
.gf-review-card-answer {
margin: 0 0 0 38px; /* aligns with question text after the number badge */
padding: 14px 18px;
background: rgba(20, 184, 166, 0.06);
border: 1px solid rgba(20, 184, 166, 0.18);
border-left: 3px solid var(--color-primary-light);
border-radius: 10px;
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 16px;
line-height: 1.65;
color: var(--color-warm-800);
white-space: pre-wrap;
word-break: break-word;
}
/* Soften the question label slightly so the contained answer reads as the
primary content; the question becomes the prompt header. */
.gf-review-card-q {
color: var(--color-warm-700);
}
/* Status chips for skipped / empty states */
.gf-review-card-status {
display: inline-block;
margin-left: 38px;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.gf-review-card-status--skipped {
background: var(--color-warm-200);
color: var(--color-warm-600);
}
.gf-review-card-status--empty {
background: var(--color-warning-50);
color: var(--color-warning-700);
}
/* Error line */
.gf-review-error {
margin: 0 0 16px;
padding: 10px 14px;
background: var(--color-error-50);
border: 1px solid var(--color-error-200);
border-radius: 8px;
color: var(--color-error-800);
font-size: 13.5px;
}
/* Actions */
.gf-review-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
/* Mobile */
@media (max-width: 640px) {
.gf-review-title { font-size: 22px; }
.gf-review-card { padding: 14px 16px; }
.gf-review-card-edit span { display: none; }
.gf-review-card-edit {
padding: 5px 8px;
}
.gf-review-card-answer { margin-left: 0; padding: 12px 14px; }
.gf-review-card-status { margin-left: 0; }
.gf-review-actions { flex-direction: column-reverse; align-items: stretch; }
.gf-review-actions .secondary-btn,
.gf-review-actions .continue-btn { width: 100%; }
}
/* Dark mode */
[data-theme="dark"] .gf-review-hero {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .gf-review-title span {
color: #5EEAD4;
}
[data-theme="dark"] .gf-review-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .gf-review-card:hover {
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .gf-review-card--skipped,
[data-theme="dark"] .gf-review-card--empty {
background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .gf-review-card--empty {
border-color: rgba(245, 158, 11, 0.32);
}
[data-theme="dark"] .gf-review-card-num {
background: rgba(20, 184, 166, 0.2);
color: #5EEAD4;
}
[data-theme="dark"] .gf-review-card-q {
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .gf-review-card-answer {
background: rgba(20, 184, 166, 0.12);
border-color: rgba(45, 212, 191, 0.32);
border-left-color: var(--color-primary-light);
color: #F4F4F8;
}
[data-theme="dark"] .gf-review-card-edit {
border-color: rgba(255, 255, 255, 0.16);
color: #C4C4CB;
}
[data-theme="dark"] .gf-review-card-edit:hover {
background: rgba(20, 184, 166, 0.18);
border-color: rgba(45, 212, 191, 0.5);
color: #5EEAD4;
}
[data-theme="dark"] .gf-review-card-status--skipped {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .gf-review-card-status--empty {
background: rgba(245, 158, 11, 0.18);
color: #FCD34D;
}
[data-theme="dark"] .gf-review-error {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.32);
color: #FECACA;
}
/* Legacy (old review screen) โ kept for fallback */
.review-container {
text-align: left;
margin-bottom: 32px;
}
.review-section {
background: var(--color-warm-100);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--color-warm-200);
}
.review-section h3 {
color: var(--color-warm-800);
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
border-bottom: 1px solid var(--color-warm-200);
padding-bottom: 8px;
}
.review-section-header {
text-align: center;
font-size: 18px;
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.review-item {
display: flex;
margin-bottom: 8px;
align-items: center;
}
.review-item--block {
flex-direction: column;
align-items: flex-start;
}
.review-item--block .review-value--instructions {
margin-left: 0;
margin-top: 6px;
width: 100%;
}
.review-label {
font-weight: 600;
color: var(--color-warm-600);
min-width: 60px;
font-size: 14px;
}
.review-value {
color: var(--color-warm-900);
font-size: 14px;
margin-left: 12px;
}
.review-feedback-item {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-warm-200);
}
.review-feedback-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.review-feedback-item h4 {
color: var(--color-primary-dark);
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.review-feedback-text {
color: var(--color-warm-800);
font-size: 14px;
line-height: 1.5;
background: var(--color-warm-50);
padding: 12px 16px;
border-radius: 6px;
border: 1px solid var(--color-warm-300);
font-style: italic;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
}
.review-feedback-text:empty::before {
content: "Not provided";
color: var(--color-warm-500);
font-style: italic;
}
.review-feedback-skipped {
font-size: 13px;
color: var(--color-warm-500);
font-style: italic;
margin: 0;
}
/* Review Actions */
.review-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.review-title {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 32px;
color: var(--color-warm-900);
}
.tertiary-btn {
background: transparent;
color: var(--color-error);
border: 1px solid var(--color-error);
padding: 14px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
}
.tertiary-btn:hover {
background: var(--color-error-50);
color: var(--color-error-600);
}
.continue-btn.primary {
background: var(--color-primary);
min-width: 140px;
}
.continue-btn.primary:hover {
background: var(--color-primary-dark);
}
/* Mobile adjustments for review screen */
@media (max-width: 768px) {
.review-actions {
flex-direction: column;
align-items: center;
}
.review-actions button {
width: 100%;
max-width: 280px;
}
}
.add-giver-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--color-primary-50);
border: 2px dashed var(--color-primary);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--color-primary-dark);
width: 100%;
margin-bottom: 20px;
transition: all 0.2s ease;
}
.add-giver-btn:hover:not(:disabled) {
background: var(--color-primary-50);
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.add-giver-btn:disabled {
background: var(--color-warm-100);
border-color: var(--color-warm-300);
color: #b0b4b9;
cursor: not-allowed;
font-weight: 400;
}
.plus-icon {
font-size: 18px;
font-weight: bold;
}
.feedback-giver-form {
background: var(--color-warm-100);
border: 1px solid var(--color-warm-200);
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
position: relative;
transition: padding 0.2s ease;
}
.feedback-giver-form.giver-collapsed {
padding: 12px 16px;
background: var(--color-warm-50);
border-color: var(--color-gray-200);
}
/* Equal spacing between all fields inside an expanded giver card */
.feedback-giver-form .feedback-input,
.feedback-giver-form .feedback-textarea {
margin-bottom: 16px;
}
/* Role wrapper div provides the outer gap; select inside gets no extra margin */
.feedback-giver-form .giver-field-row {
margin-bottom: 16px;
}
.feedback-giver-form .giver-field-row .feedback-input {
margin-bottom: 0;
}
/* Last textarea in the form needs no trailing gap */
.feedback-giver-form .feedback-textarea:last-of-type {
margin-bottom: 0;
}
/* Collapsed pill row */
.giver-summary-row {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s;
}
.giver-summary-row:hover {
background: rgba(35, 88, 122, 0.04);
}
.giver-avatar-mini {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(35, 88, 122, 0.10);
color: #23587a;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.giver-summary-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.giver-summary-name {
font-size: 14px;
font-weight: 600;
color: var(--color-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.giver-summary-email {
font-size: 12px;
color: var(--color-gray-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.giver-summary-role {
display: inline-block;
font-size: 11px;
font-weight: 500;
color: var(--color-primary-dark);
background: var(--color-primary-50);
border: 1px solid #99f6e4;
border-radius: 4px;
padding: 1px 6px;
margin-top: 2px;
width: fit-content;
}
.giver-edit-hint {
font-size: 12px;
color: var(--color-primary);
font-weight: 500;
}
/* "Done โ" button inside expanded form */
.giver-done-btn {
background: none;
border: 1px solid var(--color-primary);
color: var(--color-primary);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.giver-done-btn:hover {
background: var(--color-primary);
color: white;
}
.giver-form-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.giver-form-header h4 {
margin: 0;
color: var(--color-warm-900);
font-size: 16px;
font-weight: 500;
}
.remove-giver-btn {
background: none;
border: none;
font-size: 20px;
color: var(--color-warm-600);
cursor: pointer;
padding: 4px;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.remove-giver-btn:hover {
background: var(--color-warm-200);
color: var(--color-error-600);
}
.deadline-section {
margin-bottom: 24px;
}
.reminders-section {
background: var(--color-warm-100);
border: 1px solid var(--color-warm-200);
border-radius: 8px;
padding: 20px;
margin-bottom: 24px;
}
.reminders-section-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-gray-400);
margin: 0 0 12px;
}
.reminder-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.reminder-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
}
.reminder-toggle label {
font-weight: 500;
color: var(--color-warm-900);
margin: 0;
}
.recommended-badge {
background: var(--color-primary-50);
color: var(--color-primary-dark);
font-size: 11px;
padding: 4px 8px;
border-radius: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reminder-settings {
transition: opacity 0.2s ease;
}
.reminder-settings.disabled {
opacity: 0.5;
pointer-events: none;
}
.reminder-settings label {
display: block;
margin-bottom: 4px;
margin-top: 16px;
font-weight: 500;
color: var(--color-warm-800);
}
.reminder-settings label:first-child {
margin-top: 0;
}
.add-reminder-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--color-warm-100);
border: 2px dashed var(--color-warm-300);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: var(--color-warm-600);
width: 100%;
margin-top: 12px;
}
.add-reminder-btn:hover {
background: var(--color-primary-50);
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.reminder-form {
background: var(--color-warm-100);
border: 1px solid var(--color-warm-300);
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
position: relative;
}
.reminder-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.reminder-header h5 {
margin: 0;
color: var(--color-warm-900);
font-size: 14px;
font-weight: 600;
}
.reminder-header button {
background: none;
border: none;
font-size: 18px;
color: var(--color-warm-600);
cursor: pointer;
padding: 4px;
border-radius: 50%;
width: 24px;
height: 24px;
}
.helper-text {
color: var(--color-warm-600);
font-size: 12px;
font-style: italic;
margin-top: 4px;
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
STEP 4 โ SCHEDULE & NOTIFICATIONS (sd-* classes)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.sd-header {
text-align: center;
margin-bottom: 22px;
}
.sd-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 10px;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(20, 184, 166, 0.12) 0%,
rgba(45, 212, 191, 0.18) 100%);
color: var(--color-primary-dark);
box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.2);
}
.sd-header h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-warm-800);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.sd-header-sub {
font-size: 13.5px;
color: var(--color-warm-500);
margin: 0;
line-height: 1.5;
}
/* Card */
.sd-card {
position: relative;
background: linear-gradient(180deg,
rgba(240, 253, 250, 0.4) 0%,
rgba(250, 249, 247, 0.55) 100%);
border: 1px solid var(--color-warm-200);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(20, 184, 166, 0.04);
transition: border-color 200ms var(--ease-smooth),
box-shadow 200ms var(--ease-smooth);
}
.sd-card:focus-within {
border-color: rgba(20, 184, 166, 0.35);
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.08);
}
/* Progressive-focus: dims sections that haven't been reached yet on Step 4.
pointer-events stays enabled so a user can scroll past or peek; we just
visually de-emphasize. Active section gets full opacity. */
.sd-card--inactive {
opacity: 0.4;
transition: opacity 320ms var(--ease-smooth);
}
.sd-card--inactive .sd-card-header,
.sd-card--inactive .privacy-toggle-row,
.sd-card--inactive .sd-reminders {
pointer-events: none;
}
/* "Looks good โ continue โ" link inside Step 4 sections.
Acts as a manual escape hatch for users who didn't trigger auto-advance. */
.sd-continue-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px auto 0;
padding: 8px 18px;
background: transparent;
border: 1px dashed var(--color-warm-300);
border-radius: 999px;
color: var(--color-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 160ms var(--ease-smooth),
border-color 160ms var(--ease-smooth),
transform 160ms var(--ease-smooth);
}
.sd-continue-link:hover {
background: rgba(20, 184, 166, 0.06);
border-color: var(--color-primary);
transform: translateY(1px);
}
/* Center the continue link within its parent section */
.sd-card .sd-continue-link {
display: flex;
width: fit-content;
}
.sd-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.sd-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-200);
color: var(--color-warm-600);
}
.sd-card-icon--accent {
background: linear-gradient(135deg,
rgba(20, 184, 166, 0.12) 0%,
rgba(45, 212, 191, 0.18) 100%);
border-color: rgba(20, 184, 166, 0.18);
color: var(--color-primary-dark);
}
.sd-card-titles {
display: flex;
flex-direction: column;
min-width: 0;
}
.sd-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--color-warm-800);
line-height: 1.3;
letter-spacing: -0.01em;
}
.sd-card-sub {
font-size: 11.5px;
color: var(--color-warm-500);
line-height: 1.4;
margin-top: 1px;
}
/* Quick presets row */
.sd-presets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.sd-preset {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 10px 6px;
background: var(--color-warm-50);
border: 1.5px solid var(--color-warm-200);
border-radius: 10px;
color: var(--color-warm-700);
font-family: var(--font-sans);
cursor: pointer;
transition: all 180ms var(--ease-smooth);
}
.sd-preset:hover {
border-color: rgba(20, 184, 166, 0.4);
color: var(--color-primary-dark);
background: rgba(240, 253, 250, 0.7);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(20, 184, 166, 0.08);
}
.sd-preset--active {
background: linear-gradient(135deg,
var(--color-primary) 0%,
var(--color-primary-light) 100%);
border-color: var(--color-primary);
color: white;
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.28);
}
.sd-preset--active:hover {
color: white;
background: linear-gradient(135deg,
var(--color-primary-dark) 0%,
var(--color-primary) 100%);
}
.sd-preset-num {
font-size: 18px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.sd-preset-unit {
font-size: 10.5px;
font-weight: 500;
text-transform: lowercase;
letter-spacing: 0.02em;
opacity: 0.85;
}
/* Custom date row โ label + input centered together */
.sd-date-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 10px 12px;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-200);
border-radius: 10px;
transition: border-color 180ms var(--ease-smooth),
box-shadow 180ms var(--ease-smooth);
}
.sd-date-row:focus-within {
border-color: rgba(20, 184, 166, 0.45);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.sd-date-label {
font-size: 12.5px;
font-weight: 600;
color: var(--color-warm-700);
margin: 0;
}
.sd-date-input {
/* Sized to its content (no flex:1) so the label + input stay grouped and
centered by the row, instead of the input sprawling to the right edge.
min-width holds the full MM/DD/YYYY value without truncating. */
min-width: 148px;
padding: 7px 12px;
border: 1px solid var(--color-warm-200);
border-radius: 8px;
font-size: 13.5px;
line-height: 1.2;
font-family: var(--font-sans);
color: var(--color-warm-800);
background: var(--color-warm-50);
outline: none;
transition: border-color 180ms var(--ease-smooth);
}
/* iOS/WebKit paints the date value through these pseudo-elements, which
otherwise ignore the input's font-size and render it oversized (and clipped).
Pin them so the value matches the surrounding field scale. */
.sd-date-input::-webkit-date-and-time-value {
font-size: 13.5px;
text-align: left;
margin: 0;
}
.sd-date-input::-webkit-datetime-edit {
font-size: 13.5px;
padding: 0;
}
.sd-date-input:focus {
border-color: var(--color-primary);
background: var(--color-warm-50);
}
/* Smart summary line */
.sd-deadline-summary {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: rgba(20, 184, 166, 0.07);
border: 1px solid rgba(20, 184, 166, 0.18);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.45;
color: var(--color-warm-700);
animation: sd-summary-in 240ms var(--ease-smooth);
}
@keyframes sd-summary-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.sd-deadline-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-warm-50);
color: var(--color-primary);
box-shadow: 0 1px 2px rgba(20, 184, 166, 0.15);
}
.sd-deadline-summary strong {
color: var(--color-warm-800);
font-weight: 600;
}
/* Reminder schedule */
.sd-reminders {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--color-warm-300);
}
.sd-reminders-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-warm-500);
margin: 0 0 10px;
}
/* โโ Process-flow timeline โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.sd-flow {
margin-bottom: 16px;
padding: 14px 14px 16px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(240, 253, 250, 0.5) 100%);
border: 1px solid var(--color-warm-200);
border-radius: 12px;
}
.sd-flow-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-warm-500);
margin: 0 0 12px;
text-align: center;
}
/* Track: a relative-positioned canvas. Steps inside are absolutely positioned
so the distance between reminder and deadline can be proportional to the
actual time gap (set inline as `left: X%`). */
.sd-flow-track {
position: relative;
height: 90px;
padding: 8px 4px 6px;
}
/* Single dashed connector line spanning from the start-icon center to the
end-icon center. Sits behind icons (z-index 0). */
.sd-flow-track::before {
content: "";
position: absolute;
top: 25px; /* vertical center of icon: 8px padding + 18px (half of 36) - 1px stroke */
left: 18px; /* half-width of start icon */
right: 18px; /* half-width of end icon */
height: 2px;
background-image: linear-gradient(
to right,
var(--color-primary) 0%,
var(--color-primary) 60%,
transparent 60%,
transparent 100%
);
background-size: 8px 2px;
background-repeat: repeat-x;
opacity: 0.45;
z-index: 0;
}
.sd-flow-step {
position: absolute;
top: 8px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Anchors: start hugs the left edge, end hugs the right. Width is locked to the
icon (36px) so the icon center sits exactly under the dashed line endpoint.
Labels are wider than the 36px column โ align them to the inner edge so
they overflow toward the center of the timeline instead of past the
container's left/right edges. */
.sd-flow-step--start,
.sd-flow-step--end {
width: 36px;
}
.sd-flow-step--start {
left: 0;
align-items: flex-start;
text-align: left;
}
.sd-flow-step--end {
right: 0;
align-items: flex-end;
text-align: right;
}
.sd-flow-step--reminder {
transform: translateX(-50%);
transition: left 280ms var(--ease-smooth);
}
.sd-flow-icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-warm-50);
border: 2px solid var(--color-primary);
color: var(--color-primary-dark);
box-shadow: 0 2px 6px rgba(20, 184, 166, 0.15);
transition: transform 180ms var(--ease-bounce);
}
.sd-flow-step:hover .sd-flow-icon {
transform: scale(1.08);
}
.sd-flow-step--start .sd-flow-icon {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: white;
border-color: var(--color-primary);
}
.sd-flow-step--end .sd-flow-icon {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
color: white;
border-color: var(--color-primary-dark);
}
.sd-flow-step--reminder .sd-flow-icon {
background: rgba(20, 184, 166, 0.12);
border-color: rgba(20, 184, 166, 0.55);
}
.sd-flow-step--warn .sd-flow-icon {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.6);
color: var(--color-warning-700);
}
.sd-flow-step-label {
margin-top: 8px;
font-size: 11px;
font-weight: 600;
color: var(--color-warm-700);
line-height: 1.3;
letter-spacing: -0.01em;
white-space: nowrap;
}
.sd-flow-step-date {
margin-top: 1px;
font-size: 10.5px;
color: var(--color-warm-500);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Reminder fire-date under its timeline marker (B2) โ slightly smaller and
teal-tinted to tie to the reminder icon; centered under the dot. */
.sd-flow-step-date--rem {
font-size: 9.5px;
margin-top: 5px;
color: var(--color-primary-dark);
}
.sd-flow-step--start .sd-flow-step-label,
.sd-flow-step--end .sd-flow-step-label {
color: var(--color-primary-dark);
}
/* โโ Reminder editor cards โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.sd-reminder-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-200);
border-radius: 12px;
margin-bottom: 8px;
transition: border-color 180ms var(--ease-smooth),
box-shadow 180ms var(--ease-smooth);
}
.sd-reminder-card:hover {
border-color: rgba(20, 184, 166, 0.3);
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.06);
}
.sd-reminder-card:focus-within {
border-color: rgba(20, 184, 166, 0.5);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.sd-reminder-card--warn {
border-color: rgba(245, 158, 11, 0.45);
background: rgba(254, 243, 199, 0.35);
}
.sd-reminder-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
margin-top: 1px;
border-radius: 50%;
background: rgba(20, 184, 166, 0.12);
color: var(--color-primary-dark);
}
.sd-reminder-card--warn .sd-reminder-card-icon {
background: rgba(245, 158, 11, 0.18);
color: var(--color-warning-700);
}
.sd-reminder-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.sd-reminder-card-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-warm-500);
}
.sd-reminder-card-warn-pill {
padding: 2px 8px;
background: rgba(245, 158, 11, 0.18);
color: var(--color-warning-700);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sd-reminder-card-control {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13.5px;
color: var(--color-warm-800);
font-weight: 500;
}
.sd-reminder-card-prefix,
.sd-reminder-card-suffix {
color: var(--color-warm-700);
}
/* +/- stepper โ flush cells, divided by hairline borders, no detached look. */
.sd-stepper {
display: inline-flex;
align-items: stretch;
height: 34px;
flex-shrink: 0;
background: var(--color-warm-50);
border: 1.5px solid var(--color-warm-300);
border-radius: 9px;
overflow: hidden;
transition: border-color 180ms var(--ease-smooth),
box-shadow 180ms var(--ease-smooth);
}
.sd-stepper:hover {
border-color: rgba(20, 184, 166, 0.4);
}
.sd-stepper:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.sd-stepper-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 100%;
padding: 0;
border: 0;
background: var(--color-warm-100);
color: var(--color-warm-700);
cursor: pointer;
transition: background 150ms var(--ease-smooth),
color 150ms var(--ease-smooth);
}
.sd-stepper-btn:first-child {
border-right: 1px solid var(--color-warm-200);
}
.sd-stepper-btn:last-child {
border-left: 1px solid var(--color-warm-200);
}
.sd-stepper-btn:hover:not(:disabled) {
background: rgba(20, 184, 166, 0.12);
color: var(--color-primary-dark);
}
.sd-stepper-btn:active:not(:disabled) {
background: rgba(20, 184, 166, 0.2);
}
.sd-stepper-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sd-stepper-btn svg {
flex-shrink: 0;
}
.sd-stepper-input {
width: 44px;
height: 100%;
border: 0;
padding: 0 4px;
background: var(--color-warm-50);
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--color-warm-800);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
outline: none;
-moz-appearance: textfield;
}
.sd-stepper-input::-webkit-outer-spin-button,
.sd-stepper-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Small "Nd" badge on the reminder bell in the schedule overview. */
.sd-flow-icon {
overflow: visible;
}
.sd-flow-badge {
position: absolute;
bottom: -4px;
right: -8px;
min-width: 22px;
height: 16px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary-dark);
color: white;
font-size: 9.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
border-radius: 8px;
border: 1.5px solid white;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.sd-flow-step--warn .sd-flow-badge {
background: var(--color-warning-700);
}
.sd-reminder-card-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--color-warm-600);
line-height: 1.4;
}
.sd-reminder-card-meta svg {
color: var(--color-primary);
flex-shrink: 0;
}
.sd-reminder-card-meta strong {
color: var(--color-warm-800);
font-weight: 600;
}
.sd-reminder-card-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--color-warm-500);
cursor: pointer;
transition: all 150ms var(--ease-smooth);
}
.sd-reminder-card-remove:hover {
background: rgba(239, 68, 68, 0.12);
color: var(--color-error-600);
}
.sd-reminder-add {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 7px 14px;
background: var(--color-warm-50);
border: 1.5px dashed var(--color-warm-300);
border-radius: 999px;
color: var(--color-warm-600);
font-size: 12.5px;
font-weight: 600;
font-family: var(--font-sans);
cursor: pointer;
transition: all 180ms var(--ease-smooth);
}
.sd-reminder-add:hover:not(:disabled) {
border-color: var(--color-primary);
background: rgba(240, 253, 250, 0.6);
color: var(--color-primary-dark);
border-style: solid;
}
.sd-reminder-add:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--color-warm-50);
}
.sd-add-hint {
margin: 8px 0 0;
font-size: 11.5px;
color: var(--color-warm-500);
font-style: italic;
text-align: center;
line-height: 1.45;
}
/* Mobile */
@media (max-width: 768px) {
.sd-header {
margin-bottom: 18px;
}
.sd-header-icon {
width: 38px;
height: 38px;
}
.sd-header h3 {
font-size: 18px;
}
.sd-header-sub {
font-size: 12.5px;
}
.sd-card {
padding: 14px 14px;
border-radius: 12px;
}
.sd-presets {
gap: 6px;
}
.sd-preset {
padding: 9px 4px;
}
.sd-preset-num {
font-size: 16px;
}
.sd-preset-unit {
font-size: 10px;
}
.sd-date-row {
padding: 9px 10px;
gap: 8px;
}
.sd-date-input {
min-width: 136px;
}
.sd-deadline-summary {
font-size: 11.5px;
padding: 9px 10px;
}
.sd-reminder-card {
padding: 11px 12px;
gap: 10px;
border-radius: 11px;
}
.sd-reminder-card-icon {
width: 28px;
height: 28px;
}
.sd-reminder-card-control {
font-size: 13px;
gap: 6px;
}
.sd-reminder-card-meta {
font-size: 11px;
}
.sd-flow {
padding: 12px 8px 14px;
}
.sd-flow-track {
height: 80px;
}
.sd-flow-track::before {
top: 23px; /* 8px padding + 16px (half 32) - 1px stroke */
left: 16px; /* half-width of start icon (32px on mobile) */
right: 16px; /* half-width of end icon */
}
.sd-flow-step--start,
.sd-flow-step--end {
width: 32px; /* match smaller mobile icon */
}
.sd-flow-icon {
width: 32px;
height: 32px;
}
.sd-flow-step-label {
font-size: 10.5px;
}
.sd-flow-step-date {
font-size: 10px;
}
.sd-flow-badge {
min-width: 20px;
height: 14px;
font-size: 8.5px;
bottom: -3px;
right: -7px;
padding: 0 4px;
}
.sd-stepper {
height: 32px;
}
.sd-stepper-btn {
width: 30px;
}
.sd-stepper-input {
width: 38px;
font-size: 13.5px;
}
}
.requester-name {
font-size: 22px;
font-weight: 700;
color: var(--color-primary-dark);
margin-bottom: 16px;
line-height: 1.2;
}
.enhanced-giver {
background: var(--color-warm-100);
border: 2px solid var(--color-warm-300);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
}
.enhanced-giver h5 {
font-size: 16px;
font-weight: 700;
color: var(--color-primary-dark);
margin-bottom: 12px;
}
.review-instructions {
text-align: center;
font-size: 16px;
color: var(--color-warm-600);
margin-bottom: 24px;
font-weight: 400;
}
#modal-title {
text-align: center;
margin-bottom: 24px;
}
.modal-status {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.modal-status.completed {
background: #e3f2fd;
color: #1565c0;
}
.modal-status.active {
background: #e8f5e9;
color: #2e7d32;
}
/* ๐ช Logout Button */
.logout-btn {
margin-top: 8px;
padding: 6px 16px;
background: var(--color-error);
color: white;
border: none;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.logout-btn:hover {
background: var(--color-error-600);
transform: translateY(-1px);
}
/* ๐ Dashboard Loading State */
.dashboard-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.dashboard-loading.hidden {
display: none;
}
.loading-ring {
width: 44px;
height: 44px;
border: 3px solid var(--color-warm-200);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.75s linear infinite;
margin: 0 auto var(--space-4);
}
.loading-ring--sm {
width: 28px;
height: 28px;
border-width: 2px;
margin: var(--space-10) auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dashboard-loading p {
color: var(--color-warm-600);
font-size: 16px;
margin: 0;
}
/* Hide dashboard content while loading */
.dashboard-stats.loading,
.primary-action.loading,
.dashboard-grid.loading {
opacity: 0.3;
pointer-events: none;
}
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-8);
text-align: center;
background: var(--glass-white-weak);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px dashed var(--color-warm-300);
border-radius: var(--radius-2xl);
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: var(--space-5);
border-radius: var(--radius-full);
background: var(--color-primary-50);
color: var(--color-primary);
/* For legacy emoji icons that still use this class elsewhere */
font-size: 32px;
line-height: 1;
}
.empty-state-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
}
.empty-state-text {
font-size: var(--text-sm);
color: var(--color-warm-600);
line-height: var(--leading-relaxed);
max-width: 420px;
margin: 0 auto var(--space-6);
}
.empty-state-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: white;
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 60%, var(--color-primary-dark) 100%);
border: none;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(20, 184, 166, 0.28);
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.empty-state-cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(20, 184, 166, 0.34);
}
.empty-state-cta:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.22);
}
.empty-state-cta:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 3px;
}
@media (max-width: 768px) {
.empty-state {
padding: var(--space-12) var(--space-5);
}
.empty-state-icon {
width: 60px;
height: 60px;
margin-bottom: var(--space-4);
}
}
/* Screen loading (give-feedback welcome) */
.screen-loading {
display: flex;
justify-content: center;
align-items: center;
}
/* ๐ Feedback Journey Card Styles */
.feedback-journey-card {
/* Warm glass effect */
background: var(--glass-warm) !important;
backdrop-filter: blur(var(--blur-md)) !important;
-webkit-backdrop-filter: blur(var(--blur-md)) !important;
/* Smooth transitions */
transition: all var(--transition-base);
}
/* ๐ Updated journey recipient hover effects */
.journey-recipient {
cursor: default; /* Not clickable, just informational */
}
/* Footer styling */
.journey-footer {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.feedback-journey-card {
padding: 16px !important;
}
.journey-recipient {
padding: 10px 12px !important;
}
.journey-footer {
padding: 12px !important;
}
}
/* ๐ Mark Complete Button */
.mark-complete-btn {
background: rgba(16, 185, 129, 0.15) !important;
color: var(--color-success-600) !important;
border: 1px solid var(--color-success) !important;
font-weight: 600 !important;
}
.mark-complete-btn:hover {
background: rgba(16, 185, 129, 0.25) !important;
border-color: var(--color-success-600) !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}
/* Update card actions to flex properly */
.card-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* ๐ ELEGANT DASHBOARD HEADER */
.dashboard-header {
text-align: center;
margin-bottom: var(--space-10);
padding: var(--space-6) 0;
}
.header-label {
font-size: 11px;
font-weight: 700;
color: var(--color-primary);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: var(--space-2);
opacity: 0.8;
}
.header-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 300;
color: var(--color-gray-900);
letter-spacing: -0.5px;
margin: 0;
position: relative;
display: inline-block;
}
/* Subtle underline accent */
.header-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg,
transparent,
var(--color-primary),
transparent);
opacity: 0.6;
}
/* Remove old "before" pseudo-element from requests-section */
.requests-section::before {
display: none;
}
/* Update the old h2 just in case it still exists */
.requests-section h2 {
display: none;
}
/* ===================================
NEW: Compact Info Bar
=================================== */
.info-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: var(--color-warm-50);
border-radius: 12px;
border: 1px solid var(--color-gray-200);
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.info-bar-left,
.info-bar-right {
display: flex;
align-items: center;
gap: 24px;
}
.info-segment {
display: flex;
align-items: center;
gap: 8px;
}
.info-icon {
font-size: 16px;
}
.info-label {
font-weight: 600;
color: var(--color-gray-700);
font-size: 14px;
}
.info-text {
color: var(--color-gray-500);
font-size: 14px;
}
.info-count {
font-weight: 600;
color: var(--color-primary);
font-size: 14px;
}
.info-link {
background: none;
border: none;
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
padding: 0;
}
.info-link:hover {
color: #0F9B8E;
}
/* Compact Request Feedback button */
.primary-action-btn-compact {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-success) 100%);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.primary-action-btn-compact:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
/* ===================================
UPDATED: Full Width Requests Section
=================================== */
.requests-section-full {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.requests-section-full h2 {
font-size: 32px;
font-weight: 700;
color: var(--color-gray-900);
margin-bottom: 24px;
text-align: center;
}
.requests-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 24px;
}
/* Responsive: Stack on smaller screens */
@media (max-width: 768px) {
.info-bar {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.info-bar-left,
.info-bar-right {
flex-direction: column;
gap: 12px;
}
.requests-grid {
grid-template-columns: 1fr;
}
}
/* Enhanced Thank You Page */
.thank-you-content {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.98) 100%);
backdrop-filter: blur(20px);
}
/* Custom message box */
/* The requester's personal note reads as a quote line, not another box โ
the thank-you screen keeps a single boxed element (the invite CTA). */
.custom-message-box {
padding: 0;
margin: 24px auto;
max-width: 480px;
animation: slideIn 0.5s ease-out;
}
.custom-thank-you {
font-size: 19px;
color: var(--color-warm-900);
line-height: 1.6;
font-style: italic;
text-align: center;
}
.custom-thank-you strong {
color: var(--color-primary-dark);
font-weight: 600;
font-style: normal;
}
/* Confirmation message */
.confirmation-message {
font-size: 16px;
color: var(--color-warm-600);
margin: 24px 0 32px 0;
}
.confirmation-message span {
color: var(--color-warm-900);
font-weight: 600;
}
/* Plain clause inside the confirmation line (e.g. ", with your name attached") */
.confirmation-message .cm-plain {
color: inherit;
font-weight: inherit;
}
/* Quiet, borderless note (anonymous / identifiable states). Token colors so
dark mode adapts โ the old hardcoded light box glared on the dark theme. */
.gf-anon-notice {
padding: 0 8px;
margin: -16px auto 28px;
max-width: 460px;
font-size: 14px;
color: var(--color-warm-600);
line-height: 1.6;
text-align: left;
animation: screenFadeIn 0.4s ease-out 0.35s both;
display: flex;
align-items: flex-start;
gap: 12px;
}
.gf-anon-notice p {
margin: 0;
flex: 1;
}
.gf-anon-notice-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 3px; /* optical center with the first line of text */
color: var(--color-primary-dark, #0d9488);
}
/* Branded button with logo */
.branded-btn {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}
.btn-logo {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
.branded-btn:hover .btn-logo {
transform: rotate(360deg);
}
/* Animation */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Lotus flower at top */
.thank-you-logo-top {
width: 80px;
height: 80px;
margin-bottom: 24px;
animation: fadeInScale 0.6s ease forwards;
}
/* Full logo at bottom */
.thank-you-logo-bottom {
width: 120px;
margin-top: 32px;
opacity: 0.6;
}
/* Thank you page button */
.thank-you-content .continue-btn {
background: var(--color-primary);
}
/* Giver โ requester loop: framed self-invite CTA on the thank-you screen.
Calm, not salesy โ a teal-tinted card that capitalizes on the moment the
giver just experienced the product. Mirrors the .gf-anon-notice aesthetic. */
.gf-invite-cta {
margin-top: 8px;
padding: 24px 24px 26px;
border-radius: 14px;
background: rgba(20, 184, 166, 0.06);
border: 1.5px solid rgba(20, 184, 166, 0.2);
text-align: center;
animation: screenFadeIn 0.4s ease-out 0.45s both;
}
.gf-invite-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-dark, #0f766e);
margin-bottom: 8px;
}
.gf-invite-headline {
font-size: 19px;
font-weight: 600;
color: var(--color-warm-900);
margin: 0 0 8px 0;
line-height: 1.35;
}
.gf-invite-body {
font-size: 14.5px;
color: var(--color-warm-600);
line-height: 1.6;
margin: 0 auto 20px;
max-width: 460px;
}
/* Dark mode */
[data-theme="dark"] .gf-invite-cta {
background: rgba(20, 184, 166, 0.10);
border-color: rgba(20, 184, 166, 0.28);
}
[data-theme="dark"] .gf-invite-eyebrow {
color: #5EEAD4;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ============================================
๐ WISE-INSPIRED LAYOUT - Sidebar + Main Area
============================================ */
/* Main wrapper for sidebar + dashboard */
.app-layout {
display: block;
min-height: 100vh;
background: var(--color-warm-100);
}
.app-sidebar {
width: 220px;
background: var(--color-warm-100);
backdrop-filter: none;
border-right: none;
padding: var(--space-6);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
z-index: 100;
}
/* Logo section at top */
.sidebar-logo {
margin-bottom: var(--space-8);
padding-top: var(--space-3);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sidebar-logo img {
width: 100px;
height: auto;
}
/* Logo is a link home (results.html) โ hug the image so the click target
matches the mark, in both the sidebar and the mobile header. */
.sidebar-logo-link,
.mobile-logo-link {
display: inline-flex;
align-items: center;
}
.mobile-logo-link {
order: 1; /* left side of .mobile-header (menu button is order: 2) */
}
/* Navigation Items Container */
.sidebar-nav {
flex: 1; /* Takes up available space (pushes footer to bottom) */
display: flex;
flex-direction: column;
gap: var(--space-2); /* Spacing between nav items */
}
/* Individual Navigation Buttons */
.nav-item {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3); /* Space between icon and text */
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
color: var(--color-warm-700);
font-size: var(--text-sm);
font-weight: var(--font-medium);
text-decoration: none;
transition: all var(--transition-fast); /* Smooth hover effect */
cursor: pointer;
border: none; /* Remove default button border */
background: transparent;
width: 100%;
}
/* Hover effect - subtle highlight */
.nav-item:hover {
background: var(--color-warm-200);
color: var(--color-primary);
}
/* Active state - shows which page you're on */
.nav-item.active {
background: var(--color-warm-50);
color: var(--color-primary);
font-weight: var(--font-semibold);
border-radius: var(--radius-lg);
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.nav-item-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-primary);
opacity: 0.45;
transition: opacity 0.15s;
display: block;
}
.nav-item:hover .nav-item-icon {
opacity: 0.75;
}
.nav-item.active .nav-item-icon {
opacity: 1;
}
/* User Profile in Sidebar Footer */
.sidebar-footer {
padding-top: var(--space-4);
border-top: 1px solid var(--glass-border);
margin-top: auto; /* Pushes to bottom of sidebar */
}
/* Subtle brand signature below user profile */
.sidebar-brand {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--glass-border);
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-warm-500);
text-align: center;
}
/* About (info) icon button shares the brand row; the row owns the divider and
spacing so the brand text no longer carries its own. order:3 keeps it last in
the mobile footer's flex column. */
.sidebar-brand-row {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
order: 3;
}
.sidebar-brand-row .sidebar-brand {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.sidebar-about-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--color-warm-500);
text-decoration: none;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.sidebar-about-btn:hover {
color: var(--color-primary-dark);
background: var(--color-warm-100);
}
[data-theme="dark"] .sidebar-about-btn:hover { color: var(--color-primary-light); }
.user-profile-sidebar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
cursor: pointer;
}
.user-profile-sidebar:hover {
background: var(--color-warm-100);
}
/* Sidebar user menu (logout dropdown) */
.sidebar-footer {
position: relative;
}
.sidebar-user-menu {
position: absolute;
bottom: calc(100% + 4px);
left: var(--space-3);
right: var(--space-3);
background: var(--color-warm-50);
border: 1px solid var(--color-warm-200);
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
overflow: hidden;
display: none;
z-index: 200;
}
.sidebar-user-menu.open {
display: block;
}
.sidebar-logout-btn {
width: 100%;
padding: 10px var(--space-3);
background: none;
border: none;
text-align: left;
font-size: var(--text-sm);
color: var(--color-warm-700);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-2);
}
.sidebar-logout-btn:hover {
background: var(--color-warm-50);
color: var(--color-warm-900);
}
/* User Avatar Circle */
.user-avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full); /* Makes it circular (9999px radius) */
background: linear-gradient(135deg, var(--color-primary) 0%, #0ea5e9 60%, #6366f1 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: var(--font-semibold);
font-size: var(--text-sm);
}
.user-info {
flex: 1;
min-width: 0; /* Allows text-overflow to work */
}
.user-name {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-warm-800);
white-space: nowrap; /* Prevents text wrapping */
overflow: hidden; /* Hides overflow text */
text-overflow: ellipsis; /* Adds "..." if text is too long */
}
.user-email-sidebar {
font-size: var(--text-xs);
color: var(--color-warm-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Main Dashboard Area (right side) */
.dashboard-main {
margin-left: 220px; /* Pushes content to the right of sidebar */
padding: var(--space-8);
overflow-y: auto;
background: transparent;
min-height: 100vh;
position: relative;
}
/* โโ Zen backdrop: warm wash + teal blooms + ensล watermarks + rice-paper noise โโ */
.dashboard-main::before {
content: '';
position: fixed;
top: 0;
left: 220px;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-color: var(--color-warm-100);
background-image:
/* Top-right ensล (brush circle) โ large, partially off-canvas */
url("data:image/svg+xml;utf8,"),
/* Bottom-left ensล โ smaller, partially off-canvas */
url("data:image/svg+xml;utf8,"),
/* Teal bloom, upper-right */
radial-gradient(circle at 78% 18%, rgba(20, 184, 166, 0.08) 0%, transparent 55%),
/* Indigo bloom, lower-left */
radial-gradient(circle at 18% 88%, rgba(99, 102, 241, 0.05) 0%, transparent 60%),
/* Rice-paper noise */
url("data:image/svg+xml;utf8,");
background-position:
calc(100% + 140px) -90px,
-100px calc(100% + 130px),
center,
center,
0 0;
background-size:
620px 620px,
480px 480px,
100% 100%,
100% 100%,
240px 240px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.dashboard-main > * {
position: relative;
z-index: 1;
}
/* โโ Dark mode: invert the Zen backdrop โโ
Same composition (ensล circles + brand blooms + rice-paper noise) but
palette-flipped so the brand identity reads against a near-black base.
- Base color: deep slate-teal (subtle brand inflection, not pure black)
- Ensล strokes: light teal + periwinkle (visible on dark)
- Blooms: boosted opacity since low-alpha glows wash out on dark
- Noise: SVG color matrix flipped from blackโwhite for visible texture
*/
[data-theme="dark"] .dashboard-main::before {
background-color: #0D1518;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(circle at 78% 18%, rgba(20, 184, 166, 0.18) 0%, transparent 55%),
radial-gradient(circle at 18% 88%, rgba(99, 102, 241, 0.14) 0%, transparent 60%),
url("data:image/svg+xml;utf8,");
}
@media (max-width: 768px) {
/* Mobile: a right-side drawer that slides in from the same corner as the
hamburger button (top-right). Full height beneath the fixed header, ~80%
wide so the page peeks behind it, parked off-screen to the right and
animated with transform for a smooth slide. */
.app-sidebar {
position: fixed;
top: 72px; /* sits just below the fixed mobile header */
bottom: 0;
right: 0;
left: auto;
width: 80%;
max-width: 320px;
height: auto; /* top + bottom define the full height */
overflow-y: auto;
z-index: 1000;
transform: translateX(100%);/* parked off-screen to the right */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-2xl);
padding: var(--space-4);
padding-bottom: var(--space-5);
background: var(--color-warm-50);
border-radius: var(--radius-xl) 0 0 var(--radius-xl); /* round the page-facing edge */
}
/* Account + Log out pinned to the bottom of the full-height drawer.
(Mobile had no logout at all before โ the whole footer was hidden.) The
desktop click-to-reveal dropdown is shown inline here instead. */
.app-sidebar .sidebar-footer {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-top: auto; /* sit at the very bottom of the drawer */
}
.app-sidebar .user-profile-sidebar {
order: 1; /* identity on top */
}
.app-sidebar .sidebar-user-menu {
order: 2; /* actions below it, always visible (no toggle) */
position: static;
display: block;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
.app-sidebar .sidebar-brand {
display: none; /* redundant with the header logo โ and avoids another hairline */
}
/* The brand lives in the mobile header, so hide the sidebar's logo box
entirely. Otherwise its empty (image-hidden) container's bottom border
shows as a faint line above the first menu item. */
.app-sidebar .sidebar-logo {
display: none;
}
.sidebar-nav {
gap: var(--space-1);
}
.app-sidebar.mobile-open {
transform: translateX(0);
background: var(--color-warm-50);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); /* shadow falls toward the page (left) */
}
.app-sidebar.mobile-open .nav-item {
background: var(--color-warm-50);
color: var(--color-warm-700);
}
.app-sidebar.mobile-open .nav-item.active {
background: transparent;
color: var(--color-gray-900);
border: 2px solid var(--color-gray-900);
padding: calc(var(--space-3) - 2px) calc(var(--space-4) - 2px);
}
.app-sidebar.mobile-open .nav-item:hover:not(.active) {
background: var(--color-warm-100);
color: var(--color-primary);
}
/* CRITICAL: Remove left margin on mobile! */
.dashboard-main {
margin-left: 0; /* No margin - full width on mobile */
padding: 0;
padding-top: 76px; /* Clears the ~60px fixed .mobile-header + breathing room */
}
.dashboard-main::before {
left: 0;
}
/* Stats โ single row on mobile */
.dashboard-stats {
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 0;
padding: 8px 0;
margin-bottom: 24px;
}
.stat-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2px 2px;
}
.stat-label {
font-size: 10px;
letter-spacing: 0.3px;
text-align: center;
line-height: 1.2;
}
.stat-number {
font-size: 13px;
text-align: center;
}
.btn-request-feedback {
padding: 14px 24px;
font-size: 15px;
border-radius: 24px;
box-shadow: 0 3px 10px rgba(20, 184, 166, 0.25);
margin-bottom: 10px;
}
.btn-request-feedback img {
width: 20px; /* Smaller icon */
height: 20px;
}
}
/* ============================================
๐ DASHBOARD CONTENT REDESIGN (WISE-STYLE)
============================================ */
/* Page Header (the "Home" title at top) */
.page-header {
margin-bottom: var(--space-8);
}
.ap-page-header--with-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
@media (max-width: 768px) {
.ap-page-header--with-action {
flex-direction: column;
align-items: flex-start;
}
}
/* Development Planner header โ button below subtitle, left-aligned desktop */
.ap-page-header--centered {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding-bottom: var(--space-2);
}
/* Keep the button compact โ override the mobile full-width rule */
.ap-page-header--centered .ap-btn-gradient,
.ap-page-header--centered .ap-btn-gradient--sm,
.ap-page-header--centered .pg-btn-add-primary {
width: auto !important;
padding: 10px 22px;
}
@media (max-width: 768px) {
.ap-page-header--centered {
align-items: center;
text-align: center;
}
}
.page-title {
font-size: var(--text-3xl); /* Big and bold! */
font-weight: var(--font-semibold);
font-family: var(--font-display);
color: var(--color-warm-800);
margin: 0;
}
@media (max-width: 768px) {
.page-header {
margin-top: 16px;
margin-bottom: 24px;
text-align: center;
}
.page-title {
font-size: 28px;
font-weight: 600;
}
.hero-actions {
justify-content: center;
}
}
/* Hero Action Section - The Star of the Show! */
.hero-actions {
margin-bottom: var(--space-8);
display: flex;
gap: var(--space-4);
}
.btn-request-feedback {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: 14px 28px;
background: linear-gradient(135deg, var(--color-primary) 0%, #0ea5e9 60%, #6366f1 100%);
color: white;
border: none;
border-radius: 28px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: filter var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}
.btn-request-feedback:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}
.btn-request-feedback:active {
filter: none;
transform: translateY(0);
box-shadow: 0 2px 6px rgba(20, 184, 166, 0.25);
}
/* Icon styling */
.btn-request-feedback img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1); /* Makes the SVG white */
}
.btn-icon {
font-size: 22px;
}
.btn-text {
font-size: var(--text-base);
}
/* Stats Cards - Cleaner, Minimal Design */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-6);
padding: var(--space-3) 0;
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
opacity: 0.75;
}
/* โโ Hero stat layout (results.html) โโโโโโโโโโโโโโโโโโโ
Overrides the 4-col grid above with a hero card + supporting list.
Add modifier .dashboard-stats--hero to opt in. */
.dashboard-stats--hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: var(--space-6);
align-items: center;
padding: var(--space-4) 0 var(--space-6);
margin-bottom: var(--space-6);
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
opacity: 1;
}
.stat-hero {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-2) 0 var(--space-2) var(--space-6);
background: transparent;
border: none;
box-shadow: none;
}
.stat-hero-label {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-warm-600);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: var(--space-2);
}
.stat-hero-number {
font-family: var(--font-display);
font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
font-weight: var(--font-semibold);
line-height: 1;
color: var(--color-warm-800);
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
}
.stat-hero-sub {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-primary-50);
border-radius: var(--radius-full);
align-self: flex-start;
}
.stat-hero-sub-num {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary-dark);
letter-spacing: -0.01em;
}
.stat-hero-sub-text {
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-warm-700);
}
/* Left-side supporting list โ flat rows, no card chrome */
.stat-list {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
padding: var(--space-2) var(--space-6) var(--space-2) 0;
border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.stat-list-item {
flex: 0 0 auto;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
background: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.stat-list-item:last-child {
border-bottom: none;
}
.stat-list-label {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-warm-600);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.stat-list-number {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
}
/* Loading state โ fades placeholders gently */
.dashboard-stats--hero.loading {
opacity: 0.55;
}
/* Animate hero number when it updates (reuses existing count-up keyframe) */
.stat-hero-number.updating {
animation: count-up 0.5s var(--ease-bounce);
}
/* Mobile: list-style stats (iOS-Settings inspired).
Label sits on the left, number aligns right. Hero is differentiated
only by its larger number + the participation pill underneath โ no
card chrome, just thin hairline separators. Reads top-to-bottom
naturally on a phone. */
@media (max-width: 768px) {
.dashboard-stats--hero {
display: flex;
flex-direction: column;
gap: 0;
padding: var(--space-2) var(--space-1) 0;
margin-bottom: var(--space-5);
border: none;
}
/* Hero row: 2-col grid so label+number share a baseline,
and the participation pill tucks below the label on row 2.
On mobile the list now comes first; the last list item draws
the divider before the hero, so the hero itself has no top
or bottom border. */
.stat-hero {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 14px;
row-gap: 6px;
padding: 14px 0 4px;
border-right: none;
border-bottom: none;
}
.stat-hero-label {
grid-column: 1;
grid-row: 1;
align-self: center;
font-size: 11px;
letter-spacing: 0.6px;
margin: 0;
}
.stat-hero-number {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
font-size: 38px;
line-height: 1;
margin: 0;
}
.stat-hero-sub {
grid-column: 1;
grid-row: 2;
justify-self: start;
margin: 0;
padding: 3px 9px;
font-size: 11px;
}
.stat-hero-sub-num { font-size: 12px; }
.stat-hero-sub-text { font-size: 10px; }
/* Supporting stats: same row pattern, smaller numbers, hairline divider.
List comes first on mobile; its trailing border serves as the divider
before the hero, so we keep the :last-child border. */
.stat-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border-right: none;
}
.stat-list-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.stat-list-label {
font-size: 11px;
letter-spacing: 0.6px;
line-height: 1.3;
}
.stat-list-number {
font-size: 22px;
line-height: 1;
}
}
/* Dark-mode hairlines */
@media (max-width: 768px) {
[data-theme="dark"] .stat-list-item {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
}
[data-theme="dark"] .stat-list {
border-right-color: rgba(255, 255, 255, 0.06);
}
/* โโ Request tabs (results.html) โโโโโโโโโโโโโโโโโโโโโโโโ
Active / Drafts / Completed pill-tabs above the request list. Persists
selection via sessionStorage. Active tab uses --color-primary-50 (already
redefined for dark theme in design-tokens.css) so light/dark just work. */
.rq-tabs {
display: flex;
gap: 6px;
margin-bottom: var(--space-4);
padding: 0;
overflow-x: auto;
scrollbar-width: none; /* hide on Firefox */
}
.rq-tabs::-webkit-scrollbar { display: none; } /* hide on WebKit */
.rq-tab {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
padding: 8px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-warm-600);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rq-tab:hover {
background: rgba(0, 0, 0, 0.03);
color: var(--color-warm-800);
}
.rq-tab:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.rq-tab--active {
background: var(--color-primary-50);
color: var(--color-primary-dark);
border-color: rgba(13, 148, 136, 0.12);
}
.rq-tab--active:hover {
background: var(--color-primary-50);
color: var(--color-primary-dark);
}
.rq-tab-label {
font-weight: inherit;
}
/* Count chip: inherits color but uses an opaque-ish bg to read as a tag.
Lives inside the tab pill, so we keep it small + subdued. */
.rq-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.05);
color: inherit;
font-size: 11px;
font-weight: var(--font-semibold);
letter-spacing: 0.2px;
}
.rq-tab--active .rq-tab-count {
background: rgba(13, 148, 136, 0.14);
}
/* Red attention dot โ completed requests with unread perspectives. */
.rq-tab-dot {
position: absolute;
top: 4px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-error);
box-shadow: 0 0 0 2px var(--color-surface, #fff);
}
.rq-tab-dot[hidden] { display: none; }
[data-theme="dark"] .rq-tab-dot {
box-shadow: 0 0 0 2px var(--color-bg-elevated, #1f2421);
}
/* Per-tab empty state โ quieter than the full-page empty state since the
tabs themselves already give context for what's missing. */
.empty-state--tab {
padding: var(--space-10) var(--space-6);
background: transparent;
border: 1px dashed rgba(0, 0, 0, 0.10);
}
.empty-state--tab .empty-state-title {
font-size: var(--text-lg);
margin-bottom: 6px;
}
.empty-state--tab .empty-state-text {
margin: 0 auto;
}
/* Dark mode โ lighter hover bg, lighter dashed border, retuned active pill */
[data-theme="dark"] .rq-tab:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--color-warm-800);
}
[data-theme="dark"] .rq-tab--active {
background: rgba(20, 184, 166, 0.10);
color: #5eead4;
border-color: rgba(20, 184, 166, 0.22);
}
[data-theme="dark"] .rq-tab--active:hover {
background: rgba(20, 184, 166, 0.14);
}
[data-theme="dark"] .rq-tab-count {
background: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .rq-tab--active .rq-tab-count {
background: rgba(20, 184, 166, 0.20);
}
[data-theme="dark"] .empty-state--tab {
border-color: rgba(255, 255, 255, 0.10);
}
/* Mobile โ tighter pills + smaller text so the tabs fit on one line without
overflow scrolling kicking in. Count chip shrinks too. Centered on the
line (desktop stays left-aligned). */
@media (max-width: 768px) {
.rq-tabs {
gap: 4px;
margin-bottom: var(--space-3);
justify-content: center;
}
.rq-tab {
padding: 7px 12px;
font-size: 13px;
gap: 6px;
}
.rq-tab-count {
min-width: 20px;
height: 18px;
padding: 0 6px;
font-size: 10px;
}
.empty-state--tab {
padding: var(--space-8) var(--space-4);
}
}
/* Phones โ four tabs (Active ยท Past Due ยท Drafts ยท Completed) on one line at
360px. Everything compresses: type, padding, gaps, count chips, dot. */
@media (max-width: 480px) {
.rq-tabs { gap: 3px; }
.rq-tab {
padding: 6px 8px;
font-size: 11.5px;
gap: 4px;
}
.rq-tab-count {
min-width: 16px;
height: 15px;
padding: 0 4px;
font-size: 9px;
}
.rq-tab-dot {
width: 7px;
height: 7px;
top: 3px;
right: 4px;
}
}
/* โโ Basic dashboard stats (results.html) โโโโโโโโโโโโโโโ
Three peer stats in a single row: Active ยท Perspectives ยท Participation.
No hero, no state branching โ calm, glanceable, identical on every visit.
Subtle hairline divider above and below frames the block without making
it feel like a card. Works in light + dark, desktop + mobile. */
.dashboard-stats--basic {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
padding: var(--space-5) 0;
margin-bottom: var(--space-6);
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
opacity: 1;
}
.basic-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: 0 var(--space-4) 0 0;
min-width: 0; /* lets long labels wrap rather than overflow */
}
.basic-stat + .basic-stat {
border-left: 1px solid rgba(0, 0, 0, 0.06);
padding-left: var(--space-4);
}
.basic-stat-label {
font-size: 11px;
font-weight: var(--font-semibold);
color: var(--color-warm-600);
text-transform: uppercase;
letter-spacing: 0.7px;
line-height: 1.3;
/* Grid stretches the three stats to equal height; letting the label absorb
the slack pins every number to a shared baseline even when one label
wraps to two lines (e.g. "Perspectives received" on narrow screens). */
flex: 1;
}
.basic-stat-number {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
line-height: 1;
letter-spacing: -0.02em;
}
/* Dark mode โ lighter hairlines so the dividers don't disappear */
[data-theme="dark"] .dashboard-stats--basic {
border-top-color: rgba(255, 255, 255, 0.08);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .basic-stat + .basic-stat {
border-left-color: rgba(255, 255, 255, 0.08);
}
/* Mobile โ same 3-col layout, tighter padding + smaller numbers so all three
fit on a 360px viewport without truncating the label. Stats centered
(label + number) on mobile only โ desktop stays left-aligned. */
@media (max-width: 768px) {
.dashboard-stats--basic {
gap: var(--space-2);
padding: var(--space-4) 0;
margin-bottom: var(--space-4);
/* The legacy mobile .dashboard-stats rule sets align-items: center,
which stops the grid stretching the three stats to equal height โ
and the label's flex: 1 needs that stretch to keep the numbers on
a shared baseline when a label wraps to two lines. */
align-items: stretch;
}
.basic-stat {
align-items: center;
text-align: center;
gap: 6px;
padding: 0 var(--space-2);
}
.basic-stat + .basic-stat {
padding-left: var(--space-2);
}
.basic-stat-label {
font-size: 10px;
letter-spacing: 0.5px;
}
.basic-stat-number {
font-size: 22px;
}
}
/* Latest Activity Section */
.latest-activity {
margin-bottom: var(--space-8);
}
.section-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
margin-bottom: var(--space-4);
}
.activity-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background: var(--glass-white);
backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
}
.activity-icon {
font-size: 24px;
flex-shrink: 0; /* Icon won't shrink if text is long */
}
.activity-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.activity-text {
font-size: var(--text-sm);
color: var(--color-warm-700);
}
/* Requests Section */
.requests-section {
margin-bottom: var(--space-12);
}
.section-header {
display: flex;
justify-content: space-between; /* Title on left, count on right */
align-items: center;
margin-bottom: var(--space-5);
}
.section-count {
font-size: var(--text-sm);
color: var(--color-warm-600);
font-weight: var(--font-medium);
}
/* Requests List - Vertical Stack (not grid anymore) */
.requests-list {
display: flex;
flex-direction: column;
gap: var(--space-4); /* Space between cards */
}
.request-card-compact {
background: var(--glass-warm-strong);
backdrop-filter: blur(8px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
transition: all var(--transition-fast);
cursor: pointer;
position: relative;
}
.request-card-compact:hover {
background: var(--glass-white-strong);
border-color: rgba(20, 184, 166, 0.35);
transform: translateY(-2px);
box-shadow: var(--shadow-glass-sm);
}
/* Card Header - Title and Status on one line */
.request-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
.card-anon-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
color: var(--color-info-800);
background: var(--color-info-100);
border: 1px solid #BFDBFE;
border-radius: 99px;
padding: 2px 7px;
vertical-align: middle;
margin-left: 6px;
white-space: nowrap;
}
/* Mobile-only anon badge (sibling of h3, mirrors status badge position) */
.card-anon-badge--mobile {
display: none;
}
.request-title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
flex: 1; /* Takes up available space */
word-break: break-word;
overflow-wrap: anywhere;
}
/* Status Badge Base */
.status-badge {
display: inline-block;
min-width: 90px;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
font-family: var(--font-sans);
text-align: center;
}
/* โ
COMPLETED - Green */
.status-badge.completed {
background: var(--color-success-100);
color: var(--color-success-800);
border: 1px solid #6EE7B7;
}
/* โ ACTIVE - Sky blue (matches button gradient) */
.status-badge.active {
background: #E0F2FE;
color: #0369A1;
border: 1px solid #BAE6FD;
}
/* โฐ DUE SOON - Amber */
.status-badge.due-soon {
background: var(--color-warning-100);
color: var(--color-warning-800);
border: 1px solid var(--color-warning-200);
}
/* โ OVERDUE - Rose */
.status-badge.overdue {
background: #FFE4E6;
color: #9F1239;
border: 1px solid #FECDD3;
}
/* ๐ซ CANCELLED/EXPIRED - Muted gray */
.status-badge.cancelled,
.status-badge.expired,
.status-badge.pending {
background: var(--color-gray-100);
color: var(--color-gray-600);
border: 1px solid var(--color-gray-200);
}
/* Expandable Details Section (hidden by default) */
.request-details {
max-height: 0; /* Collapsed state */
overflow: hidden; /* Hides content when collapsed */
transition: max-height 0.3s ease-out; /* Smooth expand/collapse animation */
margin-top: 0;
}
.request-details.expanded {
max-height: none; /* No artificial cap โ grows to content height */
overflow-y: auto;
margin-top: var(--space-4);
}
.request-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--glass-border);
}
.meta-item {
font-size: var(--text-sm);
color: var(--color-warm-600);
}
.meta-label {
font-weight: var(--font-medium);
color: var(--color-warm-700);
}
/* Expand/Collapse Arrow Icon */
.expand-icon {
font-size: 18px;
color: var(--color-warm-600);
transition: transform var(--transition-fast);
padding: 8px;
margin: -8px;
border-radius: 50%;
}
.expand-icon:hover {
background: var(--color-warm-200);
}
.request-card-compact.expanded .expand-icon {
transform: rotate(180deg); /* Flips arrow when expanded */
}
/* ============================================
๐ MOBILE MENU BUTTON - BEAUTIFUL VERSION
============================================ */
.mobile-menu-btn {
display: none; /* Hidden on desktop */
position: relative;
width: 44px; /* Apple touch minimum; matches the slim header */
height: 44px;
background: var(--color-warm-50);
border: 2px solid var(--color-warm-200);
border-radius: var(--radius-xl);
cursor: pointer;
justify-content: center;
align-items: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition-fast);
color: var(--color-warm-700);
flex-shrink: 0;
font-size: 0; /* hide any text content */
}
/* CSS-drawn hamburger bars */
.mobile-menu-btn::before {
content: '';
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -6px);
box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.mobile-menu-btn:hover {
border-color: var(--color-primary); /* CHANGED: Border changes on hover */
box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
transform: translateY(-2px); /* CHANGED: Lift effect instead of scale */
}
.mobile-menu-btn:active {
transform: translateY(0); /* CHANGED: Push down when clicked */
}
/* When sidebar is open, button turns teal */
.mobile-menu-btn.open {
background: var(--color-primary); /* NEW: Teal background when open */
border-color: var(--color-primary);
color: white; /* NEW: White icon when open */
}
/* REMOVED all the span styles - we're using text icons now! */
/* Mobile overlay backdrop - KEEP THIS AS IS */
.mobile-sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.45); /* dim the page behind the open drawer */
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-sidebar-overlay.visible {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 768px) {
.mobile-sidebar-overlay {
display: block;
}
}
/* Enhanced Feedback Journey */
.feedback-journey {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.journey-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
letter-spacing: 0;
margin-bottom: var(--space-3);
}
.view-feedback-btn {
display: inline-block;
margin-top: var(--space-4);
padding: 8px 16px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-success) 100%);
color: white;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(20, 184, 166, 0.2);
}
.view-feedback-btn:hover {
opacity: 0.9;
box-shadow: 0 4px 8px rgba(20, 184, 166, 0.3);
}
.no-feedback-yet {
margin-top: var(--space-4);
font-size: var(--text-sm);
color: var(--color-warm-400);
font-style: italic;
}
.recipient-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
margin-bottom: var(--space-2);
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
}
.recipient-item:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateX(4px);
}
/* Status indicator dot */
.recipient-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.recipient-status-dot.completed {
background: #34a853;
box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
}
.recipient-status-dot.pending {
background: #fbbc04;
box-shadow: 0 0 0 3px rgba(251, 188, 4, 0.2);
}
.recipient-info {
flex: 1;
min-width: 0;
}
.recipient-name {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-warm-800);
}
.recipient-status-text {
font-size: var(--text-xs);
color: var(--color-warm-600);
margin-top: 2px;
}
/* =============================================
CARD INNER WRAPPER โ CSS Grid layout
Desktop: badge | title ... status
badge | progress bar
badge | bottom row
Mobile: badge status-badge
title (full width)
progress bar (full width)
bottom row (full width)
============================================= */
.card-inner-wrapper {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
column-gap: 10px;
row-gap: 6px;
align-items: center;
}
/* Desktop grid assignments:
Col 1: type badge (row 1) โ aligns with title
Col 2: title (row 1), progress (row 2), bottom row (row 3)
Status badge: absolute top-right corner of the card */
.card-type-badge { grid-column: 1; grid-row: 1; align-self: center; }
.card-status-badge { position: absolute; top: 13px; right: 14px; }
.request-title { grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; font-weight: var(--font-semibold); color: var(--color-warm-800); line-height: 1.35; padding-right: 70px; }
.card-progress-bar-wrap { grid-column: 1 / 3; grid-row: 2; position: relative; }
.card-bottom-row { grid-column: 1 / 3; grid-row: 3; display: flex; justify-content: space-between; align-items: center; }
/* Progress bar โ desktop: thin with label below */
.card-progress-bar {
height: 4px;
background: var(--color-gray-100);
border-radius: 999px;
position: relative;
overflow: hidden;
}
.card-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary) 0%, #0ea5e9 60%, #6366f1 100%);
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Rate label inside bar โ mobile only */
.card-rate-inline {
display: none;
}
.card-rate-inline strong {
color: white;
font-weight: 700;
}
/* Person icons row */
.person-icons-grid {
display: flex;
align-items: center;
gap: 3px;
flex-wrap: nowrap;
flex-shrink: 0;
}
.person-icons-grid svg {
display: block;
flex-shrink: 0;
}
.card-icons-overflow {
font-size: 10px;
color: var(--color-gray-500);
font-weight: 600;
white-space: nowrap;
margin-left: 2px;
}
/* Rate text below bar โ desktop only */
.card-rate-text {
font-size: 9px;
color: var(--color-gray-400);
letter-spacing: 0.5px;
}
.card-rate-text strong {
color: #000;
font-weight: 600;
}
/* ---- Mobile overrides ---- */
@media (max-width: 768px) {
/* 3-row grid: [emoji + title] / [progress] / [icons]
Status badge stays absolute top-right of the card */
.card-inner-wrapper {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 4px;
}
/* Row 1 col 1: type badge โ sits beside the title */
.card-type-badge {
grid-column: 1;
grid-row: 1;
width: 26px;
height: 26px;
font-size: 13px;
border-radius: 7px;
align-self: center;
}
.card-type-badge .icon-mask {
width: 14px;
height: 14px;
}
/* Status badge: absolute top-right corner, same as desktop */
.card-status-badge {
position: absolute;
top: 10px;
right: 10px;
font-size: 7px !important;
padding: 2px 7px !important;
min-width: unset !important;
}
/* Anon badge: hide inline version, show absolute top-left version */
.card-anon-badge {
display: none;
}
.card-anon-badge--mobile {
display: inline-flex;
position: absolute;
top: 10px;
left: 10px;
font-size: 7px !important;
padding: 2px 7px !important;
margin-left: 0;
}
/* Row 1 col 2: title โ no right padding needed, badge is above this row */
.request-title {
grid-column: 2;
grid-row: 1;
font-size: 12px !important;
line-height: 1.35 !important;
padding-right: 0;
}
/* Row 2: progress bar full width */
.card-progress-bar-wrap {
grid-column: 1 / 3;
grid-row: 2;
margin-top: 5px;
}
/* Row 3: bottom row full width */
.card-bottom-row {
grid-column: 1 / 3;
grid-row: 3;
}
/* Mobile: taller bar with label inside */
.card-progress-bar {
height: 13px;
border-radius: 4px;
}
.card-rate-inline {
display: block;
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
font-size: 6.5px;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.3px;
pointer-events: none;
white-space: nowrap;
}
.card-rate-text {
display: none;
}
.request-card-compact {
padding: 38px 12px 10px;
margin-bottom: 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
}
/* Better expand icon */
.expand-icon {
font-size: 20px;
color: var(--color-gray-400);
transition: transform 0.3s ease;
}
.request-card-compact.expanded .expand-icon {
transform: rotate(90deg);
}
/* Progress bar shimmer effect */
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
* Reminder info styling */
.recipient-reminder-info {
font-size: 11px;
color: var(--color-gray-500);
margin-top: 4px;
line-height: 1.4;
}
/* Mobile responsive meta items */
@media (max-width: 768px) {
.request-meta {
flex-direction: column;
gap: var(--space-2);
}
.meta-item {
width: 100%;
}
}
/* Timeline responsive display */
.timeline-desktop {
display: block;
}
.timeline-mobile {
display: none;
}
/* Switch to vertical timeline on mobile */
@media (max-width: 600px) {
.timeline-desktop {
display: none;
}
.timeline-mobile {
display: block;
}
}
/* ============================================================================
Giver journey timeline โ icon milestones, theme-aware, animated on change
============================================================================ */
.rq-journey {
--jrny-accent: var(--color-primary-dark);
--jrny-accent-soft: rgba(13, 148, 136, 0.16);
--jrny-reminder: #3B82F6; /* blue โ all reminders, scheduled + the manual extra nudge */
--jrny-reminder-soft: rgba(59, 130, 246, 0.16);
--jrny-today: #E11D48; /* rose โ the "you are here" today marker */
--jrny-today-soft: rgba(225, 29, 72, 0.14);
--jrny-final: #047857; /* deep green โ perspectives shared label/border */
--jrny-final-grad: linear-gradient(135deg, #0D9488 0%, #059669 100%); /* brand teal โ success green */
--jrny-final-soft: rgba(5, 150, 105, 0.20);
--jrny-missed: var(--color-warm-600); /* muted grey โ original deadline that lapsed before extension (#6B6662) */
--jrny-missed-soft: rgba(107, 102, 98, 0.18);
--jrny-idle: var(--color-warm-500);
--jrny-node-bg: var(--color-warm-50);
--jrny-on-accent: #ffffff;
--jrny-label: var(--color-warm-700);
--jrny-label-idle: var(--color-warm-500);
--jrny-date: var(--color-warm-500);
--jrny-line: var(--color-warm-300);
}
[data-theme="dark"] .rq-journey {
--jrny-accent: var(--color-primary-light);
--jrny-accent-soft: rgba(45, 212, 191, 0.22);
--jrny-reminder: #60A5FA;
--jrny-reminder-soft: rgba(96, 165, 250, 0.24);
--jrny-today: #FB7185;
--jrny-today-soft: rgba(251, 113, 133, 0.20);
--jrny-final: #34D399;
--jrny-final-grad: linear-gradient(135deg, #2DD4BF 0%, #34D399 100%);
--jrny-final-soft: rgba(52, 211, 153, 0.26);
--jrny-missed: var(--color-warm-600); /* flips to a visible muted grey on dark surfaces (#9595A0) */
--jrny-missed-soft: rgba(149, 149, 160, 0.20);
--jrny-idle: var(--color-warm-500);
--jrny-node-bg: var(--color-warm-200);
--jrny-on-accent: #062521;
--jrny-label: var(--color-warm-700);
--jrny-label-idle: var(--color-warm-600);
--jrny-date: var(--color-warm-500);
--jrny-line: var(--color-warm-400);
}
/* Shared node chip */
.jrny-node {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--jrny-node-bg);
border: 2px solid var(--jrny-line);
color: var(--jrny-idle);
transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.jrny-ico { width: 15px; height: 15px; display: block; }
.jrny-label { font-family: var(--font-sans); font-weight: 600; color: var(--jrny-label-idle); line-height: 1.3; }
.jrny-date { font-family: var(--font-sans); color: var(--jrny-date); line-height: 1.3; }
/* Done */
.is-done .jrny-node {
background: var(--jrny-accent);
border-color: var(--jrny-accent);
color: var(--jrny-on-accent);
box-shadow: 0 0 0 4px var(--jrny-accent-soft);
}
.is-done .jrny-label { color: var(--jrny-accent); }
/* Reminders โ calm blue, clearly off the amber "Anonymous" pill and harmonious
with the teal brand. Covers both the scheduled reminders and the manual
post-deadline "extra" nudge, which keeps only its ringing-bell icon. */
.jrny-t-reminder.is-done .jrny-node {
background: var(--jrny-reminder);
border-color: var(--jrny-reminder);
color: var(--jrny-on-accent);
box-shadow: 0 0 0 4px var(--jrny-reminder-soft);
}
.jrny-t-reminder.is-done .jrny-label { color: var(--jrny-reminder); }
/* Original deadline that lapsed before the deadline was extended. Rendered in a
muted grey (not the celebratory teal of the achieved milestones) with the date
struck through โ mirroring the card's "Originally May 27 โ โฆ" superseded-
deadline styling โ so it reads, calmly, as "this passed / was replaced". Only
the passed (done) original deadline gets this; an early extension's still-
future original keeps the neutral pending look. */
.jrny-t-missed.is-done .jrny-node {
background: var(--jrny-missed);
border-color: var(--jrny-missed);
color: var(--jrny-on-accent);
box-shadow: 0 0 0 4px var(--jrny-missed-soft);
}
.jrny-t-missed.is-done .jrny-label { color: var(--jrny-missed); }
.jrny-t-missed.is-done .jrny-date {
text-decoration: line-through;
text-decoration-thickness: 1px;
opacity: 0.85;
}
.jrny--v .jrny-t-missed.is-done .jrny-node { box-shadow: 0 0 0 3px var(--jrny-missed-soft); }
/* Perspectives shared โ the destination of the journey. Emphasised with the
brand tealโgreen gradient, a larger glow ring, a slight scale-up and a
heavier label, so it clearly reads as the final, celebratory step rather
than blending into the flat teal milestones. */
.jrny-t-final.is-done .jrny-node {
background: var(--jrny-final-grad);
border-color: transparent;
color: var(--jrny-on-accent);
box-shadow: 0 0 0 5px var(--jrny-final-soft);
}
.jrny-t-final.is-done .jrny-label { color: var(--jrny-final); font-weight: 700; }
.jrny--h .jrny-t-final.is-done .jrny-node { transform: scale(1.1); }
/* Match the smaller mobile rings */
.jrny--v .jrny-t-reminder.is-done .jrny-node { box-shadow: 0 0 0 3px var(--jrny-reminder-soft); }
.jrny--v .jrny-t-final.is-done .jrny-node { box-shadow: 0 0 0 3px var(--jrny-final-soft); }
/* Next milestone (first not-yet-done step). Kept deliberately "pending" โ a
dashed neutral ring + the breathing pulse (see .jrny-play in the animations
block) โ rather than the solid accent. An upcoming step must never borrow a
completed node's fill/colour, or it reads as already sent. Filled = happened;
dashed hollow = scheduled, not yet. */
.is-next .jrny-node {
color: var(--jrny-idle);
border-color: var(--jrny-line);
border-style: dashed;
}
/* Partial milestone โ the anonymous cohort's aggregate "shared" node when SOME
but not all givers have responded. Reads as in-progress (solid green outline +
soft fill) so it's clearly past "not started" yet short of the full done fill. */
.jrny .is-partial .jrny-node {
color: var(--jrny-final);
border-color: var(--jrny-final);
border-style: solid;
background: var(--jrny-final-soft);
}
.jrny .is-partial .jrny-label { color: var(--jrny-final); font-weight: 700; }
/* โโ Today marker โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
A small rose "you are here" bead pinned to today's position on the time
axis (desktop) or a slim divider row between milestones (mobile). When today
lands exactly on a milestone, the milestone itself takes the treatment
instead: a rose halo ring plus a "Today" tag beside its date. */
.jrny-today {
position: absolute;
top: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
transform: translateX(-50%);
pointer-events: none;
}
.jrny-today-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--jrny-today);
box-shadow: 0 0 0 3px var(--jrny-today-soft);
flex-shrink: 0;
}
.jrny-today-tag {
font-family: var(--font-sans);
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--jrny-today);
white-space: nowrap;
line-height: 1;
}
.jrny-today-date {
font-family: var(--font-sans);
font-size: 10px;
color: var(--jrny-date);
white-space: nowrap;
line-height: 1;
}
.jrny .is-today .jrny-node::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--jrny-today);
opacity: 0.55;
}
/* Mobile divider row + slightly larger tag beside a row's date */
.jrny--v .jrny-today-row {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
}
.jrny--v .jrny-today-row .jrny-rail { width: 26px; }
.jrny--v .jrny-today-meta {
display: inline-flex;
align-items: baseline;
gap: 7px;
}
.jrny--v .jrny-today-tag { font-size: 9.5px; }
.jrny--v .jrny-today-date { font-size: 11.5px; }
/* Horizontal (desktop) โ nodes absolutely placed on a shared time axis, so the
gaps reflect real elapsed time and a given date lands at the same x for every
giver. The track has side margins equal to half a step's width so the first
and last labels never clip the card edge. */
.jrny--h { width: 100%; }
.jrny--h .jrny-track {
position: relative;
height: 90px;
margin: 0 38px;
}
.jrny--h .jrny-step {
position: absolute;
top: 0;
width: 76px;
margin-left: -38px; /* centre the step on its left:% point */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
}
.jrny--h .jrny-label { font-size: 10.5px; }
.jrny--h .jrny-date { font-size: 10px; }
.jrny--h .jrny-conn {
position: absolute;
top: 15px; /* aligns with the 32px node's vertical centre */
height: 0;
border-top: 2px dotted var(--jrny-line);
transition: border-color .35s ease;
}
.jrny--h .jrny-conn.is-done { border-top-color: var(--jrny-accent); }
/* Vertical (mobile) โ smaller nodes/rings so the icons feel in proportion */
.jrny--v { display: flex; flex-direction: column; }
.jrny--v .jrny-row { display: flex; gap: 12px; }
.jrny--v .jrny-node { width: 26px; height: 26px; border-width: 1.5px; }
.jrny--v .jrny-ico { width: 12.5px; height: 12.5px; }
.jrny--v .is-done .jrny-node { box-shadow: 0 0 0 3px var(--jrny-accent-soft); }
.jrny--v .jrny-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.jrny--v .jrny-conn-v {
width: 0;
flex: 1;
min-height: 18px;
margin: 3px 0;
border-left: 2px dotted var(--jrny-line);
transition: border-color .35s ease;
}
.jrny--v .jrny-conn-v.is-done { border-left-color: var(--jrny-accent); }
.jrny--v .jrny-rowmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; min-height: 26px; padding-bottom: 14px; }
.jrny--v .jrny-row:last-child .jrny-rowmeta { padding-bottom: 0; }
.jrny--v .jrny-label { font-size: 13px; }
.jrny--v .jrny-date { font-size: 11.5px; }
/* โโ Animations โโ */
/* Entrance โ replays each time the card is expanded (the journey lives inside
the collapsible body, so .jrny-play is toggled with `expanded`). */
.rq-journey.jrny-play .jrny-step,
.rq-journey.jrny-play .jrny-row {
animation: jrny-in .5s cubic-bezier(.22, 1, .36, 1) both;
animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes jrny-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Breathing ripple on the next milestone (only while the card is open) */
.rq-journey.jrny-play .is-next .jrny-node {
animation: jrny-pulse 2.4s ease-in-out infinite;
}
@keyframes jrny-pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--jrny-accent-soft); }
50% { box-shadow: 0 0 0 7px transparent; }
}
/* Gentle breathe on the rose halo of a milestone that lands on today */
.rq-journey.jrny-play .is-today .jrny-node::before {
animation: jrny-today-breathe 2.6s ease-in-out infinite;
}
@keyframes jrny-today-breathe {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.14); opacity: 0.3; }
}
/* Celebratory pop + ring burst for steps that newly completed since last view */
.rq-journey.jrny-play .is-changed .jrny-node {
animation: jrny-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
animation-delay: calc(var(--i, 0) * 60ms + .18s);
}
.rq-journey.jrny-play .is-changed .jrny-node::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid var(--jrny-accent);
opacity: 0;
animation: jrny-ring .85s ease-out both;
animation-delay: calc(var(--i, 0) * 60ms + .18s);
}
.rq-journey.jrny-play .jrny-t-reminder.is-changed .jrny-node::after { border-color: var(--jrny-reminder); }
.rq-journey.jrny-play .jrny-t-final.is-changed .jrny-node::after { border-color: var(--jrny-final); }
@keyframes jrny-pop {
0% { transform: scale(.45); }
55% { transform: scale(1.16); }
100% { transform: scale(1); }
}
@keyframes jrny-ring {
0% { opacity: .7; transform: scale(1); }
100% { opacity: 0; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
.rq-journey.jrny-play .jrny-step,
.rq-journey.jrny-play .jrny-row,
.is-next .jrny-node,
.rq-journey.jrny-play .is-changed .jrny-node,
.rq-journey.jrny-play .is-today .jrny-node::before {
animation: none !important;
}
.rq-journey.jrny-play .is-changed .jrny-node::after { display: none; }
}
/* Optional: Add smooth transitions to timeline circles */
.feedback-journey [style*="border-radius: 50%"] {
transition: all 0.3s ease;
}
/* Feedback journey section styling (keep existing, just ensure these are present) */
.feedback-journey {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--glass-border);
}
.journey-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-warm-800);
letter-spacing: 0;
margin-bottom: var(--space-3);
}
/* Close button inside sidebar (mobile only) */
.sidebar-close-btn {
display: none;
position: absolute;
top: 16px;
right: 16px;
width: 32px; /* Reduced from 36px */
height: 32px; /* Reduced from 36px */
border: none;
background: transparent; /* Transparent background */
border-radius: 50%;
color: var(--color-gray-500); /* Lighter gray */
font-size: 24px; /* Icon size */
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0; /* Remove any padding */
}
.sidebar-close-btn:hover {
background: var(--color-gray-100); /* Subtle hover background */
color: var(--color-gray-700); /* Darker on hover */
transform: rotate(90deg); /* Subtle rotation animation */
}
@media (max-width: 768px) {
.sidebar-close-btn {
display: flex;
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
}
}
.mobile-header {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Button inside mobile header should not have conflicting positioning */
.mobile-header .mobile-menu-btn {
position: relative;
top: auto;
left: auto;
order: 2;
margin-left: auto;
}
.mobile-logo {
/* 40px keeps the fixed header ~60px tall โ app-bar scale, not hero scale. */
height: 40px;
width: auto;
}
@media (max-width: 768px) {
/* Mobile header - fixed at top */
.mobile-header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1001;
padding: 10px 16px;
background: var(--color-warm-100);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Menu button inside header */
.mobile-menu-btn {
display: flex;
}
/* Hide sidebar logo on mobile */
.app-sidebar .sidebar-logo img {
display: none;
}
.mobile-sidebar-overlay {
display: block;
}
}
@media (max-width: 768px) {
/* Bulletin board header */
.requests-section > div:first-child {
padding: 0 8px; /* Add horizontal padding */
margin-bottom: 16px; /* Reduce space before cards */
}
/* (Removed legacy `.requests-section svg { width:40px }` โ it was for an old
bulletin-board header icon that no longer exists and only inflated the
request-card icons on โค768px. Card icons now keep their authored sizes.) */
/* "My Feedback Board" title */
.requests-section h2,
div[style*="font-size: 28px"] {
font-size: 24px !important; /* Smaller title */
}
/* Request count text */
#requests-count {
font-size: 12px !important;
opacity: 0.7;
}
}
@media (max-width: 768px) {
/* Smooth entrance animation for cards */
.request-card-compact {
animation: slideInUp 0.3s ease-out backwards;
}
.request-card-compact:nth-child(1) { animation-delay: 0.1s; }
.request-card-compact:nth-child(2) { animation-delay: 0.2s; }
.request-card-compact:nth-child(3) { animation-delay: 0.3s; }
/* Stats cards micro-animation */
.stat-number {
transition: transform 0.2s ease;
}
.stat-card:active .stat-number {
transform: scale(1.1);
}
/* Button press feedback */
.btn-request-feedback:active {
transform: scale(0.98);
box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
}
}
/* Question filter buttons */
.filter-btn {
padding: 6px 12px;
background: var(--color-gray-100);
border: 1px solid var(--color-gray-200);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--color-gray-500);
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover {
background: var(--color-gray-200);
color: var(--color-gray-700);
}
.filter-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 1800px) {
.wizard-content {
max-width: 550px !important;
}
}
/* ============================================
WIZARD STEP SUBTITLE
============================================ */
.wizard-step-subtitle {
color: var(--color-warm-600);
font-size: 14px;
margin: -12px 0 20px;
line-height: 1.5;
}
/* ============================================
STEP 1 โ FOCUS AREA SECTION
============================================ */
.focus-area-section {
background: #F9F7F4;
border-radius: 18px;
padding: 20px 16px 18px;
margin-bottom: 24px;
border: 1px solid rgba(0,0,0,0.06);
}
.focus-area-section .step1-section-label {
margin-bottom: 4px;
font-size: 20px;
text-align: center;
}
.focus-area-hint {
font-size: 11px;
color: var(--color-warm-400);
text-align: center;
margin: 0 0 14px;
font-style: italic;
}
/* โโ Grid โโ */
.feedback-type-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
transition: opacity 0.25s ease;
}
.feedback-type-cards.grid-dimmed { opacity: 0.28; pointer-events: none; }
/* โโ Cards โโ */
.feedback-type-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 6px;
aspect-ratio: 1 / 1;
background: var(--color-warm-50);
border: 1px solid rgba(0,0,0,0.09);
border-radius: 14px;
cursor: pointer;
text-align: center;
width: 100%;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.feedback-type-card:hover {
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0,0,0,0.08), 0 8px 22px rgba(0,0,0,0.06);
border-color: rgba(0,0,0,0.14);
}
.feedback-type-card:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition-duration: 0.07s;
}
.feedback-type-card.previewing {
border-color: rgba(13, 148, 136, 0.5);
background: rgba(13, 148, 136, 0.03);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1), 0 3px 10px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.feedback-type-card.selected {
border-color: var(--color-primary-dark);
background: rgba(13, 148, 136, 0.05);
transform: translateY(-1px);
box-shadow: 0 0 0 1.5px var(--color-primary-dark), 0 4px 14px rgba(13,148,136,0.15);
}
[data-theme="dark"] .feedback-type-card.previewing {
background: rgba(20, 184, 166, 0.12);
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22), 0 3px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .feedback-type-card.selected {
background: rgba(20, 184, 166, 0.16);
box-shadow: 0 0 0 1.5px var(--color-primary), 0 4px 14px rgba(20, 184, 166, 0.3);
}
[data-theme="dark"] .feedback-type-card.selected .type-card-label,
[data-theme="dark"] .feedback-type-card.previewing .type-card-label {
color: var(--color-primary-light);
}
/* โโ Card icon (SVG) โโ */
.type-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
/* โโ Icon mask โ SVG as CSS mask, gradient fill โโ */
.icon-mask {
display: block;
width: 28px;
height: 28px;
background-image: linear-gradient(135deg, var(--color-primary) 0%, #0ea5e9 60%, #6366f1 100%);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transition: transform 0.18s ease, filter 0.18s ease;
}
/* โโ Hover: scale + darken โโ */
.feedback-type-card:hover .icon-mask { transform: scale(1.1); filter: brightness(0.82); }
/* โโ Focus area icons โ swap paths here as SVGs are created โโ */
.icon-general { mask-image: url('/assets/general-icon.svg'); -webkit-mask-image: url('/assets/general-icon.svg'); }
.icon-career { mask-image: url('/assets/career-icon.svg'); -webkit-mask-image: url('/assets/career-icon.svg'); }
.icon-new-role { mask-image: url('/assets/new-role-icon.svg'); -webkit-mask-image: url('/assets/new-role-icon.svg'); }
.icon-project { mask-image: url('/assets/project-icon.svg'); -webkit-mask-image: url('/assets/project-icon.svg'); }
.icon-event { mask-image: url('/assets/event-icon.svg'); -webkit-mask-image: url('/assets/event-icon.svg'); }
.icon-leadership { mask-image: url('/assets/leadership-icon.svg'); -webkit-mask-image: url('/assets/leadership-icon.svg'); }
.icon-people { mask-image: url('/assets/people-management-icon.svg'); -webkit-mask-image: url('/assets/people-management-icon.svg'); }
.icon-collab { mask-image: url('/assets/collaboration-icon.svg'); -webkit-mask-image: url('/assets/collaboration-icon.svg'); }
.icon-one-on-one { mask-image: url('/assets/one-on-one-icon.svg'); -webkit-mask-image: url('/assets/one-on-one-icon.svg'); }
.icon-client { mask-image: url('/assets/client-icon.svg'); -webkit-mask-image: url('/assets/client-icon.svg'); }
.icon-skill { mask-image: url('/assets/skill-behavior-icon.svg'); -webkit-mask-image: url('/assets/skill-behavior-icon.svg'); }
.icon-custom { mask-image: url('/assets/custom-icon.svg'); -webkit-mask-image: url('/assets/custom-icon.svg'); }
/* โโ Card label โโ */
.type-card-label {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-warm-800);
line-height: 1.25;
text-align: center;
width: 100%;
}
.feedback-type-card.selected .type-card-label,
.feedback-type-card.previewing .type-card-label {
color: var(--color-primary-dark);
}
.feedback-type-card.selected .icon-mask,
.feedback-type-card.previewing .icon-mask {
transform: scale(1.1);
filter: brightness(0.82);
}
/* โโ Backdrop โโ */
.fa-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 8, 6, 0.38);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 200;
}
.fa-backdrop-t { transition: opacity 0.22s ease; }
.fa-backdrop-hidden { opacity: 0; }
.fa-backdrop-visible { opacity: 1; }
/* โโ Expanded panel โ visual shell only, no overflow โโ */
.fa-expanded {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
z-index: 201;
background: var(--color-warm-50);
border-radius: 24px;
width: min(92vw, 480px);
max-height: 88vh;
overflow: hidden; /* shell clips content, no scrollbar here */
box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
}
/* โโ Inner scroll body โ scrollbar lives here, well inside the shell โโ */
.fae-scroll-body {
overflow-y: auto;
overscroll-behavior: contain;
flex: 1;
padding: 10px 28px 28px 22px; /* top-bar already gives top space; extra right keeps text clear of scrollbar */
/* Firefox */
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.fae-scroll-body::-webkit-scrollbar {
width: 5px;
}
.fae-scroll-body::-webkit-scrollbar-track {
background: transparent;
margin-bottom: 20px;
}
.fae-scroll-body::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.14);
border-radius: 10px;
}
.fae-scroll-body::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.25);
}
.fa-exp-t { transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease; }
.fa-exp-hidden { transform: translate(-50%, -50%) scale(0.94); opacity: 0; }
.fa-exp-visible{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
/* No drag handle needed (not a bottom sheet) */
.fa-expanded::before { display: none; }
/* โโ Non-scrolling top bar โ scrollbar starts below this โโ */
.fae-top-bar {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 14px 16px 0;
}
/* โโ Close button โโ */
.fae-close {
width: 30px; height: 30px;
border-radius: 50%;
background: #F5F4F2;
border: none;
font-size: 12px;
color: #78716C;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.fae-close:hover { background: #EAE8E4; color: #1C1917; }
/* โโ Hero row โโ */
.fae-hero {
display: grid;
grid-template-columns: 40px 1fr;
grid-template-rows: 40px;
align-items: center;
gap: 14px;
}
.fae-emoji {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-dark);
}
.fae-emoji .icon-mask {
width: 40px;
height: 40px;
}
.fae-title {
flex: 1;
min-width: 0;
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
color: #1C1917;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
}
.fae-confirmed {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
color: var(--color-primary-dark);
letter-spacing: 0.03em;
}
/* โโ Divider โโ */
.fae-rule {
height: 1px;
background: rgba(0,0,0,0.07);
margin: 18px 0 16px;
border: none;
display: block;
}
/* โโ Description โโ */
.fae-desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13.5px;
color: #3D3835;
line-height: 1.75;
margin: 0 0 18px;
}
/* โโ Question preview โโ */
.fae-questions {
background: #F9F7F4;
border-radius: 14px;
padding: 15px 17px 13px;
margin-bottom: 18px;
border: 1px solid rgba(0,0,0,0.05);
}
.fae-questions-label {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #A8A29E;
margin: 0 0 11px;
}
.fae-question-list {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.fae-question-list li {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12.5px;
color: #44403C;
line-height: 1.55;
padding-left: 13px;
position: relative;
}
.fae-question-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 4px; height: 4px;
border-radius: 50%;
background: #C8C4BF;
}
.fae-library-note {
font-size: 11px;
color: #A8A29E;
font-style: italic;
margin: 0;
border-top: 1px solid rgba(0,0,0,0.07);
padding-top: 10px;
line-height: 1.5;
}
/* โโ Actions โโ */
.fae-actions {
display: flex;
gap: 10px;
}
.fae-btn-ghost {
flex: 1;
padding: 13px 14px;
background: transparent;
border: 1.5px solid rgba(0,0,0,0.14);
border-radius: 12px;
font-size: 13.5px;
font-weight: 500;
color: #44403C;
cursor: pointer;
letter-spacing: 0.01em;
transition: border-color 0.15s, background 0.15s;
}
.fae-btn-ghost:hover { border-color: rgba(0,0,0,0.28); background: #F9F7F4; }
.fae-btn-primary {
flex: 2;
padding: 13px 14px;
background: #1C1917;
border: none;
border-radius: 12px;
font-size: 13.5px;
font-weight: 600;
color: #FFFFFF;
cursor: pointer;
letter-spacing: 0.015em;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fae-btn-primary:hover {
background: #292524;
box-shadow: 0 4px 18px rgba(0,0,0,0.28);
transform: translateY(-1px);
}
.fae-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.fae-btn-primary:disabled {
background: #A8A29E;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* โโ Desktop overrides โโ */
@media (min-width: 700px) {
.focus-area-section { padding: 24px 22px 22px; }
.feedback-type-cards {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* Bump icon size so it doesn't get visually overwhelmed by 2-3 line
labels (e.g. "Career & Career Transitions"). Card aspect-ratio + gap
are unchanged โ only the icon and inner gap grow. */
.feedback-type-card { gap: 12px; padding: 12px 10px; }
.type-card-icon { width: 46px; height: 46px; }
.icon-mask { width: 46px; height: 46px; }
.type-card-label { font-size: 14px; line-height: 1.25; }
.fae-title { font-size: 42px; }
.fae-desc { font-size: 14px; }
}
/* ============================================
STEP 3 โ QUESTION BUILDER
============================================ */
.q-list {
margin-bottom: 4px;
}
.q-preloaded-hint {
font-size: 12px;
color: var(--color-warm-500);
font-style: italic;
margin-bottom: 8px;
}
.q-template-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 10px;
margin-bottom: 10px;
background: rgba(20, 184, 166, 0.08);
border: 1px solid rgba(20, 184, 166, 0.28);
border-radius: 999px;
font-size: 12px;
color: var(--color-primary-darker);
max-width: 100%;
}
.q-template-pill-icon {
display: inline-flex;
color: var(--color-primary-darker);
flex-shrink: 0;
}
.q-template-pill-label {
font-weight: 500;
color: var(--color-warm-600);
white-space: nowrap;
}
.q-template-pill-name {
font-weight: 700;
color: var(--color-primary-darker);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.q-card {
background: var(--color-warm-100);
border: 1px solid var(--color-warm-200);
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.q-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.q-card-header {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 11px 12px 11px 8px;
}
/* Up/Down arrows */
.q-card-arrows {
display: flex;
flex-direction: column;
gap: 3px;
flex-shrink: 0;
padding-top: 2px;
}
.q-arrow-btn {
background: var(--color-warm-50);
border: 1px solid var(--color-warm-300);
border-radius: 4px;
width: 22px;
height: 22px;
font-size: 11px;
cursor: pointer;
color: var(--color-warm-600);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.15s;
line-height: 1;
}
.q-arrow-btn:hover:not(:disabled) {
background: rgba(20, 184, 166, 0.08);
border-color: var(--color-primary);
color: var(--color-primary);
}
.q-arrow-btn:disabled {
opacity: 0.28;
cursor: not-allowed;
}
/* Question text + badge */
.q-card-content {
flex: 1;
min-width: 0;
}
.q-card-text {
display: block;
font-size: 13px;
color: var(--color-warm-800);
line-height: 1.45;
margin-bottom: 6px;
word-break: break-word;
}
/* Type badge */
.q-type-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.q-type-textarea {
background: var(--color-info-50);
color: var(--color-info-700);
}
.q-type-rating {
background: #FFF7ED;
color: #C2410C;
}
.q-type-multiple_choice {
background: #F5F3FF;
color: #7C3AED;
}
.q-type-sbi {
background: #FFF3E0;
color: #E65100;
}
/* Left-border accent by question type */
.q-card--sbi { border-left: 3px solid #FFD699; }
/* Edit / Delete buttons */
.q-card-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
align-items: flex-start;
padding-top: 1px;
}
.q-edit-btn {
background: none;
border: none;
color: var(--color-warm-500);
cursor: pointer;
padding: 4px 5px;
border-radius: 4px;
transition: all 0.15s;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.q-edit-btn:hover {
background: rgba(20, 184, 166, 0.08);
color: var(--color-primary-dark);
}
.q-delete-btn {
background: none;
border: none;
color: var(--color-warm-500);
cursor: pointer;
padding: 4px 5px;
border-radius: 4px;
line-height: 1;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.q-delete-btn:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--color-error);
}
/* Inline edit panel */
.q-edit-panel {
border-top: 2px solid var(--color-primary);
padding: 14px 14px 16px;
background: #f8fffe;
}
.q-edit-panel label,
.q-custom-form label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--color-warm-600);
margin-bottom: 5px;
margin-top: 12px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.q-edit-panel label:first-child,
.q-custom-form label:first-of-type {
margin-top: 0;
}
.q-edit-textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--color-warm-300);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
color: var(--color-warm-900);
resize: vertical;
box-sizing: border-box;
transition: border-color 0.2s;
}
.q-edit-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.q-edit-select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--color-warm-300);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
color: var(--color-warm-900);
background: var(--color-warm-50);
box-sizing: border-box;
cursor: pointer;
}
.q-edit-select:focus {
outline: none;
border-color: var(--color-primary);
}
.q-edit-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 14px;
}
/* โโโ Anchor picker (custom + edit forms) โโโโโโโโโโโโโโโโโโโโโโ */
.q-anchor-picker {
margin-top: 14px;
}
.q-anchor-picker > label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-warm-700);
margin-bottom: 8px;
}
.q-anchor-optional {
font-weight: 400;
color: var(--color-warm-400);
}
.q-anchor-opts {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.q-anchor-opt {
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
color: var(--color-warm-600);
background: var(--color-warm-100);
border: 1.5px solid var(--color-warm-300);
border-radius: 99px;
cursor: pointer;
transition: all 0.15s ease;
line-height: 20px;
}
.q-anchor-opt:hover {
border-color: var(--color-primary);
color: var(--color-primary-dark);
background: var(--color-primary-50);
}
.q-anchor-opt--active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
font-weight: 600;
}
.q-anchor-opt--active:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: white;
}
/* Live preview strip */
.q-anchor-preview {
display: flex;
gap: 4px;
margin-top: 10px;
padding: 10px 12px;
background: var(--color-warm-100);
border: 1px solid var(--color-warm-200);
border-radius: 10px;
}
.q-anchor-preview-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
gap: 4px;
min-width: 0;
}
.q-anchor-preview-num {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1.5px solid var(--color-warm-300);
background: var(--color-warm-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: var(--color-warm-600);
flex-shrink: 0;
}
.q-anchor-preview-label {
font-size: 9px;
font-weight: 500;
color: var(--color-warm-500);
text-align: center;
line-height: 1.3;
word-break: break-word;
hyphens: auto;
padding: 0 1px;
}
/* N/A toggle in wizard forms */
.q-allow-na-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 10px;
background: var(--color-warm-100);
border: 1px solid var(--color-warm-200);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--color-warm-700);
user-select: none;
}
.q-allow-na-row input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--color-primary);
flex-shrink: 0;
cursor: pointer;
}
.q-allow-na-row:hover {
border-color: var(--color-warm-300);
background: var(--color-warm-200);
}
.q-edit-cancel-btn {
background: var(--color-warm-50);
border: 1px solid var(--color-warm-300);
color: var(--color-warm-700);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.q-edit-cancel-btn:hover {
background: var(--color-warm-100);
}
.q-edit-save-btn {
background: var(--color-primary);
border: none;
color: white;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 6px rgba(20, 184, 166, 0.22);
}
.q-edit-save-btn:hover:not(:disabled) {
background: var(--color-primary-dark);
}
.q-edit-save-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
/* Multiple-choice choice builder */
.q-choice-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.q-choice-row .feedback-input {
flex: 1;
margin-bottom: 0;
}
.q-choice-remove-btn {
flex-shrink: 0;
background: none;
border: 1px solid var(--color-error-600);
color: var(--color-error-600);
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.q-choice-remove-btn:hover {
background: var(--color-error-50);
}
.q-choice-add-btn {
background: none;
border: 1px dashed var(--color-warm-600);
color: var(--color-warm-600);
border-radius: 4px;
padding: 4px 10px;
font-size: 13px;
cursor: pointer;
margin-top: 2px;
margin-bottom: 10px;
}
.q-choice-add-btn:hover {
border-color: #1a73e8;
color: #1a73e8;
}
/* Action row: Write Own + Library */
.q-action-row {
display: flex;
gap: 8px;
margin: 4px 0 8px;
}
.q-action-row .add-giver-btn {
flex: 1;
margin-bottom: 0;
}
.q-library-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 16px;
background: rgba(20, 184, 166, 0.06);
border: 1.5px solid var(--color-primary);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--color-primary-dark);
font-weight: 500;
transition: all 0.2s ease;
}
.q-library-btn:hover {
background: rgba(20, 184, 166, 0.12);
}
/* Custom question form */
.q-custom-form {
background: var(--color-warm-50);
border: 1.5px solid var(--color-primary);
border-radius: 8px;
padding: 16px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.1);
}
.q-custom-form h4 {
font-size: 14px;
font-weight: 600;
color: var(--color-warm-800);
margin: 0 0 14px;
}
/* Library panel */
.q-library {
background: var(--color-warm-50);
border: 1px solid var(--color-warm-200);
border-radius: 8px;
padding: 16px;
margin-bottom: 8px;
}
.q-library-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.q-library-header h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--color-warm-800);
}
.q-library-close {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--color-warm-500);
padding: 0 4px;
line-height: 1;
border-radius: 4px;
transition: all 0.15s;
}
.q-library-close:hover {
background: var(--color-warm-200);
color: var(--color-warm-600);
}
.q-library-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.q-library-list {
max-height: 240px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.q-library-item {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 10px 14px !important;
font-size: 13px;
gap: 10px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.q-action-row--cards {
grid-template-columns: 1fr;
}
.q-library-list {
max-height: 180px;
}
.feedback-type-card {
padding: 12px 6px 10px;
min-height: 82px;
}
}
/* โโ Psychology-informed improvements โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* Context box shown to feedback givers on Screen 2 */
.request-context-box {
background: var(--color-success-50);
border: 1px solid #BBF7D0;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 20px;
}
.context-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--color-success-800);
margin: 0 0 6px;
}
.context-text {
font-size: 13px;
color: var(--color-gray-800);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.request-context-box {
padding: 10px 12px;
margin-bottom: 14px;
}
.context-label {
font-size: 11px;
margin-bottom: 4px;
}
.context-text {
font-size: 12px;
line-height: 1.5;
}
}
/* Coaching tip banner on Screen 2 */
.coaching-tip-banner {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--color-warning-50);
border: 1px solid var(--color-warning-200);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 24px;
}
.coaching-tip-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.coaching-tip-text {
font-size: 13px;
color: #78350F;
line-height: 1.55;
margin: 0;
}
/* Thank-you sub-headline */
.thank-you-subtext {
font-size: 15px;
color: var(--color-gray-500);
line-height: 1.6;
margin: 8px auto 24px;
text-align: center;
max-width: 380px;
width: 100%;
}
/* Pre-reflection interstitial in results modal */
.pre-reflection-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 24px 24px;
}
.pre-reflection-icon {
font-size: 48px;
margin-bottom: 16px;
}
.pre-reflection-title {
font-size: 22px;
font-weight: 700;
color: var(--color-gray-900);
margin: 0 0 12px;
}
.pre-reflection-text {
font-size: 15px;
color: var(--color-gray-700);
line-height: 1.65;
max-width: 400px;
margin: 0 0 20px;
}
.pre-reflection-list {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
max-width: 380px;
width: 100%;
}
.pre-reflection-list li {
font-size: 14px;
color: var(--color-gray-600);
padding: 10px 14px;
background: var(--color-gray-50);
border-radius: 8px;
border-left: 3px solid var(--color-primary);
line-height: 1.5;
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
STEP 3 ENHANCEMENTS โ Builder header, library, preview
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* Builder header: title + preview button side by side */
.q-builder-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 8px;
margin-bottom: 16px;
}
.q-builder-header h3 { margin-bottom: 4px; }
/* Override the global negative-margin rule inside the builder header */
.q-builder-header .wizard-step-subtitle {
margin: 0;
}
/* "Preview Form" trigger button */
.q-preview-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
background: var(--color-warm-50);
border: 1.5px solid var(--color-primary);
border-radius: 20px;
color: var(--color-primary-dark);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s ease;
margin-top: 2px;
}
.q-preview-btn:hover {
background: rgba(20, 184, 166, 0.08);
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
}
.q-header-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.q-save-template-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--color-warm-50);
border: 1.5px solid var(--color-warm-300, #d6d3cf);
border-radius: 20px;
color: var(--color-warm-700, #52524c);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
margin-top: 2px;
}
.q-save-template-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.q-save-template-btn:hover:not(:disabled) {
border-color: var(--color-primary);
color: var(--color-primary-dark);
background: rgba(20, 184, 166, 0.05);
}
.q-save-template-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* โโ Saved-template picker on Step 1 โโโโโโโโโโโโโโโโโโโโโโโโ */
.tpl-picker {
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed var(--color-warm-300, #d6d3cf);
}
.tpl-picker-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.tpl-picker-label {
font-size: 13px;
font-weight: 600;
color: var(--color-warm-700, #52524c);
}
.tpl-picker-count {
font-size: 11px;
color: var(--color-warm-500, #94928b);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tpl-picker-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tpl-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--color-warm-50);
border: 1px solid var(--color-warm-300, #d6d3cf);
border-radius: 999px;
color: var(--color-warm-800);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tpl-chip:hover {
border-color: var(--color-primary);
background: rgba(20, 184, 166, 0.06);
}
.tpl-chip-count {
font-size: 11px;
color: var(--color-warm-500, #94928b);
background: var(--color-warm-100, #f5f3f0);
border-radius: 999px;
padding: 1px 7px;
}
/* โโ Focus-area header (title centered, loader below) โโโโโโโ */
.focus-area-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.focus-area-header > div:first-child {
text-align: center;
width: 100%;
}
/* โโ Collapsible template loader โโโโโโโโโโโโโ */
.tpl-loader {
position: relative;
flex-shrink: 0;
}
.tpl-loader-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: rgba(20, 184, 166, 0.06);
border: 1px solid rgba(20, 184, 166, 0.28);
border-radius: 999px;
color: var(--color-warm-800, #2E2C2A);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.tpl-loader-toggle:hover {
background: rgba(20, 184, 166, 0.11);
border-color: rgba(20, 184, 166, 0.45);
}
.tpl-loader-toggle--open {
background: rgba(20, 184, 166, 0.11);
border-color: rgba(20, 184, 166, 0.5);
}
.tpl-loader-icon {
width: 13px;
height: 13px;
color: var(--color-primary-darker);
flex-shrink: 0;
}
.tpl-loader-label {
line-height: 1;
}
.tpl-loader-count {
font-size: 10.5px;
font-weight: 700;
color: var(--color-primary-darker);
background: rgba(20, 184, 166, 0.18);
border-radius: 999px;
padding: 2px 7px;
min-width: 18px;
text-align: center;
line-height: 1.3;
}
.tpl-loader-chev {
width: 11px;
height: 11px;
color: var(--color-warm-600, #6b6a64);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.tpl-loader-toggle--open .tpl-loader-chev {
transform: rotate(180deg);
}
.tpl-loader-panel {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
z-index: 30;
min-width: 240px;
max-width: min(380px, 92vw);
padding: 10px;
background: var(--color-warm-50);
border: 1px solid rgba(17, 24, 39, 0.1);
border-radius: 12px;
box-shadow: 0 12px 32px -8px rgba(17, 24, 39, 0.18);
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
/* โโ Save-as-Template modal โโโโโโโโโโโโโ */
.tpl-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(17, 24, 39, 0.42);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.tpl-modal {
background: var(--color-warm-50);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(46, 44, 42, 0.06),
0 24px 60px -16px rgba(17, 24, 39, 0.28);
width: 100%;
max-width: 440px;
padding: 22px 22px 20px;
font-family: var(--font-sans);
}
.tpl-modal-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.tpl-modal-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(20, 184, 166, 0.12);
color: var(--color-primary-darker);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tpl-modal-title {
margin: 0 0 2px 0;
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--color-warm-800);
line-height: 1.25;
}
.tpl-modal-sub {
margin: 0;
font-size: 12.5px;
color: var(--color-warm-600);
line-height: 1.45;
}
.tpl-modal-label {
display: block;
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-warm-600);
margin-bottom: 6px;
}
.tpl-modal-input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid rgba(17, 24, 39, 0.14);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--color-warm-800);
background: var(--color-warm-50);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpl-modal-input:focus {
outline: none;
border-color: rgba(20, 184, 166, 0.6);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.tpl-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
}
.tpl-modal-cancel,
.tpl-modal-save,
.tpl-modal-save-new {
padding: 8px 16px;
border-radius: 9px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.tpl-modal-cancel {
background: var(--color-warm-50);
color: var(--color-warm-700);
border-color: rgba(17, 24, 39, 0.12);
}
.tpl-modal-cancel:hover:not(:disabled) {
background: var(--color-gray-50);
border-color: rgba(17, 24, 39, 0.2);
}
.tpl-modal-save {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-darker) 100%);
color: #ffffff;
box-shadow: 0 4px 12px -3px rgba(15, 118, 110, 0.35);
}
.tpl-modal-save:hover:not(:disabled) {
filter: brightness(1.05);
}
.tpl-modal-save-new {
background: var(--color-warm-50);
color: var(--color-warm-700);
border-color: rgba(20, 184, 166, 0.45);
}
.tpl-modal-save-new:hover:not(:disabled) {
background: rgba(20, 184, 166, 0.06);
border-color: rgba(20, 184, 166, 0.7);
}
.tpl-modal-cancel:disabled,
.tpl-modal-save:disabled,
.tpl-modal-save-new:disabled,
.tpl-modal-delete:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Destructive variant โ used by the draft "Delete this draft?" modal */
.tpl-modal-icon--danger {
background: rgba(239, 68, 68, 0.12);
color: var(--color-error-700);
}
.tpl-modal-delete {
padding: 8px 16px;
border-radius: 9px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-700) 100%);
color: #FFFFFF;
box-shadow: 0 4px 12px -3px rgba(185, 28, 28, 0.4);
transition: filter 0.15s ease;
}
.tpl-modal-delete:hover:not(:disabled) {
filter: brightness(1.05);
}
/* โโ Leave / unsaved-progress modal โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.leave-modal-note {
margin-top: 12px;
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.45;
color: var(--color-warm-600);
}
.leave-modal-error {
margin-top: 10px;
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.45;
color: var(--color-error-700);
}
/* "Discard & leave" โ a quiet ghost button pushed to the far left, away from the
safe actions, so it can't be hit on the way to "Save draft & leave". */
.leave-modal-discard {
margin-right: auto;
padding: 8px 14px;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
color: var(--color-error-700);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.leave-modal-discard:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.08);
}
.leave-modal-discard:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 600px) {
/* Stack the three actions; primary (last in DOM) ends up on top. */
.leave-modal-actions { flex-direction: column-reverse; }
.leave-modal-actions > button { width: 100%; }
.leave-modal-discard { margin-right: 0; }
}
@media (max-width: 600px) {
.tpl-modal {
padding: 18px 16px 16px;
border-radius: 14px;
}
.tpl-modal-title { font-size: 16px; }
.tpl-modal-sub { font-size: 12px; }
.tpl-modal-input { font-size: 13.5px; }
}
@media (max-width: 768px) {
.q-builder-header {
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
gap: 10px;
}
.q-builder-header .q-preview-btn {
margin-top: 0;
margin-bottom: 0;
}
}
/* "Write Your Own" button (replaces dashed add-giver-btn for step 3) */
/* Add-question cards (Write Your Own + SBI) */
.q-add-section {
border: 1.5px dashed var(--color-warm-300);
border-radius: 12px;
padding: 14px;
margin: 12px 0 4px;
background: var(--color-warm-50);
}
.q-add-section-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-warm-400);
margin-bottom: 10px;
}
.q-action-row--cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0;
}
.q-action-row--cards .q-add-card {
flex: 0 1 220px;
min-width: 160px;
}
.q-add-card {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
background: var(--color-warm-50);
border: 1.5px solid var(--color-warm-200);
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
width: 100%;
min-width: 0;
}
.q-add-card:hover {
background: var(--color-warm-50);
border-color: var(--color-warm-400);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.q-add-card-icon {
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-warm-700);
}
.q-add-card--library .q-add-card-icon {
color: var(--color-primary-dark);
}
.q-add-card-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.q-add-card-title {
font-size: 13px;
font-weight: 600;
color: var(--color-warm-800);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.q-add-card-badge {
font-size: 10px;
font-weight: 600;
background: #FFF3E0;
color: #E65100;
border: 1px solid #FFB74D;
border-radius: 10px;
padding: 1px 7px;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.q-add-card-desc {
font-size: 12px;
color: var(--color-warm-600);
line-height: 1.4;
}
.q-add-card--sbi {
background: #FFFAF5;
border-color: #FFD699;
}
.q-add-card--sbi:hover {
background: #FFF3E0;
border-color: #FFB74D;
}
.q-add-card--sbi .q-add-card-title {
color: #7f4800;
}
.q-add-card--sbi .q-add-card-desc {
color: #8a5a00;
}
/* Mobile: stack cards equal width, show long descriptions */
@media (max-width: 768px) {
.q-action-row--cards {
flex-direction: column;
}
.q-action-row--cards .q-add-card {
flex: 1 1 100%;
min-width: 0;
width: 100%;
}
.q-add-card-desc--desktop { display: none; }
.q-add-card-desc--mobile { display: inline; }
}
/* Desktop: side-by-side cards, show short descriptions */
@media (min-width: 769px) {
.q-add-card-desc--mobile { display: none; }
.q-add-card-desc--desktop { display: inline; }
}
/* Library card: teal-tinted to signal it opens a richer panel */
.q-add-card--library {
background: rgba(20, 184, 166, 0.06);
border-color: rgba(20, 184, 166, 0.35);
}
.q-add-card--library:hover {
background: rgba(20, 184, 166, 0.12);
border-color: var(--color-primary);
}
.q-add-card--library .q-add-card-title {
color: var(--color-primary-dark);
}
.q-add-card--library .q-add-card-desc {
color: var(--color-primary);
}
/* SBI card display in builder */
.q-sbi-skill-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.q-sbi-skill-text {
font-size: 13px;
font-weight: 600;
color: var(--color-warm-800);
}
.q-sbi-parts {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 2px;
}
.q-sbi-part {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 12px;
color: var(--color-warm-600);
line-height: 1.4;
}
.q-sbi-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
color: white;
flex-shrink: 0;
margin-top: 1px;
}
.q-sbi-s-label { background: #FFD699; color: #7f4800; }
.q-sbi-b-label { background: #FFD699; color: #7f4800; }
.q-sbi-i-label { background: #FFD699; color: #7f4800; }
/* Library โ remove old padding so header/filters/list can control their own */
.q-library {
padding: 0 !important;
overflow: hidden;
}
.q-library-header {
padding: 12px 14px;
border-bottom: 1px solid var(--color-warm-200);
background: var(--color-warm-50);
}
/* Search bar */
.q-library-search {
position: relative;
padding: 10px 14px 6px;
border-bottom: 1px solid #eee;
}
.q-search-input {
font-size: 14px !important;
padding: 8px 36px 8px 12px !important;
height: auto !important;
border-radius: 8px !important;
}
.q-search-clear {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 18px;
color: var(--color-warm-500);
cursor: pointer;
line-height: 1;
padding: 0 4px;
margin-top: 2px;
}
.q-search-clear:hover { color: var(--color-warm-600); }
/* Filter rows */
.q-library-filters {
padding: 8px 14px;
border-bottom: 1px solid #eee;
margin-bottom: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.q-library-filters--secondary {
background: #f4f5f7;
padding-top: 8px;
padding-bottom: 8px;
border-top: 2px solid #e0e4ea;
border-bottom: 1px solid var(--color-warm-200);
}
/* Filter section label (e.g. "Topic" / "Format") */
.q-filter-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-gray-400);
margin-right: 2px;
flex-shrink: 0;
}
/* Smaller pills for the format row */
.filter-btn--sm {
padding: 3px 10px;
font-size: 11px;
border-radius: 10px;
}
/* Library list: add top padding now that header/filters control spacing */
.q-library-list {
padding: 8px 10px 10px;
}
/* Library item โ clean card style */
.q-library-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
padding: 10px 12px !important;
background: var(--color-warm-50) !important;
border: 1px solid var(--color-warm-300) !important;
border-radius: 8px !important;
cursor: pointer !important;
text-align: left !important;
transition: all 0.18s ease !important;
font-size: 13px !important;
}
.q-library-item:hover:not(:disabled) {
border-color: var(--color-primary) !important;
background: rgba(20, 184, 166, 0.04) !important;
transform: translateX(2px) !important;
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12) !important;
}
.q-library-item--added {
background: var(--color-success-50) !important;
border-color: #86efac !important;
cursor: default !important;
opacity: 0.8 !important;
}
.q-library-item:disabled {
pointer-events: none !important;
}
/* "+" circle icon on unselected items โ SVG plus, not a text glyph, so it
sits dead-center in the circle (Max round-3: the + looked off-center) */
.q-library-add-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(20, 184, 166, 0.1);
border: 1.5px solid var(--color-primary);
color: var(--color-primary-dark);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: all 0.18s;
}
.q-library-add-icon svg { display: block; }
.q-library-item:hover:not(:disabled) .q-library-add-icon {
background: var(--color-primary);
color: white;
}
/* "โ Added" green pill on selected items */
.q-library-added-check {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 3px;
padding: 3px 10px;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 12px;
color: #166534;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
/* Topic tag badge on library items */
.q-topic-tag {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
background: #dcfce7;
border: 1px solid #86efac;
color: #166534;
white-space: nowrap;
}
/* Intent tag โ uniform soft navy outline (pairs with the mint topic tag).
The per-intent rainbow was retired in favour of one calm colour family. */
.q-intent-tag,
.q-intent-tag--strength,
.q-intent-tag--develop_area,
.q-intent-tag--take_action,
.q-intent-tag--blind_spot,
.q-intent-tag--concrete_example {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
background: #dbeafe;
border: 1px solid #93c5fd;
color: #1e40af;
}
/* LOOKING FOR filter row โ only the SELECTED pill picks up the navy
outline. Idle pills + hover keep the neutral default from .filter-btn. */
.q-library-filters--intent {
margin-bottom: 4px !important;
}
.filter-btn--intent.active {
background: #dbeafe;
border-color: #93c5fd;
color: #1e40af;
}
/* โโ "Back to Question Builder" bottom button โโ */
.q-back-builder-btn {
width: 100%;
padding: 10px 24px;
background: var(--color-warm-50);
border: 1.5px solid var(--color-primary);
border-radius: 20px;
color: var(--color-primary-dark);
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.q-back-builder-btn:hover {
background: rgba(20, 184, 166, 0.08);
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
}
/* โโ Form Preview panel โโ */
.q-preview-header {
display: flex;
align-items: flex-start;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-warm-300);
}
.q-preview-header h3 { margin: 0 0 6px; font-size: 18px; }
.q-preview-badge {
display: inline-block;
padding: 3px 10px;
background: rgba(20, 184, 166, 0.1);
border: 1px solid rgba(20, 184, 166, 0.3);
border-radius: 10px;
font-size: 11px;
font-weight: 600;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Context box inside preview */
.q-preview-context {
background: var(--color-success-50);
border: 1px solid #BBF7D0;
border-left: 4px solid var(--color-success);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 12px;
}
.q-preview-context-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--color-success-800);
margin: 0 0 5px;
}
.q-preview-context-text {
font-size: 13px;
color: var(--color-gray-800);
line-height: 1.55;
margin: 0;
}
/* Coaching tip inside preview */
.q-preview-tip {
display: flex;
gap: 10px;
align-items: flex-start;
background: var(--color-warning-50);
border: 1px solid var(--color-warning-200);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 16px;
font-size: 13px;
color: #78350F;
line-height: 1.5;
}
.q-preview-tip span { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.q-preview-tip p { margin: 0; }
/* Override form-section label inside preview */
.q-preview-questions .form-section label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--color-primary-dark) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Rating row in preview */
.q-preview-rating {
display: flex;
gap: 16px;
align-items: center;
margin-top: 8px;
}
.q-preview-rating-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: default;
}
.q-preview-rating-opt span {
font-size: 12px;
color: var(--color-gray-500);
}
/* โโ Insights page โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.insights-section {
background: var(--color-warm-50);
border: 1px solid var(--color-gray-200);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
}
.insights-section-header {
margin-bottom: 20px;
}
.insights-section-title {
font-size: 17px;
font-weight: 700;
color: var(--color-gray-900);
margin: 0 0 4px;
}
.insights-section-desc {
font-size: 13px;
color: var(--color-gray-500);
margin: 0;
}
.insights-empty {
font-size: 14px;
color: var(--color-gray-400);
font-style: italic;
padding: 8px 0;
margin: 0;
}
/* Shared bar components */
.insight-bar-track {
height: 8px;
background: var(--color-gray-100);
border-radius: 999px;
overflow: hidden;
flex: 1;
min-width: 60px;
}
.insight-bar-track--wide {
min-width: 120px;
}
.insight-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Response rate rows */
.insight-rate-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--color-gray-100);
}
.insight-rate-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.insight-rate-meta {
flex: 1;
min-width: 0;
}
.insight-rate-title {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.insight-rate-sub {
display: block;
font-size: 12px;
color: var(--color-gray-400);
margin-top: 2px;
}
.insight-rate-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
width: 220px;
}
.insight-rate-pct {
font-size: 13px;
font-weight: 700;
width: 36px;
text-align: right;
flex-shrink: 0;
}
/* Rating average rows */
.insight-rating-row {
padding: 16px 0;
border-bottom: 1px solid var(--color-gray-100);
}
.insight-rating-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.insight-rating-question {
font-size: 14px;
color: var(--color-gray-700);
line-height: 1.5;
margin-bottom: 10px;
}
.insight-rating-bar-row {
display: flex;
align-items: center;
gap: 12px;
}
.insight-rating-score {
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
min-width: 42px;
}
.insight-rating-denom {
font-size: 12px;
font-weight: 400;
color: var(--color-gray-400);
}
.insight-rating-count {
font-size: 12px;
color: var(--color-gray-400);
flex-shrink: 0;
}
.insight-rating-anchor-label {
font-size: 11px;
font-weight: 600;
opacity: 0.85;
flex-shrink: 0;
white-space: nowrap;
}
.insight-rating-bars-label {
font-size: 12px;
font-weight: 500;
opacity: 0.85;
margin-top: 5px;
line-height: 1.4;
}
.insight-rating-na {
font-size: 11px;
font-weight: 500;
color: var(--color-gray-400);
background: rgba(156, 163, 175, 0.12);
border-radius: 4px;
padding: 1px 5px;
flex-shrink: 0;
}
/* Open-ended feedback cards */
.insight-feedback-card {
padding: 16px;
background: var(--color-gray-50);
border-radius: 10px;
border-left: 3px solid var(--color-primary);
margin-bottom: 12px;
}
.insight-feedback-card:last-child {
margin-bottom: 0;
}
.insight-feedback-question {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-gray-500);
margin: 0 0 8px;
}
.insight-feedback-answer {
font-size: 14px;
color: var(--color-gray-900);
line-height: 1.65;
margin: 0 0 10px;
}
.insight-feedback-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-gray-400);
}
.insight-meta-dot {
color: var(--color-gray-300);
}
/* Strengths & Growth Areas */
.insights-sg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.insights-sg-card {
background: var(--color-gray-50);
border-radius: 12px;
padding: 20px;
border: 1px solid var(--color-gray-200);
border-top-width: 3px;
}
.insights-sg-card--strengths {
border-top-color: var(--color-success);
}
.insights-sg-card--growth {
border-top-color: #0EA5E9;
}
.insights-sg-card-heading {
margin-bottom: 16px;
}
.insights-sg-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
}
.insights-sg-badge--strengths {
background: rgba(16, 185, 129, 0.12);
color: var(--color-success-600);
}
.insights-sg-badge--growth {
background: rgba(14, 165, 233, 0.12);
color: #0284C7;
}
.insights-sg-item {
padding: 12px 0;
border-bottom: 1px solid var(--color-gray-200);
}
.insights-sg-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.insights-sg-item-text {
font-size: 13px;
color: var(--color-gray-700);
line-height: 1.5;
margin-bottom: 8px;
}
.insights-sg-item-bar-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.insights-sg-bar {
min-width: 60px;
flex: 1;
}
.insights-sg-score {
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.insights-sg-label {
font-size: 11px;
font-weight: 600;
opacity: 0.85;
flex-shrink: 0;
white-space: nowrap;
}
.insights-sg-count {
font-size: 11px;
color: var(--color-gray-400);
margin-top: 4px;
}
/* Written Feedback by Question */
.insight-feedback-group {
margin-bottom: 28px;
}
.insight-feedback-group:last-child {
margin-bottom: 0;
}
.insight-feedback-group-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
}
.insight-feedback-group-q {
font-size: 14px;
font-weight: 600;
color: var(--color-gray-900);
line-height: 1.4;
flex: 1;
}
.insight-feedback-group-count {
font-size: 11px;
font-weight: 600;
color: var(--color-gray-500);
background: var(--color-gray-100);
border-radius: 999px;
padding: 2px 9px;
flex-shrink: 0;
white-space: nowrap;
}
.insight-feedback-group-answers {
padding-left: 0;
}
.insight-feedback-more {
font-size: 12px;
color: var(--color-gray-400);
font-style: italic;
margin: 8px 0 0;
padding: 0;
}
/* Multiple Choice distributions */
.insight-mc-group {
margin-bottom: 28px;
}
.insight-mc-group:last-child {
margin-bottom: 0;
}
.insight-mc-rows {
margin-top: 10px;
}
.insight-mc-row {
display: flex;
align-items: center;
gap: 14px;
padding: 7px 0;
border-bottom: 1px solid var(--color-gray-50);
}
.insight-mc-row:last-child {
border-bottom: none;
}
.insight-mc-label {
font-size: 13px;
color: var(--color-gray-700);
width: 210px;
flex-shrink: 0;
}
.insight-mc-bar-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.insight-mc-track {
flex: 1;
min-width: 60px;
}
.insight-mc-fill {
background: var(--color-primary-dark);
min-width: 2px;
}
.insight-mc-pct {
font-size: 12px;
font-weight: 600;
color: var(--color-gray-700);
width: 36px;
text-align: right;
flex-shrink: 0;
}
.insight-mc-count {
font-size: 12px;
color: var(--color-gray-400);
width: 20px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.insight-rate-right {
width: 140px;
}
.insight-rating-bar-row {
flex-wrap: wrap;
gap: 8px;
}
.insight-bar-track--wide {
min-width: 80px;
}
.insights-sg-grid {
grid-template-columns: 1fr;
}
.insight-mc-row {
flex-wrap: wrap;
gap: 6px;
}
.insight-mc-label {
width: 100%;
}
.insight-mc-bar-wrap {
width: 100%;
}
}
/* โโ Toast Notifications โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
#toast-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
width: max-content;
max-width: calc(100vw - 32px);
}
.toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
max-width: 340px;
min-width: 220px;
font-size: 14px;
font-family: inherit;
line-height: 1.4;
pointer-events: all;
animation: toast-in 0.25s ease;
}
.toast-success {
background: #ECFDF5;
border-left: 4px solid var(--color-success);
color: var(--color-success-800);
}
.toast-error {
background: var(--color-error-50);
border-left: 4px solid var(--color-error);
color: var(--color-error-800);
}
.toast-info {
background: var(--color-primary-50);
border-left: 4px solid var(--color-primary);
color: #134E4A;
}
.toast-icon {
flex-shrink: 0;
margin-top: 1px;
}
.toast-message {
flex: 1;
}
.toast-close {
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.45;
font-size: 18px;
line-height: 1;
padding: 0;
flex-shrink: 0;
margin-top: -1px;
}
.toast-close:hover {
opacity: 1;
}
.toast-fade-out {
animation: toast-out 0.28s ease forwards;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-12px); }
}
/* โโ Report Download โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.detail-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 16px;
}
.detail-title-row h1 {
margin: 0;
}
.download-report-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
font-family: var(--font-sans);
color: var(--color-primary);
background: var(--color-warm-50);
border: 1.5px solid var(--color-primary);
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.download-report-btn:hover {
background: var(--color-primary);
color: white;
}
.download-report-icon {
font-size: 16px;
line-height: 1;
}
@media (max-width: 768px) {
.detail-title-row {
flex-direction: column;
align-items: flex-start;
}
}
/* Multiple choice preview โ visual list (avoids inside