#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
:root {
font-size: var(--rz-root-font-size);
}
body {
font-family: var(--rz-text-font-family);
color: var(--rz-text-color);
font-size: var(--rz-body-font-size);
line-height: var(--rz-body-line-height);
background-color: var(--rz-body-background-color);
}
.rz-body {
--rz-body-padding: 0;
}
a {
color: var(--rz-link-color);
}
a:hover,
a:focus {
color: var(--rz-link-hover-color);
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
/* ====================================================
LANDING PAGE STYLES
==================================================== */
.lp-scope {
--lp-hero-bg: #eef0ff;
--lp-features-bg: #e8eef8;
--lp-card-peach: #f0c4ac;
--lp-card-violet: #1e0070;
--lp-cta-bg: #07073e;
--lp-primary: #4a00cc;
--lp-primary-hover: #3800a0;
--lp-pricing-bg: #3a00b8;
--lp-text-dark: #0f0f23;
--lp-text-body: #444466;
--lp-text-muted: #888899;
--lp-white: #ffffff;
--lp-border: #e0e4f0;
--rz-primary: #4a00cc;
--rz-primary-darker: #3800a0;
--rz-primary-lighter: #6022e0;
}
/* Container */
.lp-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
/* ---- NAV ---- */
.lp-nav { background: var(--lp-white); height: 64px; display: flex; align-items: center; border-bottom: 1px solid var(--lp-border); position: sticky; top: 0; z-index: 100; }
.lp-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.lp-nav-logo { font-size: 1.25rem; font-weight: 700; color: var(--lp-text-dark); letter-spacing: -0.02em; }
.lp-nav-links { display: flex; gap: 2rem; }
.lp-nav-link { font-size: 0.9rem; color: var(--lp-text-body); text-decoration: none; font-weight: 500; }
.lp-nav-link:hover, .lp-nav-link:focus { color: var(--lp-primary); }
.lp-nav-actions { display: flex; align-items: center; gap: 1rem; }
.lp-nav-btn-ghost { font-size: 0.9rem; color: var(--lp-text-body); text-decoration: none; font-weight: 500; padding: 0.45rem 1rem; }
.lp-nav-btn-ghost:hover, .lp-nav-btn-ghost:focus { color: var(--lp-primary); }
.lp-nav-btn-primary { background: var(--lp-primary); color: var(--lp-white); border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.lp-nav-btn-primary:hover, .lp-nav-btn-primary:focus { background: var(--lp-primary-hover); color: var(--lp-white); }
/* ---- HERO ---- */
.lp-hero { background: var(--lp-hero-bg); padding: 5rem 0 6rem; }
.lp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
.lp-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--lp-primary); color: var(--lp-white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.3rem 0.85rem; border-radius: 100px; margin-bottom: 1.5rem; }
.lp-badge-icon { font-size: 0.9rem !important; }
.lp-hero-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; color: var(--lp-text-dark); margin: 0 0 1.25rem; letter-spacing: -0.03em; }
.lp-hero-subtitle { font-size: 1rem; color: var(--lp-text-body); line-height: 1.65; margin: 0 0 2rem; max-width: 440px; }
.lp-hero-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lp-btn-hero-primary { border-radius: 8px !important; font-weight: 600 !important; padding: 0.65rem 1.5rem !important; }
.lp-btn-hero-text { color: var(--lp-text-dark) !important; font-weight: 500 !important; }
.lp-hero-visual-col { position: relative; display: flex; justify-content: center; padding-bottom: 2rem; }
.lp-hero-card { background: #d8d8e0; border-radius: 18px; box-shadow: 0 8px 40px rgba(74,0,204,0.14); width: 100%; max-width: 420px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp-laptop-wrap { display: flex; flex-direction: column; align-items: center; width: 72%; }
.lp-laptop-screen { width: 100%; aspect-ratio: 16/10; background: #2a2a3a; border-radius: 8px 8px 0 0; }
.lp-laptop-base { width: 90%; height: 10px; background: #b0b0b8; border-radius: 0 0 6px 6px; }
.lp-ai-pill { position: absolute; bottom: 0; left: 2rem; background: var(--lp-white); border-radius: 12px; padding: 0.7rem 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.13); display: flex; align-items: center; gap: 0.6rem; min-width: 190px; }
.lp-ai-pill-icon-wrap { background: #eef0ff; border-radius: 8px; padding: 6px; display: flex; }
.lp-ai-pill-icon { color: var(--lp-primary) !important; font-size: 1.2rem !important; }
.lp-ai-pill-title { font-size: 0.8rem; font-weight: 600; color: var(--lp-text-dark); line-height: 1.2; }
.lp-ai-pill-sub { font-size: 0.7rem; color: var(--lp-text-muted); line-height: 1.2; }
.lp-ai-pill-bar { height: 3px; background: linear-gradient(90deg, var(--lp-primary) 65%, #e0e0e0 65%); border-radius: 2px; margin-top: 5px; }
/* ---- FEATURES ---- */
.lp-features { background: var(--lp-features-bg); padding: 5rem 0; }
.lp-section-header { text-align: center; margin-bottom: 3rem; }
.lp-section-title { font-size: 2rem; font-weight: 700; color: var(--lp-text-dark); margin: 0 0 0.75rem; }
.lp-section-subtitle { font-size: 0.95rem; color: var(--lp-text-body); max-width: 460px; margin: 0 auto; line-height: 1.6; }
.lp-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.lp-feature-card { border-radius: 16px; padding: 2rem; overflow: hidden; }
.lp-card-white { background: var(--lp-white); }
.lp-card-peach { background: var(--lp-card-peach); }
.lp-card-violet { background: var(--lp-card-violet); }
.lp-card-row { display: flex; align-items: flex-start; gap: 1rem; }
.lp-feature-card-text { flex: 1; }
.lp-feature-visual { width: 140px; min-height: 120px; flex-shrink: 0; border-radius: 8px; }
.lp-visual-notebook { background: repeating-linear-gradient(0deg, transparent, transparent 22px, #e8eef8 22px, #e8eef8 23px), #f5f5fa; border: 1px solid #d8dce8; }
.lp-feature-icon { font-size: 1.5rem !important; color: var(--lp-primary) !important; margin-bottom: 0.9rem; display: block; }
.lp-icon-dark { color: var(--lp-text-dark) !important; }
.lp-icon-orange { color: #e06a2a !important; }
.lp-feature-title { font-size: 1.1rem; font-weight: 700; color: var(--lp-text-dark); margin: 0 0 0.5rem; }
.lp-feature-desc { font-size: 0.88rem; color: var(--lp-text-body); line-height: 1.6; margin: 0 0 1rem; }
.lp-text-white { color: var(--lp-white) !important; }
.lp-text-white-muted { color: rgba(255,255,255,0.75) !important; }
.lp-feature-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.lp-tag { background: var(--lp-features-bg); color: var(--lp-text-body); font-size: 0.75rem; font-weight: 500; padding: 0.2rem 0.7rem; border-radius: 100px; border: 1px solid var(--lp-border); }
.lp-todo-mockup { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.lp-todo-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--lp-text-dark); background: rgba(255,255,255,0.85); border-radius: 8px; padding: 0.45rem 0.75rem; }
.lp-todo-pending { opacity: 0.7; }
.lp-todo-check { color: #22c55e !important; font-size: 1rem !important; }
.lp-todo-uncheck { color: var(--lp-text-muted) !important; font-size: 1rem !important; }
.lp-vault-visual { height: 70px; border-radius: 10px; background: linear-gradient(135deg, #f0ede8 0%, #e0dbd0 100%); margin-top: 1rem; }
.lp-btn-analytics { border-radius: 8px !important; font-weight: 600 !important; margin-top: 1.5rem; }
/* ---- PRICING ---- */
.lp-pricing { background: var(--lp-white); padding: 5rem 0; }
.lp-pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; align-items: start; }
.lp-pricing-card { border-radius: 16px; padding: 2rem; position: relative; }
.lp-pricing-plain { border: 1px solid var(--lp-border); background: var(--lp-white); }
.lp-pricing-featured { background: var(--lp-pricing-bg); transform: translateY(-8px); box-shadow: 0 16px 56px rgba(58,0,184,0.28); }
.lp-pricing-recommended-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--lp-primary); color: var(--lp-white); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.22rem 0.8rem; border-radius: 100px; white-space: nowrap; }
.lp-pricing-name { font-size: 1.05rem; font-weight: 700; color: var(--lp-text-dark); margin: 0 0 0.5rem; }
.lp-pricing-price { display: flex; align-items: baseline; gap: 0.15rem; margin-bottom: 1.5rem; }
.lp-price-amount { font-size: 2.5rem; font-weight: 800; color: var(--lp-text-dark); line-height: 1; }
.lp-price-period { font-size: 0.88rem; color: var(--lp-text-muted); }
.lp-pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.lp-pricing-features li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--lp-text-body); }
.lp-features-white li { color: rgba(255,255,255,0.92); }
.lp-check-icon { color: var(--lp-primary) !important; font-size: 1rem !important; }
.lp-check-icon-white { color: var(--lp-white) !important; font-size: 1rem !important; }
.lp-btn-pricing { width: 100%; border-radius: 8px !important; font-weight: 600 !important; }
.lp-btn-pricing-white { background: var(--lp-white) !important; color: var(--lp-pricing-bg) !important; border-color: var(--lp-white) !important; width: 100%; border-radius: 8px !important; font-weight: 700 !important; }
.lp-btn-pricing-white .rz-button-text { color: var(--lp-pricing-bg) !important; }
.lp-btn-pricing-white:hover { background: #f0f0f0 !important; }
/* ---- CTA ---- */
.lp-cta-section { background: var(--lp-features-bg); padding: 4rem 0; }
.lp-cta-inner { background: var(--lp-cta-bg); border-radius: 24px; padding: 3.5rem 2rem; text-align: center; }
.lp-cta-title { font-size: 2rem; font-weight: 800; color: var(--lp-white); margin: 0 0 0.75rem; }
.lp-cta-subtitle { font-size: 0.95rem; color: rgba(255,255,255,0.7); margin: 0 0 2rem; }
.lp-cta-form { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto; }
.lp-cta-input { flex: 1; min-width: 200px; }
.lp-cta-input .rz-textbox { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.25) !important; color: var(--lp-white) !important; border-radius: 8px !important; }
.lp-cta-input .rz-textbox::placeholder { color: rgba(255,255,255,0.5) !important; }
.lp-btn-cta-submit { background: var(--lp-white) !important; color: var(--lp-cta-bg) !important; border-color: var(--lp-white) !important; border-radius: 8px !important; font-weight: 700 !important; white-space: nowrap; }
.lp-btn-cta-submit .rz-button-text { color: var(--lp-cta-bg) !important; }
.lp-btn-cta-submit:hover { background: #e8e8e8 !important; }
/* ---- FOOTER ---- */
.lp-footer { background: var(--lp-white); border-top: 1px solid var(--lp-border); padding: 1.75rem 0; }
.lp-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; }
.lp-footer-brand { display: flex; flex-direction: column; gap: 0.2rem; }
.lp-footer-logo { font-size: 1rem; font-weight: 700; color: var(--lp-text-dark); }
.lp-footer-tagline { font-size: 0.75rem; color: var(--lp-text-muted); }
.lp-footer-links { display: flex; gap: 1.5rem; }
.lp-footer-link { font-size: 0.82rem; color: var(--lp-text-muted); text-decoration: none; }
.lp-footer-link:hover, .lp-footer-link:focus { color: var(--lp-primary); }
.lp-footer-social { display: flex; gap: 0.6rem; }
.lp-social-link { color: var(--lp-text-muted); text-decoration: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lp-border); transition: border-color 0.2s; }
.lp-social-link:hover, .lp-social-link:focus { border-color: var(--lp-primary); color: var(--lp-primary); }
/* ---- LOGIN PAGE ---- */
/* ---- Login page — full-screen futuristic background ---- */
.lp-login-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: url('/images/login-bg.svg') center / cover no-repeat, #07073e; padding: 2rem 1rem; }
.lp-login-card { background: rgba(7,7,62,0.62); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(192,132,252,0.22); border-radius: 1.25rem; box-shadow: 0 8px 48px rgba(0,0,0,0.65), 0 0 80px rgba(85,0,221,0.14); padding: 2.5rem 2rem; width: 100%; max-width: 420px; }
.lp-login-header { text-align: center; margin-bottom: 2rem; }
.lp-login-icon { font-size: 2.5rem; color: #c084fc; margin-bottom: 0.75rem; display: block; }
.lp-login-title { font-size: 1.6rem; font-weight: 700; color: #ffffff; margin: 0 0 0.5rem; }
.lp-login-subtitle { font-size: 0.9rem; color: rgba(255,255,255,0.52); margin: 0; }
.lp-login-error { display: flex; align-items: center; gap: 0.5rem; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.38); color: #fca5a5; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.88rem; }
.lp-login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.lp-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.lp-form-label { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.82); }
.lp-form-input { border: 1px solid rgba(192,132,252,0.25); border-radius: 0.6rem; padding: 0.65rem 0.9rem; font-size: 0.95rem; color: #ffffff; background: rgba(255,255,255,0.07); transition: border-color 0.2s, box-shadow 0.2s; outline: none; width: 100%; box-sizing: border-box; }
.lp-form-input::placeholder { color: rgba(255,255,255,0.28); }
.lp-form-input:focus { border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192,132,252,0.16); }
.lp-field-error { font-size: 0.78rem; color: #fca5a5; margin-top: 0.1rem; }
.lp-form-check { display: flex; align-items: center; gap: 0.5rem; }
.lp-check-input { width: 16px; height: 16px; accent-color: #c084fc; cursor: pointer; }
.lp-check-label { font-size: 0.88rem; color: rgba(255,255,255,0.52); cursor: pointer; }
.lp-login-submit { background: linear-gradient(135deg, #5500dd, #7722ee); color: #fff; border: none; border-radius: 0.6rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: box-shadow 0.2s, transform 0.1s; margin-top: 0.5rem; width: 100%; box-shadow: 0 4px 22px rgba(85,0,221,0.45); }
.lp-login-submit:hover { box-shadow: 0 6px 30px rgba(85,0,221,0.68); }
.lp-login-submit:active { transform: scale(0.98); }
.lp-login-back { text-align: center; margin-top: 1.5rem; }
.lp-login-back-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; color: rgba(255,255,255,0.40); text-decoration: none; transition: color 0.2s; }
.lp-login-back-link:hover { color: #c084fc; }
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.lp-hero-grid { grid-template-columns: 1fr; }
.lp-hero-visual-col { display: none; }
.lp-features-grid { grid-template-columns: 1fr; }
.lp-card-row { flex-direction: column; }
.lp-feature-visual { width: 100%; min-height: 80px; }
.lp-pricing-grid { grid-template-columns: 1fr; }
.lp-pricing-featured { transform: none; }
.lp-nav-links { display: none; }
.lp-footer-inner { flex-direction: column; align-items: flex-start; }
.lp-login-card { padding: 1.75rem 1.25rem; max-width: 92vw; }
}
/* ============================================================
APP SHELL (ap-*)
============================================================ */
.ap-shell {
--ap-bg: var(--rz-body-background-color, #f0f0f8);
--ap-sidebar-bg: var(--rz-base-100, #ffffff);
--ap-topbar-bg: var(--rz-base-100, #ffffff);
--ap-active: var(--rz-primary, #5500dd);
--ap-active-text: #ffffff;
--ap-text: var(--rz-text-color, #1a1a2e);
--ap-text-muted: var(--rz-text-secondary-color, #6b7280);
--ap-border: var(--rz-base-300, #e5e7eb);
--ap-card-bg: var(--rz-base-100, #ffffff);
--ap-card-hover: color-mix(in srgb, var(--ap-accent) 6%, var(--ap-card-bg));
--ap-card-selected: color-mix(in srgb, var(--ap-accent) 12%, var(--ap-card-bg));
--ap-high-color: #ef4444;
--ap-medium-color: #3b82f6;
--ap-accent: var(--rz-primary, #5500dd);
--ap-focus-bg: #07073e;
--ap-gantt-bar-label-color: #fff;
--ap-gantt-bar-shadow: rgba(0,0,0,0.18);
--ap-sidebar-width: 220px;
--ap-topbar-height: 56px;
display: flex;
height: 100vh; /* fallback for engines without dvh support */
height: 100dvh; /* tracks the live visual viewport — fixes scroll-lock on foldables (e.g. Galaxy Fold) across the unfold transition */
overflow: hidden;
opacity: 1;
transition: opacity 0.12s ease;
}
/* Premium dark palette for custom shell/dashboard surfaces */
.ap-shell--dark {
--ap-bg: #0c1324;
--ap-sidebar-bg: #0b1120;
--ap-topbar-bg: #151b2d;
--ap-active: #b1c7f2;
--ap-active-text: #193053;
--ap-text: #dce1fb;
--ap-text-muted: #9aa6c2;
--ap-border: #2e3447;
--ap-card-bg: #191f31;
--ap-card-hover: #23293c;
--ap-card-selected: #2e3447;
--ap-high-color: #ffb4ab;
--ap-medium-color: #b1c7f2;
--ap-accent: #b1c7f2;
--ap-focus-bg: #001b3d;
}
.ap-shell--dark .ap-icon-btn:hover {
background: #23293c;
color: var(--ap-accent);
}
.ap-shell--dark .ap-search-input {
background: #0b1120;
border-color: #2e3447;
color: var(--ap-text);
}
.ap-shell--dark .ap-search-input::placeholder {
color: #8691ab;
}
.ap-shell--dark .ap-new-action-btn {
background: linear-gradient(135deg, #b1c7f2 0%, #8ea8da 100%);
color: #0b1120;
}
.ap-shell--dark .ap-new-action-btn:hover {
background: linear-gradient(135deg, #c3d5f8 0%, #9fb6e3 100%);
}
.ap-shell--dark .db-next-up-card {
background: #001b3d;
}
.ap-shell--dark .db-join-btn {
background: rgba(177, 199, 242, 0.14);
border-color: rgba(177, 199, 242, 0.24);
}
.ap-shell--dark .db-join-btn:hover {
background: rgba(177, 199, 242, 0.24);
}
/* Prevent initial light-theme flash before persisted theme is applied. */
.aio-theme-pending .ap-shell {
opacity: 0;
}
/* ---- Sidebar ---- */
.ap-sidebar { width: var(--ap-sidebar-width); background: var(--ap-sidebar-bg); border-right: 1px solid var(--ap-border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; position: relative; transition: width 0.18s ease, margin-left 0.18s ease; }
.ap-sidebar-brand { padding: 1.25rem 1rem 1rem; border-bottom: 1px solid var(--ap-border); }
.ap-sidebar-brand-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ap-sidebar-brand-actions { display: flex; align-items: center; gap: 0.15rem; }
.ap-sidebar-pin { color: var(--ap-text-muted); }
.ap-sidebar-pin:hover { color: var(--ap-accent); }
.ap-sidebar-pin--on { color: var(--ap-accent); }
.ap-sidebar-pin--on .rzi { transform: rotate(-30deg); transition: transform 0.15s ease; }
.ap-sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 10; background: transparent; transition: background 0.15s ease; }
.ap-sidebar-resizer:hover, .ap-sidebar-resizer:active { background: color-mix(in srgb, var(--ap-accent) 40%, transparent); }
/* Desktop collapsed sidebar (hidden via negative margin so layout reclaims the space) */
.ap-shell--sidebar-collapsed .ap-sidebar { margin-left: calc(-1 * var(--ap-sidebar-width)); }
.ap-shell--sidebar-collapsed .ap-sidebar-resizer { display: none; }
.ap-brand-logo-wrap { display: block; min-width: 0; line-height: 0; cursor: pointer; transition: opacity 0.15s; }
.ap-brand-logo-wrap:hover { opacity: 0.85; }
.ap-brand-logo { display: block; width: auto; max-width: 100%; max-height: 112px; height: auto; object-fit: contain; }
.ap-topbar-brand { font-size: 1rem; font-weight: 700; color: var(--ap-text); white-space: nowrap; display: none; }
.ap-nav { flex: 1; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ap-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; text-decoration: none; color: var(--ap-text-muted); font-size: 0.9rem; font-weight: 500; transition: background 0.15s, color 0.15s; cursor: pointer; }
.ap-nav-item:hover { background: var(--ap-card-hover); color: var(--ap-accent); }
.ap-nav-item--active, .ap-nav-item--active:hover { background: var(--ap-active); color: var(--ap-active-text); }
.ap-nav-icon { font-size: 18px; flex-shrink: 0; }
.ap-sidebar-chat { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; border-bottom: 1px solid var(--ap-border); min-height: 0; flex: 1 1 auto; }
.ap-chat-header { display: flex; align-items: center; justify-content: space-between; }
.ap-chat-title { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ap-text-muted); }
.ap-chat-clear { background: transparent; border: none; color: var(--ap-text-muted); cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 0.3rem; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; }
.ap-chat-clear:hover:not(:disabled) { color: var(--ap-accent); background: var(--ap-hover, rgba(0,0,0,0.05)); }
.ap-chat-clear:disabled { opacity: 0.4; cursor: not-allowed; }
.ap-chat-messages { display: flex; flex-direction: column; gap: 0.4rem; min-height: 6rem; max-height: 18rem; overflow-y: auto; padding: 0.25rem; background: var(--ap-base-100, transparent); border-radius: 0.5rem; }
.ap-chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; color: var(--ap-text-muted); font-size: 0.8rem; padding: 0.75rem 0.5rem; }
.ap-chat-empty-icon { font-size: 1.4rem; color: var(--ap-accent); }
.ap-chat-bubble { padding: 0.55rem 0.7rem; border-radius: 0.6rem; font-size: 0.88rem; line-height: 1.45; max-width: 92%; word-wrap: break-word; white-space: pre-wrap; }
.ap-chat-bubble--user {
align-self: flex-end;
background: #14316b;
color: var(--ap-active-text, #ffffff);
font-weight: 500;
border-bottom-right-radius: 0.15rem;
}
.ap-chat-bubble--assistant { align-self: flex-start; background: var(--rz-base-300, #dee2e6); color: var(--rz-text-color, #1f2937); border-bottom-left-radius: 0.15rem; }
.ap-shell--dark .ap-chat-bubble--assistant { background: var(--rz-base-700, #2a3242); color: var(--rz-text-color, #f1f5f9); }
.ap-shell--dark .ap-chat-bubble--user { color: #ffffff; font-weight: 500; }
.ap-chat-bubble--thinking { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.55rem 0.7rem; }
.ap-chat-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; opacity: 0.4; animation: ap-chat-pulse 1.2s infinite ease-in-out; }
.ap-chat-dot:nth-child(2) { animation-delay: 0.15s; }
.ap-chat-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ap-chat-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }
.ai-tip{color: #ccc; font-size: 12px; padding-right: 10px;}
.ai-action-row{
display: flex;
}
.ap-chat-composer {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ap-chat-input-wrap { width: 100%; }
.ap-sidebar-chat-input {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 3.5rem;
padding: 0.55rem 0.7rem;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.4;
color: var(--ap-text);
background: var(--ap-bg);
border: 1px solid var(--ap-border);
border-radius: 0.5rem;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-sidebar-chat-input:focus {
border-color: var(--ap-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 18%, transparent);
}
.ap-sidebar-chat-input::placeholder { color: var(--ap-text-muted); }
.ap-sidebar-chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
.ap-sidebar-chat-send { align-self: flex-end; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; padding: 0; border-radius: 50%; }
.ap-sidebar-chat-send .rz-button-box { padding: 0; }
.ap-sidebar-chat-send .rzi { margin: 0; }
.ap-sidebar-bottom { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--ap-border); }
.ap-new-action-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.65rem 1rem; background: var(--ap-active); color: #fff; border: none; border-radius: 0.6rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.ap-new-action-btn:hover { background: #4400bb; }
.ap-help-link { display: flex; align-items: center; gap: 0.4rem; color: var(--ap-text-muted); font-size: 0.82rem; text-decoration: none; padding: 0.3rem 0.25rem; border-radius: 0.4rem; transition: color 0.15s; }
.ap-help-link:hover { color: var(--ap-accent); }
/* ---- Content area ---- */
.ap-content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ap-bg); min-width: 0; }
/* ---- Top bar ---- */
/* position + z-index keep the topbar (and its profile/settings dropdowns) above the sticky task header (z-index 20). */
.ap-topbar { position: relative; z-index: 100; height: var(--ap-topbar-height); background: var(--ap-topbar-bg); border-bottom: 1px solid var(--ap-border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; flex-shrink: 0; }
.ap-topbar-brand { font-size: 1rem; font-weight: 700; color: var(--ap-text); white-space: nowrap; }
.ap-search-wrap { flex: 1; max-width: 380px; position: relative; margin: 0 auto; }
.ap-search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--ap-text-muted); font-size: 16px; pointer-events: none; display: flex; align-items: center; }
.ap-search-input { width: 100%; border: 1px solid var(--ap-border); border-radius: 1.5rem; padding: 0.45rem 1rem 0.45rem 2.2rem; font-size: 0.85rem; color: var(--ap-text); background: var(--ap-bg); outline: none; box-sizing: border-box; transition: border-color 0.2s; }
.ap-search-input:focus { border-color: var(--ap-accent); }
.ap-topbar-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.ap-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ap-text-muted); transition: background 0.15s, color 0.15s; }
.ap-icon-btn:hover { background: var(--ap-bg); color: var(--ap-accent); }
.ap-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ap-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ap-profile-menu.rz-profile-menu { background: transparent; border: none; box-shadow: none; }
.ap-profile-menu .rz-profile-menu-trigger {
min-height: 34px;
border: 1px solid transparent !important;
border-radius: 999px;
background: transparent !important;
color: var(--ap-text-muted) !important;
padding: 0 0.3rem 0 0.2rem !important;
display: inline-flex;
align-items: center;
gap: 0.35rem;
box-shadow: none !important;
}
.ap-profile-menu .rz-profile-menu-trigger:hover {
background: var(--ap-bg) !important;
border-color: var(--ap-border) !important;
color: var(--ap-accent) !important;
}
.ap-profile-menu .rz-profile-menu-trigger .rzi {
color: inherit !important;
font-size: 1.15rem !important;
}
/* ---- Main scroll area ---- */
.ap-main { flex: 1; overflow-y: auto; padding: 2rem; }
/* Recipe Keeper / Recipe Detail manage their own internal scroll — suppress ap-main's scrollbar */
.ap-main:has(.rk-shell) { overflow: hidden; padding: 0; }
/* ---- Global condensed mode ---- */
.ap-shell--condensed .ap-main { padding: 1.25rem; }
.ap-shell--condensed .ap-page-header-row { margin-bottom: 0.85rem; }
.ap-shell--condensed .ap-page-title { font-size: 1.55rem; margin-bottom: 0.2rem; }
.ap-shell--condensed .ap-page-subtitle { font-size: 0.85rem; }
.ap-shell--condensed .ap-admin-card { padding: 0.75rem; margin-bottom: 0.75rem; }
/* ---- Admin management pages ---- */
.ap-admin-card { background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.ap-admin-card-title { margin: 0 0 0.75rem; color: var(--ap-text); font-size: 1rem; font-weight: 700; }
.ap-admin-toolbar { margin-bottom: 0.75rem; }
.ap-admin-grid .rz-datatable-header { border-bottom: 1px solid var(--ap-border); }
/* ============================================================
TASKS WIDGET (ap-task-*)
============================================================ */
.ap-page { max-width: 1200px; }
.ap-page-header-row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; }
.ap-page-title { font-size: 1.9rem; font-weight: 700; color: var(--ap-text); margin: 0 0 0.3rem; line-height: 1.2; }
.ap-page-subtitle { font-size: 0.95rem; color: var(--ap-text-muted); margin: 0; }
.ap-highlight { color: var(--ap-accent); font-weight: 600; }
/* My Day entry point — icon button aligned to the right of a page heading */
.ap-myday-link { flex: 0 0 auto; color: var(--ap-accent); background: rgba(85, 0, 221, 0.08); }
/* Pinned variant (Tasks header) — sits top-right without adding to the row's width, so it never widens the priority strip line. */
.ap-myday-link--float { position: absolute; top: 0; right: 0; }
/* My Day accent — a warm amber, tuned per theme so the icon and heading read well in light and dark. */
.ap-shell { --ap-myday-accent: #d97706; }
.ap-shell--dark { --ap-myday-accent: #fbbf24; }
/* "MY DAY" eyebrow label above the greeting. */
.ap-myday-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ap-myday-accent); margin-bottom: 0.2rem; }
.ap-myday-title-icon { color: var(--ap-myday-accent); vertical-align: middle; font-size: 1.15rem; }
/* Greeting headline in the My Day accent so the whole header ties to the sun icon. */
.ap-page-title--myday { color: var(--ap-myday-accent); }
/* Header accent line — amber differentiates My Day; the app accent (purple) marks the full task list. */
.ap-header-row--myday { border-bottom: 2px solid var(--ap-myday-accent); padding-bottom: 0.6rem; }
.ap-header-row--tasks { border-bottom: 2px solid var(--ap-accent); padding-bottom: 0.6rem; }
/* Bolt icon + accent colour on the "Priority Workspace" heading, mirroring My Day's sun treatment. */
.ap-page-title--tasks { color: var(--ap-accent); }
.ap-tasks-title-icon { color: var(--ap-accent); vertical-align: middle; font-size: 1.5rem; margin-right: 0.35rem; }
/* "My Day" toggle row in the task dialogs. Icon + label go vibrant amber when on, dimmed when off, so the
state is obvious at a glance. Literal amber + --rz-* tokens (dialogs render outside .ap-shell, where the
--ap-* tokens are undefined, but Radzen's --rz-* tokens are available). */
.ap-myday-toggle-row { display: flex; align-items: center; gap: 0.6rem; }
.ap-myday-toggle-icon { font-size: 1.3rem; transition: color 0.15s, opacity 0.15s; }
.ap-myday-toggle-label { font-weight: 700; letter-spacing: 0.01em; transition: color 0.15s, opacity 0.15s; }
.ap-myday-toggle-row--on .ap-myday-toggle-icon,
.ap-myday-toggle-row--on .ap-myday-toggle-label { color: #f59e0b; opacity: 1; }
.ap-myday-toggle-row--off .ap-myday-toggle-icon,
.ap-myday-toggle-row--off .ap-myday-toggle-label { color: var(--rz-text-disabled-color, #9aa0aa); opacity: 0.6; }
/* Sticky top block — pins the heading + priority strip and the New Task/Project actions while the list scrolls. */
.ap-tasks-sticky { position: sticky; top: 0; z-index: 20; background: var(--ap-bg); padding-top: 0.35rem; }
.ap-tasks-sticky::after { content: ""; display: block; height: 0.5rem; background: linear-gradient(var(--ap-bg), rgba(0, 0, 0, 0)); }
.ap-myday-link:hover { color: var(--ap-accent); background: rgba(85, 0, 221, 0.16); }
.ap-shell--dark .ap-myday-link { color: var(--ap-accent); background: rgba(124, 92, 255, 0.16); }
.ap-shell--dark .ap-myday-link:hover { color: var(--ap-accent); background: rgba(124, 92, 255, 0.24); }
.ap-header-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ap-density-toggle { display: inline-flex; align-items: center; border: 1px solid var(--ap-border); border-radius: 0.45rem; background: var(--ap-card-bg); overflow: hidden; }
.ap-density-btn { border: none; background: transparent; color: var(--ap-text-muted); font-size: 0.8rem; font-weight: 600; padding: 0.42rem 0.68rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ap-density-btn:hover { background: rgba(85,0,221,0.06); color: var(--ap-accent); }
.ap-density-btn + .ap-density-btn { border-left: 1px solid var(--ap-border); }
.ap-density-btn--active { background: rgba(85,0,221,0.12); color: var(--ap-accent); }
.ap-btn-outline { display: flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.85rem; border: 1px solid var(--ap-border); border-radius: 0.4rem; background: var(--ap-card-bg); color: var(--ap-text-muted); font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.ap-btn-outline:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
/* Gradient filled — primary CTA (New Task) */
.ap-btn-primary {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 1.15rem;
border: none; border-radius: 0.5rem;
background: linear-gradient(135deg, #5500dd 0%, #7c3aed 100%);
color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
box-shadow: 0 2px 10px rgba(85, 0, 221, 0.35);
transition: box-shadow 0.2s, transform 0.15s;
}
.ap-btn-primary:hover { box-shadow: 0 5px 20px rgba(85, 0, 221, 0.5); transform: translateY(-1px); }
.ap-btn-primary:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(85, 0, 221, 0.3); }
/* Outlined accent — secondary CTA (New Project) */
.ap-btn-secondary {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 1.15rem;
border: 1.5px solid var(--ap-accent); border-radius: 0.5rem;
background: transparent; color: var(--ap-accent);
font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.ap-btn-secondary:hover { background: rgba(85, 0, 221, 0.07); box-shadow: 0 3px 12px rgba(85, 0, 221, 0.2); transform: translateY(-1px); }
.ap-btn-secondary:active { transform: translateY(0); }
.ap-btn-icon { font-size: 16px; }
/* ---- Two-column grid ---- */
.ap-tasks-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; align-items: start; }
/* ---- AI Bar ---- */
.ap-ai-assistant { position: relative; margin-bottom: 1rem; }
.ap-ai-bar { display: flex; align-items: center; gap: 0.75rem; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.ap-ai-assistant .ap-ai-bar { margin-bottom: 0; }
.ap-ai-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ap-ai-input { flex: 1; border: none; outline: none; font-size: 0.92rem; color: var(--ap-text-muted); background: transparent; }
.ap-ai-input:disabled { opacity: 0.6; }
.ap-ai-enter { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ap-text-muted); background: transparent; border: 1px solid var(--ap-border); border-radius: 0.3rem; padding: 0.25rem 0.5rem; cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s; }
.ap-ai-enter:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-ai-enter:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---- AI Bar — floating conversation panel ---- */
.ap-ai-overlay { position: fixed; inset: 0; z-index: 240; background: transparent; }
.ap-ai-bar--active { position: relative; z-index: 245; }
.ap-ai-conversation { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 250; display: flex; flex-direction: column; gap: 0.5rem; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18); }
.ap-ai-conversation-header { display: flex; align-items: center; justify-content: space-between; }
.ap-ai-conversation-messages { display: flex; flex-direction: column; gap: 0.4rem; max-height: 20rem; overflow-y: auto; padding: 0.1rem; }
/* Markdown-rendered assistant replies — reset the bubble's pre-wrap and give block elements tight spacing. */
.ap-chat-md { white-space: normal; }
.ap-chat-md > :first-child { margin-top: 0; }
.ap-chat-md > :last-child { margin-bottom: 0; }
.ap-chat-md p { margin: 0 0 0.5rem; }
.ap-chat-md ul, .ap-chat-md ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.ap-chat-md li { margin: 0.15rem 0; }
.ap-chat-md li > p { margin: 0; }
.ap-chat-md h1, .ap-chat-md h2, .ap-chat-md h3, .ap-chat-md h4 { margin: 0.4rem 0 0.3rem; font-size: 1rem; font-weight: 700; }
.ap-chat-md code { background: var(--rz-base-200, rgba(0, 0, 0, 0.08)); padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.85em; }
.ap-chat-md pre { background: var(--rz-base-200, rgba(0, 0, 0, 0.08)); padding: 0.5rem 0.65rem; border-radius: 0.4rem; overflow-x: auto; margin: 0 0 0.5rem; }
.ap-chat-md pre code { background: transparent; padding: 0; }
.ap-chat-md a { color: var(--rz-primary, #0066cc); text-decoration: underline; }
.ap-chat-md table { border-collapse: collapse; margin: 0 0 0.5rem; }
.ap-chat-md th, .ap-chat-md td { border: 1px solid var(--ap-border); padding: 0.25rem 0.5rem; }
/* ---- Task list ---- */
.ap-task-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* ---- Depth indentation ---- */
.ap-task-depth-1 { margin-left: 1.5rem; }
.ap-task-depth-2 { margin-left: 3rem; }
.ap-task-depth-3 { margin-left: 4.5rem; }
.ap-task-depth-4 { margin-left: 6rem; }
.ap-task-depth-1 .ap-task-title,
.ap-task-depth-2 .ap-task-title,
.ap-task-depth-3 .ap-task-title,
.ap-task-depth-4 .ap-task-title { font-weight: 500; }
/* ---- Expand / collapse chevron ---- */
.ap-task-chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; width: 20px; cursor: pointer; color: var(--ap-text-muted); transition: transform 0.2s, color 0.15s; }
.ap-task-chevron--leaf { visibility: hidden; pointer-events: none; }
.ap-task-chevron--open { transform: rotate(90deg); color: var(--ap-accent); }
.ap-task-card { background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-left-width: 4px; border-left-color: var(--ap-task-accent, var(--ap-border)); border-radius: 0.6rem; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.ap-task-card:hover { background: var(--ap-card-hover); }
.ap-task-card--high { border-left-color: var(--ap-task-accent, var(--ap-high-color)); }
.ap-task-card--medium { border-left-color: var(--ap-task-accent, var(--ap-medium-color)); }
/* The task the user last opened/selected — prominent primary ring matching the Recipe card treatment. */
.ap-task-card--selected,
.ap-task-card--selected:hover { background: var(--ap-card-selected); box-shadow: 0 0 0 2px var(--ap-accent); }
.ap-task-actions { display: flex; align-items: center; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.ap-task-card:hover .ap-task-actions { opacity: 1; }
.ap-task-edit-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--ap-text-muted); padding: 0.3rem; border-radius: 0.3rem; line-height: 1; transition: background 0.15s, color 0.15s; }
.ap-task-edit-btn:hover { background: #f3f0ff; color: var(--ap-accent); }
.ap-task-edit-btn--danger:hover { background: #fef2f2; color: #ef4444; }
/* My Day sun toggle on a task card — amber when pinned, muted otherwise. */
.ap-task-myday-btn--on { color: #f59e0b; }
.ap-task-myday-btn--on:hover { color: #f59e0b; background: #fff7ed; }
.ap-task-card-inner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; }
.ap-task-check { padding: 3px 0 0; flex-shrink: 0; border: 0; background: transparent; cursor: pointer; }
.ap-checkbox-ring { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ap-border); cursor: pointer; transition: border-color 0.15s; }
.ap-checkbox-ring:hover { border-color: var(--ap-accent); }
/* ---- Completed task styling ---- */
.ap-task-card--completed .ap-task-title { text-decoration: line-through; color: var(--ap-text-muted); }
.ap-task-card--completed .ap-task-card-inner { opacity: 0.6; }
.ap-task-check--done { cursor: default; }
.ap-task-check:disabled { cursor: default; }
.ap-checkbox-ring--done { background: var(--ap-text-muted); border-color: var(--ap-text-muted); cursor: default; }
.ap-checkbox-ring--done:hover { border-color: var(--ap-text-muted); }
.ap-task-body { flex: 1; min-width: 0; }
.ap-task-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.ap-task-title { font-size: 0.95rem; font-weight: 600; color: var(--ap-text); }
.ap-task-subcount { margin-left: auto; flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--ap-text-muted); white-space: nowrap; }
.ap-task-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
/* ---- Badges ---- */
.ap-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; }
.ap-badge--high { background: #fef2f2; color: var(--ap-high-color); border: 1px solid #fca5a5; }
.ap-badge--medium { background: #eff6ff; color: var(--ap-medium-color); border: 1px solid #93c5fd; }
.ap-badge--low { background: transparent; color: var(--ap-text-muted); border: 1px solid var(--ap-border); }
.ap-badge--ai { background: #f3f0ff; color: var(--ap-accent); border: 1px solid #c4b5fd; }
.ap-badge-icon-sm { font-size: 12px; }
.ap-task-pills { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
/* Task indicator icons (description / steps / attachments) */
.ap-task-indicators {
display: flex;
align-items: center;
gap: 0.3rem;
margin-left: auto;
flex-shrink: 0;
}
.ap-task-indicator {
display: inline-flex;
align-items: center;
gap: 0.18rem;
font-size: 0.72rem;
font-weight: 600;
padding: 0.1rem 0.28rem;
border-radius: 0.25rem;
white-space: nowrap;
cursor: default;
}
.ap-task-indicator .rzi { font-size: 0.85rem; }
.ap-task-indicator-count { font-size: 0.7rem; font-weight: 700; }
.ap-task-indicator--desc { color: #f59e0b; background: rgba(245,158,11,0.12); }
.ap-task-indicator--steps { color: #3b82f6; background: rgba(59,130,246,0.12); }
.ap-task-indicator--attach { color: #f97316; background: rgba(249,115,22,0.12); }
.ap-task-indicator--image { color: #eab308; background: rgba(234,179,8,0.12); }
.ap-status-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 0.25rem; border: 1.5px solid var(--ap-status-color, var(--ap-accent)); color: var(--ap-status-color, var(--ap-accent)); letter-spacing: 0.02em; white-space: nowrap; }
.ap-tag-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 1rem; border: 1.5px solid var(--ap-tag-color, var(--ap-accent)); color: var(--ap-tag-color, var(--ap-accent)); letter-spacing: 0.02em; white-space: nowrap; }
/* ---- Task meta ---- */
.ap-task-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ap-task-meta-item { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--ap-text-muted); }
.ap-meta-icon { font-size: 13px; }
/* ---- Project strip ---- */
.ap-project-strip-actions { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; margin-bottom: 0.4rem; flex-shrink: 0; }
.ap-btn-push-right { margin-left: auto; }
.ap-project-strip { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; min-width: 0; }
.ap-project-strip-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; flex: 1; }
.ap-project-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; border-radius: 1.5rem; border: 1.5px solid var(--ap-border); border-left: 3px solid var(--ap-project-color, var(--ap-border)); background: transparent; color: var(--ap-text-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; }
.ap-project-chip:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-project-chip--active { background: color-mix(in srgb, var(--ap-project-color, var(--ap-accent)) 12%, transparent); border-color: var(--ap-project-color, var(--ap-accent)); color: var(--ap-project-color, var(--ap-accent)); font-weight: 600; }
.ap-project-chip-icon { font-size: 15px !important; }
.ap-chip-delete { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; margin-left: 0.1rem; opacity: 0; transition: opacity 0.15s, color 0.15s; color: var(--ap-text-muted); cursor: pointer; }
.ap-project-chip:hover .ap-chip-delete { opacity: 0.55; }
.ap-chip-delete:hover { opacity: 1 !important; color: #ef4444; }
/* My Day sun toggle on a project chip — hidden until hover, but always shown (amber) when pinned. */
.ap-chip-myday { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; margin-left: 0.25rem; opacity: 0; transition: opacity 0.15s, color 0.15s; color: var(--ap-text-muted); cursor: pointer; }
.ap-project-chip:hover .ap-chip-myday { opacity: 0.55; }
.ap-chip-myday:hover { opacity: 1 !important; color: #f59e0b; }
.ap-chip-myday--on { opacity: 1 !important; color: #f59e0b; }
.ap-btn-xs { padding: 0.25rem 0.6rem !important; font-size: 0.76rem !important; }
.ap-btn-outline--active { border-color: var(--ap-accent) !important; color: var(--ap-accent) !important; background: rgba(85,0,221,0.06) !important; }
/* Inline clear (×) shown on the Filter / Sort buttons when that facet is active */
.ap-btn-clear { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.15rem; padding: 0.1rem; border-radius: 0.25rem; color: var(--ap-text-muted); opacity: 0.7; cursor: pointer; transition: color 0.15s, background 0.15s, opacity 0.15s; font-size: 14px; }
.ap-btn-clear:hover { opacity: 1; color: #ef4444; background: #fef2f2; }
.ap-btn-clear .rzi { font-size: 14px; }
/* ---- Priority strip ---- */
.ap-priority-strip { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; margin-top: 0.5rem; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ap-priority-strip::-webkit-scrollbar { display: none; }
.ap-priority-chip { flex-shrink: 0; }
.ap-priority-strip-greeting { font-size: 0.88rem; color: var(--ap-text-muted); margin-right: 0.25rem; white-space: nowrap; }
.ap-priority-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 1.5rem; border: 1.5px solid var(--ap-pri-color, var(--ap-border)); background: transparent; color: var(--ap-text-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; }
.ap-priority-chip:hover { background: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 10%, transparent); color: var(--ap-pri-color, var(--ap-accent)); }
.ap-priority-chip--active { background: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 12%, transparent); border-color: var(--ap-pri-color, var(--ap-accent)); color: var(--ap-pri-color, var(--ap-accent)); font-weight: 600; }
.ap-priority-chip-icon { font-size: 14px !important; }
.ap-priority-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; border-radius: 0.75rem; font-size: 0.68rem; font-weight: 700; padding: 0 0.2rem; background: color-mix(in srgb, var(--ap-pri-color, var(--ap-border)) 16%, transparent); margin-left: 0.1rem; }
.ap-priority-chip--active .ap-priority-chip-count { background: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 22%, transparent); }
/* ---- Sort panel ---- */
.ap-sort-wrap { position: relative; z-index: 201; }
.ap-sort-overlay { position: fixed; inset: 0; z-index: 199; background: transparent; }
.ap-sort-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 200; width: 272px; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.75rem; }
.ap-sort-panel-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-text-muted); margin-bottom: 0.6rem; }
.ap-sort-active { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.ap-sort-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; background: rgba(85,0,221,0.05); border: 1px solid rgba(85,0,221,0.15); border-radius: 0.4rem; }
.ap-sort-row-num { font-size: 0.68rem; font-weight: 700; color: var(--ap-accent); width: 1rem; text-align: center; flex-shrink: 0; }
.ap-sort-row-icon { font-size: 15px !important; color: var(--ap-accent); flex-shrink: 0; }
.ap-sort-row-label { flex: 1; font-size: 0.84rem; font-weight: 500; color: var(--ap-text); }
.ap-sort-dir-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ap-border); border-radius: 0.3rem; padding: 0.1rem 0.15rem; cursor: pointer; color: var(--ap-text-muted); transition: border-color 0.15s, color 0.15s; font-size: 14px; flex-shrink: 0; }
.ap-sort-dir-btn:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-sort-remove-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0.1rem; cursor: pointer; color: var(--ap-text-muted); border-radius: 0.25rem; transition: color 0.15s, background 0.15s; font-size: 14px; flex-shrink: 0; }
.ap-sort-remove-btn:hover { color: #ef4444; background: #fef2f2; }
.ap-sort-divider { height: 1px; background: var(--ap-border); margin: 0.4rem 0; }
.ap-sort-add-section { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ap-sort-field-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.65rem; border: 1.5px solid var(--ap-border); border-radius: 1rem; background: transparent; color: var(--ap-text-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ap-sort-field-btn:hover { border-color: var(--ap-accent); color: var(--ap-accent); background: rgba(85,0,221,0.06); }
.ap-sort-field-btn-icon { font-size: 14px !important; }
.ap-sort-panel-footer { padding-top: 0.5rem; border-top: 1px solid var(--ap-border); margin-top: 0.25rem; display: flex; justify-content: flex-end; }
.ap-sort-clear-btn { background: transparent; border: none; font-size: 0.78rem; font-weight: 600; color: #ef4444; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 0.3rem; transition: background 0.15s; }
.ap-sort-clear-btn:hover { background: #fef2f2; }
/* ---- Sort chips strip ---- */
.ap-sort-chips-strip { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0.45rem 0.75rem; background: rgba(85,0,221,0.04); border: 1px solid rgba(85,0,221,0.12); border-radius: 0.5rem; }
.ap-sort-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.4rem 0.18rem 0.55rem; border: 1.5px solid rgba(85,0,221,0.3); border-radius: 1rem; background: rgba(85,0,221,0.08); color: var(--ap-accent); font-size: 0.76rem; font-weight: 600; }
.ap-sort-chip-icon { font-size: 13px !important; }
.ap-sort-chip-dir { display: inline-flex; align-items: center; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--ap-accent); opacity: 0.65; transition: opacity 0.15s; font-size: 13px; }
.ap-sort-chip-dir:hover { opacity: 1; }
.ap-sort-chip-remove { display: inline-flex; align-items: center; background: transparent; border: none; padding: 0; margin-left: 0.1rem; cursor: pointer; color: var(--ap-accent); opacity: 0.45; transition: opacity 0.15s, color 0.15s; font-size: 13px; }
.ap-sort-chip-remove:hover { opacity: 1; color: #ef4444; }
.ap-sort-chip-clear { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.55rem; border: 1.5px solid #ef4444; border-radius: 1rem; background: transparent; color: #ef4444; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.15s; margin-left: auto; }
.ap-sort-chip-clear:hover { background: #fef2f2; }
/* ---- Filter bar ---- */
.ap-filter-wrap { position: relative; z-index: 201; }
.ap-filter-bar { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 200; display: flex; align-items: center; gap: 0.5rem; width: 320px; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.6rem; padding: 0.5rem 0.75rem; box-shadow: 0 4px 16px rgba(0,0,0,0.10); transition: border-color 0.2s; }
.ap-filter-bar:focus-within { border-color: var(--ap-accent); }
.ap-filter-icon { font-size: 18px !important; color: var(--ap-text-muted); flex-shrink: 0; }
.ap-filter-input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.9rem; color: var(--ap-text); }
.ap-filter-input::placeholder { color: var(--ap-text-muted); }
.ap-filter-clear { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0.2rem; border-radius: 0.25rem; cursor: pointer; color: var(--ap-text-muted); transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.ap-filter-clear:hover { color: #ef4444; background: #fef2f2; }
/* ---- Infinite-scroll sentinel ---- */
.ap-task-scroll-sentinel { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 0 0.5rem; font-size: 0.8rem; color: var(--ap-text-muted); }
/* ---- Filter & Sort toolbar (below projects, above task list) ---- */
.ap-list-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* Left-anchor the sort panel when it lives in the list toolbar instead of the header */
.ap-sort-panel--left { right: auto; left: 0; }
/* Filter panel — a richer popover than the old single-input bar */
.ap-filter-panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 200; width: 320px; max-width: min(320px, 92vw); background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.75rem; }
.ap-filter-panel-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-text-muted); margin-bottom: 0.6rem; }
.ap-filter-section { margin-bottom: 0.7rem; }
.ap-filter-section:last-of-type { margin-bottom: 0; }
.ap-filter-section-label { font-size: 0.72rem; font-weight: 600; color: var(--ap-text-muted); margin-bottom: 0.35rem; }
/* The shared filter input bar, rendered inline inside the panel (override the absolute base) */
.ap-filter-bar--inline { position: static; width: auto; right: auto; top: auto; box-shadow: none; padding: 0.4rem 0.6rem; border-radius: 0.5rem; }
.ap-filter-opt-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ap-filter-opt { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.65rem; border: 1.5px solid var(--ap-border); border-radius: 1rem; background: transparent; color: var(--ap-text-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ap-filter-opt:hover { border-color: var(--ap-accent); color: var(--ap-accent); background: rgba(85,0,221,0.06); }
.ap-filter-opt--active { border-color: var(--ap-accent); color: var(--ap-accent); background: rgba(85,0,221,0.1); font-weight: 600; }
.ap-filter-opt-icon { font-size: 14px !important; }
.ap-filter-opt-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ap-status-color, var(--ap-text-muted)); flex-shrink: 0; }
.ap-filter-opt-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; border-radius: 0.75rem; font-size: 0.66rem; font-weight: 700; padding: 0 0.2rem; background: color-mix(in srgb, var(--ap-status-color, var(--ap-border)) 18%, transparent); margin-left: 0.15rem; }
.ap-filter-opt--active .ap-filter-opt-count { background: color-mix(in srgb, var(--ap-accent) 18%, transparent); }
.ap-filter-panel-footer { padding-top: 0.5rem; border-top: 1px solid var(--ap-border); margin-top: 0.6rem; display: flex; justify-content: flex-end; }
/* ---- Tag pill (manage dialogs) ---- */
.ap-tag-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 1rem; border: 1.5px solid var(--ap-tag-color, #5500dd); background: color-mix(in srgb, var(--ap-tag-color, #5500dd) 15%, transparent); color: var(--ap-tag-color, #5500dd); font-size: 0.8rem; font-weight: 600; }
.ap-manage-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 300px; overflow-y: auto; }
.ap-manage-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.ap-manage-input { flex: 1; }
.ap-manage-add-row { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ap-border); }
/* Labelled Kanban on/off switch in the add-new and inline-edit rows of the Manage Statuses dialog.
Uses --rz-* tokens because the dialog renders outside .ap-shell where --ap-* are undefined. */
.ap-kanban-toggle { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.ap-kanban-toggle-label { font-size: 0.72rem; font-weight: 600; color: var(--rz-text-color, inherit); }
.ap-default-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border-radius: 0.25rem; background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.ap-icon-preview { display: flex; align-items: center; justify-content: center; height: 36px; color: var(--ap-preview-color, var(--ap-accent)); font-size: 2rem; }
/* ---- Icon picker ---- */
/* Icon picker — uses theme-aware Radzen variables (not the .ap-shell-scoped --ap-* tokens) because it
renders inside Radzen dialogs, mounted outside .ap-shell where --ap-* are undefined. Surfaces use
--rz-base-background-color / --rz-border-color (which invert with the theme); the --rz-base-100/200/300
scale is NOT theme-inverting (light greys in dark mode) so it is avoided here. */
.ap-icon-trigger { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; border: 1.5px solid var(--rz-border-color, #e5e7eb); border-radius: 0.5rem; background: var(--rz-base-background-color, #ffffff); color: var(--rz-text-color, #1a1a2e); cursor: pointer; font-size: 0.88rem; font-weight: 500; transition: border-color 0.15s, background 0.15s; width: 100%; }
.ap-icon-trigger:hover { border-color: var(--rz-primary, #5500dd); background: color-mix(in srgb, var(--rz-primary, #5500dd) 10%, transparent); }
.ap-icon-trigger-icon { font-size: 1.4rem !important; color: var(--ap-preview-color, var(--rz-primary, #5500dd)); flex-shrink: 0; }
.ap-icon-trigger-name { flex: 1; text-align: left; font-size: 0.84rem; color: var(--rz-text-color, #1a1a2e); }
.ap-icon-trigger-chevron { font-size: 1.1rem !important; color: var(--rz-text-secondary-color, #6b7280); flex-shrink: 0; }
.ap-icon-picker { border: 1px solid var(--rz-border-color, #e5e7eb); border-radius: 0.5rem; padding: 0.75rem; margin-top: 0.4rem; background: var(--rz-base-background-color, #ffffff); }
.ap-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 4px; max-height: 240px; overflow-y: auto; margin-top: 0.5rem; }
.ap-icon-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.4rem 0.2rem; border: 1.5px solid transparent; border-radius: 0.4rem; background: transparent; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ap-icon-cell:hover { border-color: var(--rz-primary, #5500dd); background: color-mix(in srgb, var(--rz-primary, #5500dd) 10%, transparent); }
.ap-icon-cell--active { border-color: var(--rz-primary, #5500dd); background: color-mix(in srgb, var(--rz-primary, #5500dd) 14%, transparent); }
.ap-icon-cell .rzi { font-size: 1.4rem !important; color: var(--rz-text-color, #1a1a2e); }
.ap-icon-cell--active .rzi { color: var(--rz-primary, #5500dd); }
.ap-icon-cell-name { font-size: 0.58rem; color: var(--rz-text-secondary-color, #6b7280); text-align: center; word-break: break-all; line-height: 1.2; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Subtasks ---- */
.ap-subtask-list { padding: 0 1rem 0.85rem 2.75rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ap-subtask { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.83rem; color: var(--ap-text-muted); }
.ap-subtask-bullet { color: var(--ap-accent); font-weight: 700; flex-shrink: 0; }
.ap-highlight-blue { color: var(--ap-accent); font-weight: 600; }
.ap-task-empty { padding: 2rem 1rem; text-align: center; color: var(--ap-text-muted); font-size: 0.9rem; }
.ap-html-editor { height: 160px; width: 100%; }
.ap-field-label { font-size: 0.82rem; color: var(--rz-text-secondary-color); margin-bottom: 0.3rem; display: block; }
/* Description section header with pop-out button */
.ap-desc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.ap-desc-header .ap-field-label { margin-bottom: 0; }
.ap-popout-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0.15rem; border-radius: 0.25rem; color: var(--rz-text-secondary-color); cursor: pointer; line-height: 1; transition: color 0.15s, background 0.15s; }
.ap-popout-btn:hover { color: var(--rz-primary); background: rgba(var(--rz-primary-rgb, 0,120,212), 0.08); }
.ap-popout-btn .rzi { font-size: 1rem; }
/* Description pop-out dialog layout */
.ap-desc-dlg { display: flex; flex-direction: column; height: 100%; padding: 1rem; box-sizing: border-box; gap: 0.75rem; }
.ap-desc-dlg-body { flex: 1; min-height: 0; }
.ap-desc-dlg-editor { height: 100% !important; min-height: 380px; }
.ap-desc-dlg-footer { display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; }
.ap-field-help { font-size: 0.78rem; color: var(--rz-text-secondary-color); line-height: 1.35; }
.ap-preference-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
/* ---- Condensed density mode ---- */
.ap-page--condensed .ap-ai-bar { margin-bottom: 0.65rem; padding: 0.62rem 0.8rem; }
.ap-page--condensed .ap-project-strip { margin-bottom: 0.5rem; }
.ap-page--condensed .ap-sort-chips-strip { margin-bottom: 0.5rem; padding: 0.32rem 0.55rem; }
.ap-page--condensed .ap-task-list { gap: 0.35rem; }
.ap-page--condensed .ap-task-card-inner { padding: 0.62rem 0.75rem; gap: 0.55rem; }
.ap-page--condensed .ap-task-title { font-size: 0.88rem; }
.ap-page--condensed .ap-task-pills { margin-bottom: 0.18rem; gap: 0.28rem; }
.ap-page--condensed .ap-status-badge,
.ap-page--condensed .ap-tag-badge,
.ap-page--condensed .ap-badge { font-size: 0.62rem; padding: 0.1rem 0.45rem; }
.ap-page--condensed .ap-task-meta-item { font-size: 0.72rem; }
/* ---- Right panel ---- */
.ap-tasks-right { display: flex; flex-direction: column; gap: 0.75rem; }
/* ---- Deep Work card ---- */
.ap-focus-card { background: var(--ap-focus-bg); border-radius: 0.75rem; padding: 1.1rem 1.1rem 1.25rem; color: #ffffff; }
.ap-focus-card-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; }
.ap-focus-bolt { font-size: 20px; color: #a78bfa; }
.ap-focus-engine-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #a78bfa; }
.ap-focus-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: #ffffff; }
.ap-focus-body { font-size: 0.8rem; line-height: 1.5; color: #c4b5fd; margin: 0 0 1rem; }
.ap-focus-btn { width: 100%; padding: 0.6rem 1rem; background: #ffffff; color: var(--ap-focus-bg); border: none; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.ap-focus-btn:hover { opacity: 0.9; }
/* ---- Efficiency Score card ---- */
.ap-efficiency-card { background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; padding: 1rem 1.1rem; }
.ap-efficiency-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.ap-efficiency-icon { font-size: 16px; color: var(--ap-medium-color); }
.ap-efficiency-label { font-size: 0.8rem; font-weight: 600; color: var(--ap-text-muted); }
.ap-efficiency-score-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.ap-efficiency-score { font-size: 2.5rem; font-weight: 700; color: var(--ap-text); line-height: 1; }
.ap-efficiency-delta { font-size: 0.78rem; font-weight: 600; color: #16a34a; }
.ap-efficiency-bar { height: 6px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; margin-bottom: 0.6rem; }
.ap-efficiency-bar-fill { height: 100%; width: var(--ap-fill, 0%); background: linear-gradient(to right, var(--ap-accent), #9050ff); border-radius: 9999px; }
.ap-efficiency-note { font-size: 0.75rem; color: var(--ap-text-muted); margin: 0; line-height: 1.4; }
.ap-efficiency-high { color: var(--ap-high-color); font-weight: 600; }
/* ---- Active Contexts card ---- */
.ap-contexts-card { background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.75rem; padding: 1rem 1.1rem; }
.ap-contexts-header { font-size: 0.82rem; font-weight: 600; color: var(--ap-text-muted); margin-bottom: 0.6rem; }
.ap-contexts-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ap-context-tag { font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: 1rem; border: 1px solid var(--ap-border); color: var(--ap-text-muted); background: transparent; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ap-context-tag:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-context-tag--active { background: var(--ap-accent); color: #fff; border-color: var(--ap-accent); }
/* ---- Placeholder pages ---- */
.ap-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; gap: 1rem; color: var(--ap-text-muted); }
.ap-placeholder-icon { font-size: 3rem; color: var(--ap-border); }
.ap-placeholder-title { font-size: 1.25rem; font-weight: 600; color: var(--ap-text); margin: 0; }
.ap-placeholder-subtitle { font-size: 0.9rem; margin: 0; }
/* ---- App responsive ---- */
.ap-burger { display: flex; }
.ap-sidebar-close { display: flex; }
.ap-nav-overlay { display: none; }
@media (max-width: 960px) {
.ap-tasks-grid { grid-template-columns: 1fr; }
.ap-tasks-right { display: none; }
}
@media (max-width: 768px) {
/* Sidebar becomes a fixed slide-in drawer */
.ap-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh; /* fallback for engines without dvh support */
height: 100dvh; /* tracks the live viewport (foldable unfold transition) */
z-index: 400;
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
.ap-shell.ap-nav-open .ap-sidebar {
transform: translateX(0);
}
/* Backdrop overlay */
.ap-nav-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 399;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.ap-shell.ap-nav-open .ap-nav-overlay {
opacity: 1;
pointer-events: auto;
}
/* Show burger + close buttons */
.ap-burger { display: flex; }
.ap-sidebar-close { display: flex; }
.ap-topbar-brand { display: block; }
.ap-main { padding: 1.25rem; }
}
/* ===================================================================
DASHBOARD PAGE — db-* prefix
=================================================================== */
.db-page {
--db-surface: var(--ap-card-bg);
--db-surface-alt: color-mix(in srgb, var(--ap-accent) 7%, var(--ap-card-bg));
--db-border: var(--ap-border);
--db-text: var(--ap-text);
--db-muted: var(--ap-text-muted);
--db-shadow: 0 1px 8px color-mix(in srgb, #000 16%, transparent);
padding: 2rem;
}
.db-page-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.db-page-title { font-size: 1.75rem; font-weight: 700; color: var(--db-text); margin: 0 0 .25rem; }
.db-page-subtitle { font-size: .875rem; color: var(--db-muted); margin: 0; }
.db-header-avatars { display: flex; align-items: center; }
.db-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--ap-active, #5500dd); color: #fff; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--db-surface); margin-left: -6px; }
.db-avatar-sm:first-child { margin-left: 0; }
.db-avatar-sm--b { background: #1a1060; }
.db-avatar-sm--c { background: color-mix(in srgb, var(--ap-accent) 18%, var(--db-surface)); color: var(--ap-active, #5500dd); }
/* Top grid */
.db-top-grid { display: grid; grid-template-columns: 1fr 290px; gap: 1rem; margin-bottom: 1rem; }
/* AI Summary card */
.db-ai-summary-card { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 14px; padding: 1.5rem; box-shadow: var(--db-shadow); display: flex; flex-direction: column; }
.db-ai-header { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.db-ai-logo { font-weight: 800; font-size: .95rem; color: var(--db-text); letter-spacing: -.02em; }
.db-ai-badge { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--ap-active, #5500dd); background: color-mix(in srgb, var(--ap-accent) 16%, var(--db-surface)); padding: .15rem .5rem; border-radius: 4px; }
.db-greeting { font-size: 1.55rem; font-weight: 700; color: var(--db-text); margin: 0 0 .75rem; }
.db-summary-text { font-size: .875rem; color: var(--db-muted); line-height: 1.65; margin: 0 0 1.25rem; flex: 1; }
.db-summary-text strong { color: var(--db-text); font-weight: 700; }
.db-load-strip { margin: 0 0 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--db-border); border-radius: 10px; background: color-mix(in srgb, var(--ap-accent) 6%, var(--db-surface)); }
.db-load-strip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; flex-wrap: wrap; gap: .35rem; }
.db-load-strip-header { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--db-muted); }
.db-load-legend { display: flex; align-items: center; gap: .6rem; }
.db-load-legend-item { display: flex; align-items: center; gap: .25rem; font-size: .58rem; font-weight: 600; color: var(--db-muted); }
.db-load-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.db-load-strip-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; align-items: end; }
.db-load-bar-col { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.db-load-bar-col--today .db-load-bar-label { color: var(--db-text); font-weight: 700; }
.db-load-stack { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; max-width: 22px; min-height: 10px; gap: 1px; }
.db-load-seg { display: block; width: 100%; border-radius: 3px; transition: height .3s ease; }
.db-seg--critical { background: #ef4444; }
.db-seg--high { background: #f59e0b; }
.db-seg--normal { background: #6366f1; }
.db-seg--meeting { background: #06b6d4; }
.db-seg--empty { height: 10px; background: color-mix(in srgb, var(--ap-accent) 20%, var(--db-surface)); opacity: .4; border-radius: 3px; }
.db-load-bar-label { font-size: .62rem; font-weight: 600; color: var(--db-muted); }
.db-upcoming-panels { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1rem; }
.db-upcoming-panel { border: 1px solid var(--db-border); border-radius: 10px; padding: .65rem .75rem; background: color-mix(in srgb, var(--ap-accent) 4%, var(--db-surface)); min-height: 112px; }
.db-upcoming-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--db-muted); margin-bottom: .45rem; }
.db-upcoming-empty { font-size: .78rem; color: var(--db-muted); }
.db-upcoming-row { display: flex; flex-direction: column; gap: .1rem; padding: .2rem 0; }
.db-upcoming-main { font-size: .82rem; font-weight: 700; color: var(--db-text); line-height: 1.3; }
.db-upcoming-meta { font-size: .7rem; color: var(--db-muted); }
.db-stats-row { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--db-border); }
.db-stat-item { flex: 1; padding: .75rem 1rem; background: var(--db-surface-alt); display: flex; flex-direction: column; gap: .2rem; }
.db-stat-item + .db-stat-item { border-left: 1px solid var(--db-border); }
.db-stat-label { font-size: .62rem; font-weight: 700; color: var(--db-muted); letter-spacing: .07em; text-transform: uppercase; }
.db-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--db-text); }
/* Right column */
.db-right-col { display: flex; flex-direction: column; gap: .75rem; }
/* Next Up card */
.db-next-up-card { background: #1a1060; border-radius: 14px; padding: 1rem 1rem 1rem; color: #fff; flex: 1; }
.db-next-up-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.db-next-up-badge { font-size: .58rem; font-weight: 700; letter-spacing: .1em; background: rgba(255,255,255,.15); padding: .2rem .5rem; border-radius: 4px; display: inline-block; }
.db-next-up-close { background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.7); width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.db-next-up-title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 .35rem; line-height: 1.3; }
.db-next-up-time { font-size: .73rem; color: rgba(255,255,255,.65); margin: 0 0 .85rem; }
.db-join-btn { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: .8rem; font-weight: 600; padding: .45rem .85rem; border-radius: 8px; text-decoration: none; }
.db-join-btn:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
/* Smart Suggestions card */
.db-suggestions-card { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 14px; padding: 1rem; box-shadow: var(--db-shadow); }
.db-suggestions-header { font-size: .78rem; font-weight: 700; color: var(--db-text); display: flex; align-items: center; gap: .35rem; margin-bottom: .65rem; }
.db-suggestion-item { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; }
.db-suggestion-item + .db-suggestion-item { border-top: 1px solid var(--db-border); }
.db-suggestion-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.db-suggestion-icon--n { background: #07073e; color: #fff; }
.db-suggestion-icon--a { background: color-mix(in srgb, var(--ap-accent) 18%, var(--db-surface)); color: var(--ap-active, #5500dd); }
.db-suggestion-body { flex: 1; }
.db-suggestion-title { font-size: .8rem; font-weight: 600; color: var(--db-text); margin-bottom: .1rem; }
.db-suggestion-meta { font-size: .7rem; color: var(--db-muted); }
/* Bottom grid */
.db-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Quick-stat band */
.db-quickstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.db-qstat { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.15rem; border: none; border-radius: 14px; cursor: pointer; color: #fff; text-align: left; box-shadow: var(--db-shadow); transition: transform .15s, box-shadow .15s; }
.db-qstat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--db-qstat-glow, #000) 38%, transparent); }
.db-qstat-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .18); flex-shrink: 0; }
.db-qstat-icon .rzi { font-size: 22px; }
.db-qstat-body { display: flex; flex-direction: column; line-height: 1.1; }
.db-qstat-value { font-size: 1.6rem; font-weight: 800; }
.db-qstat-label { font-size: .68rem; font-weight: 600; letter-spacing: .04em; opacity: .92; text-transform: uppercase; }
.db-qstat--tasks { background: linear-gradient(135deg, #5500dd, #7c3aed); --db-qstat-glow: #5500dd; }
.db-qstat--due { background: linear-gradient(135deg, #f59e0b, #f97316); --db-qstat-glow: #f59e0b; }
.db-qstat--events { background: linear-gradient(135deg, #06b6d4, #0891b2); --db-qstat-glow: #06b6d4; }
.db-qstat--recipes { background: linear-gradient(135deg, #10b981, #059669); --db-qstat-glow: #10b981; }
/* Insights grid (priority donut + kitchen card) */
.db-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.db-chart-card, .db-kitchen-card { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 14px; padding: 1.25rem; box-shadow: var(--db-shadow); }
.db-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 230px; color: var(--db-muted); text-align: center; font-size: .85rem; }
.db-chart-empty .rzi { font-size: 2rem; opacity: .55; }
.db-chart-empty--kitchen { height: auto; padding: 1.4rem 0; }
/* Kitchen card */
.db-kitchen-stats { display: flex; gap: .5rem; margin-bottom: 1rem; }
.db-kstat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .4rem; border-radius: 10px; background: var(--db-surface-alt); }
.db-kstat-value { font-size: 1.15rem; font-weight: 800; color: var(--db-text); display: inline-flex; align-items: center; gap: .25rem; }
.db-kstat-value .rzi { font-size: 16px; }
.db-kstat-value--fav { color: #ec4899; }
.db-kstat-value--star { color: #f59e0b; }
.db-kstat-label { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--db-muted); }
.db-tonight { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem; border: 1px solid var(--db-border); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 13%, var(--db-surface)), var(--db-surface)); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.db-tonight:hover { border-color: #f59e0b; transform: translateY(-1px); }
.db-tonight-thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #f59e0b 18%, var(--db-surface)); color: #f59e0b; }
.db-tonight-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-tonight-thumb .rzi { font-size: 24px; }
.db-tonight-body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.db-tonight-eyebrow { font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f59e0b; }
.db-tonight-title { font-size: .95rem; font-weight: 700; color: var(--db-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-tonight-meta { font-size: .75rem; color: var(--db-muted); }
.db-tonight-go { color: var(--db-muted); flex-shrink: 0; }
.db-kitchen-recent { margin-top: 1rem; display: flex; flex-direction: column; }
.db-kitchen-recent-label { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--db-muted); margin-bottom: .35rem; }
.db-kitchen-recent-row { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .35rem; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; transition: background .15s; }
.db-kitchen-recent-row:hover { background: var(--db-surface-alt); }
.db-kitchen-recent-icon { font-size: 16px; color: var(--db-muted); flex-shrink: 0; }
.db-kitchen-recent-title { font-size: .82rem; font-weight: 600; color: var(--db-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.db-kitchen-recent-meta { font-size: .7rem; color: var(--db-muted); flex-shrink: 0; }
/* Day Progress card */
.db-progress-card, .db-heatmap-card { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 14px; padding: 1.25rem; box-shadow: var(--db-shadow); }
.db-card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.db-card-title { font-size: .875rem; font-weight: 700; color: var(--db-text); }
.db-view-link { font-size: .75rem; color: var(--ap-active, #5500dd); text-decoration: none; font-weight: 600; }
.db-view-link:hover { text-decoration: underline; }
.db-progress-list { display: flex; flex-direction: column; gap: .85rem; }
.db-progress-item { display: flex; align-items: flex-start; gap: .75rem; }
.db-progress-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.db-dot-icon { font-size: .75rem !important; }
.db-progress-dot--done { background: var(--ap-active, #5500dd); color: #fff; }
.db-progress-dot--edit { background: color-mix(in srgb, var(--ap-accent) 18%, var(--db-surface)); color: var(--ap-active, #5500dd); }
.db-progress-dot--pending { border: 2px solid var(--db-border); background: transparent; }
.db-progress-content { flex: 1; }
.db-progress-title { font-size: .82rem; font-weight: 600; color: var(--db-text); margin-bottom: .12rem; }
.db-progress-meta { font-size: .72rem; color: var(--db-muted); margin-bottom: .25rem; }
.db-tag { display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .06em; padding: .1rem .4rem; border-radius: 3px; margin-right: .25rem; }
.db-tag--health { background: #dcfce7; color: #15803d; }
.db-tag--work { background: #dbeafe; color: #1d4ed8; }
.db-tag--ai { background: #f0e8ff; color: var(--ap-active, #5500dd); }
/* Productivity Heatmap */
.db-heatmap-card { position: relative; }
.db-heatmap-legend { display: flex; align-items: center; gap: .3rem; font-size: .6rem; font-weight: 700; color: var(--db-muted); letter-spacing: .07em; }
.db-heatmap-legend-sq { width: 10px; height: 10px; border-radius: 2px; }
.db-heatmap-wrap { position: relative; margin: .5rem 0; }
.db-heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.db-hm-cell { aspect-ratio: 1; border-radius: 4px; }
.db-hm-0 { background: color-mix(in srgb, var(--ap-accent) 6%, var(--db-surface)); }
.db-hm-1 { background: color-mix(in srgb, var(--ap-accent) 20%, var(--db-surface)); }
.db-hm-2 { background: color-mix(in srgb, var(--ap-accent) 35%, var(--db-surface)); }
.db-hm-3 { background: color-mix(in srgb, var(--ap-accent) 50%, var(--db-surface)); }
.db-hm-4 { background: var(--ap-active, #5500dd); }
.db-hm-5 { background: #07073e; }
.db-heatmap-ai-tag { display: inline-flex; align-items: center; gap: .3rem; background: #07073e; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .07em; padding: .25rem .6rem; border-radius: 5px; position: absolute; right: 0; bottom: .25rem; }
.db-heatmap-footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: .75rem; }
.db-heatmap-avg-label { display: block; font-size: .62rem; color: var(--db-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-bottom: .1rem; }
.db-heatmap-avg-value { font-size: 1.1rem; font-weight: 700; color: var(--db-text); }
/* ---- Dashboard premium dark theme pass ---- */
.ap-shell--dark .ap-sidebar {
background: #070d1f;
border-right-color: #1b253b;
}
.ap-shell--dark .ap-sidebar-brand,
.ap-shell--dark .ap-sidebar-bottom,
.ap-shell--dark .ap-topbar {
border-color: #1b253b;
}
.ap-shell--dark .ap-nav-item {
color: #7f8ba7;
}
.ap-shell--dark .ap-nav-item:hover {
background: #111a30;
color: #dce1fb;
}
.ap-shell--dark .ap-nav-item--active,
.ap-shell--dark .ap-nav-item--active:hover {
background: rgba(73, 95, 132, 0.32);
color: #dce1fb;
}
.ap-shell--dark .db-page {
--db-surface: #191f31;
--db-surface-alt: #23293c;
--db-border: #2e3447;
--db-text: #dce1fb;
--db-muted: #9aa6c2;
--db-shadow: none;
}
.ap-shell--dark .db-next-up-card,
.ap-shell--dark .ap-focus-card {
background: #001b3d;
}
.ap-shell--dark .db-next-up-time,
.ap-shell--dark .db-next-up-close {
color: rgba(220, 225, 251, 0.7);
}
.ap-shell--dark .db-join-btn {
background: rgba(177, 199, 242, 0.14);
border-color: rgba(177, 199, 242, 0.24);
color: #dce1fb;
}
.ap-shell--dark .db-join-btn:hover {
background: rgba(177, 199, 242, 0.24);
}
.ap-shell--dark .db-ai-badge,
.ap-shell--dark .db-tag--ai,
.ap-shell--dark .db-avatar-sm--c {
background: rgba(177, 199, 242, 0.16);
color: #b1c7f2;
}
.ap-shell--dark .db-tag--health {
background: rgba(16, 185, 129, 0.18);
color: #6ee7b7;
}
.ap-shell--dark .db-tag--work {
background: rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
.ap-shell--dark .db-hm-0 { background: #2e3447; }
.ap-shell--dark .db-hm-1 { background: #4c5672; }
.ap-shell--dark .db-hm-2 { background: #6a7698; }
.ap-shell--dark .db-hm-3 { background: #8897c1; }
.ap-shell--dark .db-hm-4 { background: #b1c7f2; }
.ap-shell--dark .db-hm-5 { background: #d6e3ff; }
.ap-shell--dark .db-view-link {
color: #b1c7f2;
}
/* ---- Dark mode: checkboxes, priority badges, status/tag badges ---- */
/* Checkbox ring — border is near-invisible at #2e3447 against dark cards */
.ap-shell--dark .ap-checkbox-ring {
border-color: #4e5a78;
}
.ap-shell--dark .ap-checkbox-ring:hover {
border-color: var(--ap-accent);
box-shadow: 0 0 0 3px rgba(177, 199, 242, 0.15);
}
/* Priority badges — replace light pastel fills with dark-tinted equivalents */
.ap-shell--dark .ap-badge--high {
background: rgba(255, 100, 100, 0.14);
color: #ffa0a0;
border-color: rgba(255, 100, 100, 0.38);
}
.ap-shell--dark .ap-badge--critical {
background: rgba(220, 38, 38, 0.18);
color: #f87171;
border-color: rgba(220, 38, 38, 0.45);
}
.ap-shell--dark .ap-badge--medium {
background: rgba(100, 160, 255, 0.13);
color: #93c5fd;
border-color: rgba(100, 160, 255, 0.38);
}
.ap-shell--dark .ap-badge--low {
background: rgba(148, 163, 184, 0.1);
color: #94a3b8;
border-color: rgba(148, 163, 184, 0.28);
}
/* AI badge — violet-200 so it reads clearly against dark cards */
.ap-shell--dark .ap-badge--ai {
background: rgba(139, 92, 246, 0.22);
color: #ddd6fe;
border-color: rgba(139, 92, 246, 0.65);
}
/* -----------------------------------------------------------------------
Status badges, tag badges, tag pills — any source colour (inc. dark
purple #5500dd) must become legible. Strategy:
• Background: 20% of the source colour → subtle tint
• Border: 65% opacity → clearly visible outline
• Text: 50% source + 50% white → always a pastel, never dark
----------------------------------------------------------------------- */
.ap-shell--dark .ap-status-badge {
background: color-mix(in srgb, var(--ap-status-color, var(--ap-accent)) 20%, transparent);
border-color: color-mix(in srgb, var(--ap-status-color, var(--ap-accent)) 65%, transparent);
color: color-mix(in srgb, var(--ap-status-color, var(--ap-accent)) 50%, #ffffff);
}
.ap-shell--dark .ap-tag-badge {
background: color-mix(in srgb, var(--ap-tag-color, var(--ap-accent)) 20%, transparent);
border-color: color-mix(in srgb, var(--ap-tag-color, var(--ap-accent)) 65%, transparent);
color: color-mix(in srgb, var(--ap-tag-color, var(--ap-accent)) 50%, #ffffff);
}
.ap-shell--dark .ap-tag-pill {
background: color-mix(in srgb, var(--ap-tag-color, #8b5cf6) 20%, transparent);
border-color: color-mix(in srgb, var(--ap-tag-color, #8b5cf6) 65%, transparent);
color: color-mix(in srgb, var(--ap-tag-color, #8b5cf6) 50%, #ffffff);
}
/* Project chips — active state uses project colour which can be any dark hue */
.ap-shell--dark .ap-project-chip--active {
background: color-mix(in srgb, var(--ap-project-color, var(--ap-accent)) 20%, transparent);
border-color: color-mix(in srgb, var(--ap-project-color, var(--ap-accent)) 65%, transparent);
color: color-mix(in srgb, var(--ap-project-color, var(--ap-accent)) 50%, #ffffff);
}
/* Priority chips — active state ("All" falls back to accent = dark purple in light) */
.ap-shell--dark .ap-priority-chip--active {
background: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 20%, transparent);
border-color: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 65%, transparent);
color: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 50%, #ffffff);
}
.ap-shell--dark .ap-priority-chip-count {
background: color-mix(in srgb, var(--ap-pri-color, var(--ap-accent)) 28%, transparent);
}
/* Default badge (yellow "Default" label) — hard-coded light yellow is invisible in dark */
.ap-shell--dark .ap-default-badge {
background: rgba(250, 204, 21, 0.13);
color: #fcd34d;
border-color: rgba(250, 204, 21, 0.32);
}
/* Danger hover on sort/edit buttons — light-red bg is invisible in dark */
.ap-shell--dark .ap-sort-remove-btn:hover {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
.ap-shell--dark .ap-task-edit-btn--danger:hover {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
/* ---- Dark mode visual polish pass (match premium reference) ---- */
.ap-shell--dark .ap-content-area {
background: linear-gradient(180deg, #0c1324 0%, #0b1120 100%);
}
.ap-shell--dark .ap-topbar {
background: #131a2d;
border-bottom-color: #1f2a43;
}
.ap-shell--dark .ap-topbar-actions {
gap: 0.55rem;
}
.ap-shell--dark .ap-icon-btn {
color: #9aa6c2;
}
.ap-shell--dark .ap-icon-btn:hover {
background: #1b253b;
color: #dce1fb;
}
.ap-shell--dark .ap-search-wrap {
max-width: 430px;
}
.ap-shell--dark .ap-search-input {
background: #090f1d;
border-color: #2a3550;
border-radius: 999px;
color: #dce1fb;
box-shadow: inset 0 0 0 1px rgba(177, 199, 242, 0.08);
}
.ap-shell--dark .ap-search-input:focus {
border-color: #6f84ac;
box-shadow: 0 0 0 3px rgba(177, 199, 242, 0.18), inset 0 0 0 1px rgba(177, 199, 242, 0.12);
}
.ap-shell--dark .ap-avatar {
background: linear-gradient(135deg, #7f97c2 0%, #5f749d 100%);
color: #ffffff;
}
.ap-shell--dark .ap-profile-menu .rz-profile-menu-trigger {
color: #9aa6c2 !important;
}
.ap-shell--dark .ap-profile-menu .rz-profile-menu-trigger:hover {
background: #1b253b !important;
border-color: #2e3a58 !important;
color: #dce1fb !important;
}
.ap-shell--dark .rz-profile-menu-items,
.ap-shell--dark .rz-profile-menu-list {
background: #191f31 !important;
border-color: #2e3447 !important;
}
.ap-shell--dark .rz-profile-menu .rz-navigation-item-link,
.ap-shell--dark .rz-profile-menu .rz-menuitem {
color: #dce1fb !important;
}
.ap-shell--dark .rz-profile-menu .rz-navigation-item-link:hover,
.ap-shell--dark .rz-profile-menu .rz-menuitem:hover {
background: #23293c !important;
color: #eaf0ff !important;
}
.ap-shell--dark .db-page {
padding-top: 1.6rem;
}
.ap-shell--dark .db-page-title {
color: #e6ecff;
letter-spacing: -0.02em;
}
.ap-shell--dark .db-ai-summary-card,
.ap-shell--dark .db-suggestions-card,
.ap-shell--dark .db-progress-card,
.ap-shell--dark .db-heatmap-card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.ap-shell--dark .db-ai-summary-card,
.ap-shell--dark .db-suggestions-card,
.ap-shell--dark .db-progress-card,
.ap-shell--dark .db-heatmap-card,
.ap-shell--dark .db-next-up-card {
border-radius: 12px;
}
.ap-shell--dark .db-next-up-top,
.ap-shell--dark .db-suggestions-header,
.ap-shell--dark .db-card-header-row {
opacity: 0.96;
}
.ap-shell--dark .db-heatmap-legend-sq {
border: 1px solid rgba(177, 199, 242, 0.22);
}
@media (max-width: 960px) {
.db-top-grid, .db-bottom-grid, .db-insights-grid { grid-template-columns: 1fr; }
.db-upcoming-panels { grid-template-columns: 1fr; }
.db-quickstats { grid-template-columns: repeat(2, 1fr); }
}
/* ===================================================================
TASK CHECKLIST (ap-checklist-*)
=================================================================== */
.ap-checklist { display: flex; flex-direction: column; gap: 0.4rem; }
/* Progress bar */
.ap-checklist-progress { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.ap-checklist-bar { flex: 1; height: 5px; background: var(--ap-border); border-radius: 9999px; overflow: hidden; }
.ap-checklist-bar-fill { height: 100%; width: var(--ap-checklist-pct, 0%); background: var(--ap-accent); border-radius: 9999px; transition: width 0.3s ease; }
.ap-checklist-pct-label { font-size: 0.72rem; font-weight: 600; color: var(--ap-text-muted); white-space: nowrap; min-width: 2.5rem; text-align: right; }
/* Item list */
.ap-checklist-items { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.25rem; }
.ap-checklist-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 0.35rem; transition: background 0.12s; }
.ap-checklist-item:hover { background: var(--ap-card-hover); }
.ap-checklist-item--done .ap-checklist-title { text-decoration: line-through; color: var(--ap-text-muted); }
/* Check toggle button */
.ap-checklist-check { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--ap-text-muted); padding: 0; line-height: 1; border-radius: 0.25rem; transition: color 0.15s; flex-shrink: 0; }
.ap-checklist-check:hover { color: var(--ap-accent); }
.ap-checklist-check--done { color: var(--ap-accent); }
/* Step title */
.ap-checklist-title { flex: 1; font-size: 0.88rem; color: var(--ap-text); line-height: 1.4; cursor: text; }
/* Edit button */
.ap-checklist-edit { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: transparent; padding: 0; line-height: 1; border-radius: 0.25rem; transition: color 0.15s; flex-shrink: 0; }
.ap-checklist-item:hover .ap-checklist-edit { color: var(--ap-text-muted); }
.ap-checklist-edit:hover { color: var(--ap-accent) !important; }
/* Delete button */
.ap-checklist-delete { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: transparent; padding: 0; line-height: 1; border-radius: 0.25rem; transition: color 0.15s; flex-shrink: 0; }
.ap-checklist-item:hover .ap-checklist-delete { color: var(--ap-text-muted); }
.ap-checklist-delete:hover { color: var(--ap-high-color) !important; }
/* Add-step row */
.ap-checklist-add-row { display: flex; align-items: center; gap: 0.4rem; }
.ap-checklist-input { flex: 1; border: 1px solid var(--ap-border); border-radius: 0.4rem; padding: 0.4rem 0.65rem; font-size: 0.85rem; color: var(--ap-text); background: var(--ap-bg); outline: none; transition: border-color 0.2s; }
.ap-checklist-input:focus { border-color: var(--ap-accent); }
.ap-checklist-input::placeholder { color: var(--ap-text-muted); }
.ap-checklist-add-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ap-border); border-radius: 0.4rem; cursor: pointer; color: var(--ap-text-muted); width: 30px; height: 30px; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; }
.ap-checklist-add-btn:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
/* ===== Drag and Drop ===== */
.rz-flex-grow { flex: 1 1 0; min-width: 0; }
.ap-task-card[draggable="true"]
.ap-task-card[draggable="true"]:active { cursor: grabbing; }
/* Card being dragged — fade it out so the user sees where it came from */
.ap-task-card--dragging { opacity: 0.35; }
/* Drop-above: horizontal line at the top of the target card (insert before at the same level) */
.ap-task-card--drop-above { box-shadow: 0 -3px 0 0 var(--rz-primary, var(--ap-accent)); }
/* Drop-onto: dashed outline on the target card (make dragged task a child) */
.ap-task-card--drop-onto { box-shadow: inset 0 0 0 2px var(--rz-primary, var(--ap-accent)); background: color-mix(in srgb, var(--rz-primary, var(--ap-accent)) 8%, transparent); }
/* Project chip receiving a drop */
.ap-project-chip--drop-target { outline: 2px dashed var(--rz-primary, var(--ap-accent)); outline-offset: 2px; background: color-mix(in srgb, var(--rz-primary, var(--ap-accent)) 12%, transparent) !important; }
/* ─────────────────────────── Tasks view toggle (List / Board) ─────────────────────────── */
.ap-view-toggle { display: inline-flex; align-items: stretch; gap: 2px; margin-right: auto; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.5rem; padding: 2px; }
.ap-view-toggle-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border: none; background: transparent; color: var(--ap-text-muted); font-size: 0.85rem; font-weight: 500; border-radius: 0.4rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ap-view-toggle-btn:hover { color: var(--ap-text); background: var(--ap-card-hover); }
.ap-view-toggle-btn--active, .ap-view-toggle-btn--active:hover { color: var(--ap-active-text, #fff); background: var(--ap-active, var(--ap-accent)); }
.ap-view-toggle-btn .ap-btn-icon { font-size: 18px; }
/* ─────────────────────────────────── Kanban board ─────────────────────────────────── */
.ap-kanban { display: flex; gap: 0.85rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.5rem; }
.ap-kanban-col { flex: 0 0 280px; max-width: 280px; display: flex; flex-direction: column; background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: 0.6rem; max-height: calc(100vh - 280px); max-height: calc(100dvh - 280px); }
.ap-kanban-col-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--ap-border); position: sticky; top: 0; }
.ap-kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ap-status-color, var(--ap-text-muted)); }
.ap-kanban-col-name { font-size: 0.85rem; font-weight: 600; color: var(--ap-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-kanban-col-count { font-size: 0.75rem; font-weight: 600; color: var(--ap-text-muted); background: var(--ap-card-hover); border-radius: 999px; padding: 0.05rem 0.5rem; min-width: 1.4rem; text-align: center; }
.ap-kanban-col-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; overflow-y: auto; min-height: 60px; }
.ap-kanban-empty { font-size: 0.78rem; color: var(--ap-text-muted); text-align: center; padding: 1rem 0.5rem; border: 1px dashed var(--ap-border); border-radius: 0.5rem; }
.ap-kanban-col--drop-target { outline: 2px dashed var(--rz-primary, var(--ap-accent)); outline-offset: -2px; }
.ap-kanban-col--drop-target .ap-kanban-col-body { background: color-mix(in srgb, var(--rz-primary, var(--ap-accent)) 7%, transparent); }
.ap-kanban-card { background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-left: 3px solid var(--ap-task-accent, var(--ap-border)); border-radius: 0.5rem; padding: 0.6rem 0.7rem; cursor: grab; transition: background 0.15s, box-shadow 0.15s; }
.ap-kanban-card:hover { background: var(--ap-card-hover); }
.ap-kanban-card:active { cursor: grabbing; }
.ap-kanban-card--selected { box-shadow: 0 0 0 2px var(--ap-accent); background: var(--ap-card-selected); }
.ap-kanban-card-title { font-size: 0.88rem; font-weight: 500; color: var(--ap-text); line-height: 1.3; }
.ap-kanban-card-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.ap-kanban-card-pills:empty { display: none; }
.ap-kanban-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--ap-text-muted); }
.ap-kanban-card-due, .ap-kanban-card-proj { display: inline-flex; align-items: center; gap: 0.25rem; }
.ap-kanban-card-proj { color: var(--ap-proj-color, var(--ap-text-muted)); }
.ap-kanban-card-foot .ap-meta-icon { font-size: 15px; }
.ap-page--condensed .ap-kanban-card { padding: 0.45rem 0.55rem; }
.ap-page--condensed .ap-kanban-col-body { gap: 0.35rem; }
@media (max-width: 720px) {
.ap-kanban-col { flex-basis: 240px; }
}
/* ===================================================================
ATTACHMENTS PANEL (ap-attachment-*)
=================================================================== */
.ap-attachment-section { display: flex; flex-direction: column; gap: 0.5rem; }
.ap-attachment-label { font-size: 0.78rem; font-weight: 700; color: var(--ap-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
/* Drop zone */
.ap-attachment-dropzone { position: relative; border: 2px dashed var(--ap-border); border-radius: 0.5rem; padding: 0.75rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; gap: 0.65rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ap-border) 45%, transparent); }
.ap-attachment-dropzone:hover { border-color: var(--ap-accent); background: color-mix(in srgb, var(--ap-accent) 4%, transparent); }
.ap-attachment-dropzone--dragging {
border-color: #22c55e;
background: color-mix(in srgb, #22c55e 14%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 45%, transparent), inset 0 0 0 1px color-mix(in srgb, #22c55e 35%, transparent);
}
.ap-attachment-dropzone--dragging .ap-attachment-hint,
.ap-attachment-dropzone--dragging .ap-attachment-hint .rzi {
color: #16a34a;
}
/* The invisible InputFile covers the entire drop zone so OS file drops land on it */
.ap-attachment-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* Empty / upload prompt hint */
.ap-attachment-hint { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ap-text-muted); padding: 0.25rem 0; pointer-events: none; }
.ap-attachment-hint .material-icons { font-size: 1.1rem !important; }
/* Uploading indicator */
.ap-attachment-uploading { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ap-accent); padding: 0.15rem 0; pointer-events: none; }
/* Grid of attachment cards */
.ap-attachment-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; pointer-events: none; }
/* Individual attachment card */
.ap-attachment-card {
position: relative;
min-width: 220px;
max-width: 280px;
display: flex;
align-items: center;
gap: 0.55rem;
pointer-events: all;
}
.ap-attachment-preview-wrap {
position: relative;
flex-shrink: 0;
}
/* Preview area — image thumbnail or icon box */
.ap-attachment-preview { width: 88px; height: 72px; border-radius: 0.4rem; border: 1px solid var(--ap-border); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ap-bg); flex-shrink: 0; }
.ap-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.ap-attachment-preview .rzi { font-size: 2rem !important; color: var(--ap-text-muted); }
.ap-attachment-preview-loading {
position: absolute;
inset: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
background: color-mix(in srgb, var(--ap-bg) 88%, transparent);
color: var(--ap-text-muted);
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ap-attachment-preview-loading .rzi {
font-size: 1rem !important;
animation: ap-attachment-spin 1s linear infinite;
}
@keyframes ap-attachment-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ap-attachment-hover-preview {
position: absolute;
left: calc(100% + 0.5rem);
top: -0.25rem;
width: 240px;
height: 180px;
border-radius: 0.55rem;
border: 1px solid var(--ap-border);
background: var(--ap-bg);
box-shadow: 0 10px 24px color-mix(in srgb, #000 25%, transparent);
padding: 0.25rem;
opacity: 0;
pointer-events: none;
transform: translateY(4px) scale(0.98);
transition: opacity 0.14s ease, transform 0.14s ease;
z-index: 25;
}
.ap-attachment-hover-preview img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.35rem;
background: var(--ap-bg);
}
.ap-attachment-preview-wrap:hover .ap-attachment-hover-preview {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Coloured icon tints per file type (sets color inherited by child .rzi) */
.ap-attachment-icon--pdf .rzi { color: #e53e3e !important; }
.ap-attachment-icon--doc .rzi { color: #3182ce !important; }
.ap-attachment-icon--sheet .rzi { color: #38a169 !important; }
.ap-attachment-icon--slides .rzi { color: #dd6b20 !important; }
.ap-attachment-icon--zip .rzi { color: #805ad5 !important; }
.ap-attachment-icon--video .rzi { color: #d53f8c !important; }
.ap-attachment-icon--audio .rzi { color: #2b6cb0 !important; }
/* Filename + size */
.ap-attachment-meta {
min-width: 0;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
}
.ap-attachment-name { font-size: 0.82rem; font-weight: 600; color: var(--ap-text); text-align: left; line-height: 1.2; word-break: break-all; max-width: 170px; }
.ap-attachment-size { font-size: 0.62rem; color: var(--ap-text-muted); }
/* Remove button — appears on hover */
.ap-attachment-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ap-high-color, #e53e3e); border: 2px solid var(--ap-bg); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 0; }
.ap-attachment-remove .rzi { font-size: 0.75rem !important; }
.ap-attachment-card:hover .ap-attachment-remove { opacity: 1; }
.ap-attachment-hint .rzi { font-size: 1.1rem !important; }
.ap-attachment-uploading .rzi { font-size: 1.1rem !important; }
/* Explicit "Paste image" button under the drop zone */
.ap-attachment-paste-btn { align-self: flex-start; margin-top: 0.4rem; }
/* Clickable open links on the preview thumbnail and filename */
.ap-attachment-preview-link { display: block; cursor: pointer; text-decoration: none; }
.ap-attachment-name--link { text-decoration: none; cursor: pointer; }
.ap-attachment-name--link:hover { text-decoration: underline; color: var(--ap-accent); }
/* Calendar appointment attachments reuse the ap-attachment-* card + hover system */
.cal-attachment-section { gap: 0.85rem; }
/* ===================================================================
CALENDAR PAGE (cal-*)
=================================================================== */
.cal-page { max-width: 1240px; }
.cal-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.cal-header-actions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.cal-google-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 200px;
padding: 0.3rem 0.7rem;
border-radius: 2rem;
border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
background: color-mix(in srgb, #22c55e 12%, transparent);
color: var(--ap-text, var(--rz-text-color));
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-google-status .rzi { font-size: 1rem; color: #22c55e; }
.cal-view-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: 1px solid var(--ap-border);
border-radius: 0.6rem;
background: var(--ap-card-bg);
padding: 0.2rem;
}
.cal-view-btn {
border: none;
border-radius: 0.45rem;
background: transparent;
color: var(--ap-text-muted);
font-size: 0.8rem;
font-weight: 600;
padding: 0.45rem 0.9rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.cal-view-btn--active {
background: color-mix(in srgb, var(--ap-accent) 14%, var(--ap-card-bg));
color: var(--ap-accent);
}
.cal-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 1rem;
align-items: start;
}
.cal-left { display: flex; flex-direction: column; gap: 1rem; }
.cal-right { display: flex; flex-direction: column; gap: 1rem; }
.cal-board {
background: var(--ap-card-bg);
border: 1px solid var(--ap-border);
border-radius: 0.85rem;
padding: 1rem;
}
.cal-fullcalendar {
min-height: 640px;
}
.cal-fullcalendar .fc {
color: var(--ap-text);
}
.cal-fullcalendar .fc .fc-toolbar-title {
color: var(--ap-text);
font-weight: 800;
}
.cal-fullcalendar .fc .fc-button {
background: var(--ap-card-bg);
border-color: var(--ap-border);
color: var(--ap-text);
}
.cal-fullcalendar .fc .fc-button-primary:not(:disabled):active,
.cal-fullcalendar .fc .fc-button-primary:not(:disabled).fc-button-active {
background: color-mix(in srgb, var(--ap-accent) 18%, var(--ap-card-bg));
border-color: color-mix(in srgb, var(--ap-accent) 45%, var(--ap-border));
color: var(--ap-accent);
}
.cal-fullcalendar .fc .fc-timegrid-slot {
border-bottom: 1px dashed color-mix(in srgb, var(--ap-border) 75%, transparent);
}
.cal-fullcalendar .fc .fc-day-today {
background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-card-bg));
}
/* Completed task-linked calendar entries */
.taskcal-done { opacity: 0.55; }
.taskcal-done .fc-event-title,
.taskcal-done .fc-list-item-title { text-decoration: line-through; }
.cal-board-view-toggle-wrap {
display: flex;
justify-content: flex-end;
margin-bottom: 0.65rem;
}
/* Radzen scheduler readability overrides */
.cal-scheduler.rz-scheduler {
background: var(--ap-card-bg);
color: var(--ap-text);
border: 1px solid var(--ap-border);
border-radius: 0.7rem;
}
.cal-scheduler .rz-scheduler-header {
background: var(--ap-card-bg);
border-bottom: 1px solid var(--ap-border);
}
/* Hide scheduler's internal view toggle: keep one selector only */
.cal-scheduler .rz-scheduler-view {
display: none !important;
}
.cal-scheduler .rz-scheduler-nav .rz-button,
.cal-scheduler .rz-scheduler-view .rz-button,
.cal-scheduler .rz-scheduler-header .rz-button {
color: var(--ap-text) !important;
border-color: var(--ap-border) !important;
background: var(--ap-card-bg) !important;
font-weight: 700;
}
.cal-scheduler .rz-scheduler-view .rz-button.rz-state-active,
.cal-scheduler .rz-scheduler-view .rz-button:focus,
.cal-scheduler .rz-scheduler-view .rz-button:hover {
color: var(--ap-accent) !important;
background: color-mix(in srgb, var(--ap-accent) 14%, var(--ap-card-bg)) !important;
border-color: color-mix(in srgb, var(--ap-accent) 45%, var(--ap-border)) !important;
}
.cal-scheduler .rz-scheduler-view .rz-button[aria-pressed="true"] {
color: #ffffff !important;
background: var(--ap-accent) !important;
border-color: var(--ap-accent) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
}
.cal-scheduler .rz-scheduler-view .rz-button[aria-pressed="true"] .rzi,
.cal-scheduler .rz-scheduler-view .rz-button.rz-state-active .rzi {
color: #ffffff !important;
}
.cal-scheduler .rz-scheduler-view .rz-button:not([aria-pressed="true"]) {
opacity: 0.9;
}
.cal-scheduler .rz-scheduler-header .rz-scheduler-header-title {
color: var(--ap-text) !important;
font-weight: 800;
}
/* Dashed time grid lines for week/day views */
.cal-scheduler .rz-weekview-table td,
.cal-scheduler .rz-dayview-table td,
.cal-scheduler .rz-weekview-timescale td,
.cal-scheduler .rz-dayview-timescale td {
border-bottom: 1px dashed color-mix(in srgb, var(--ap-border) 75%, transparent) !important;
}
/* Current day slot highlight */
.cal-scheduler .cal-slot-today {
background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-card-bg)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ap-accent) 40%, var(--ap-border));
}
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
margin-bottom: 0.5rem;
}
.cal-weekday {
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
color: var(--ap-text-muted);
text-align: center;
padding: 0.3rem 0.1rem;
}
.cal-days-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
border: 1px solid var(--ap-border);
border-right: none;
border-bottom: none;
}
.cal-day-cell {
min-height: 84px;
border-right: 1px solid var(--ap-border);
border-bottom: 1px solid var(--ap-border);
padding: 0.45rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
background: var(--ap-card-bg);
}
.cal-day-cell--muted .cal-day-number {
opacity: 0.45;
}
.cal-day-cell--selected {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ap-accent) 40%, transparent);
background: color-mix(in srgb, var(--ap-accent) 5%, var(--ap-card-bg));
}
.cal-day-number {
font-size: 0.8rem;
font-weight: 700;
color: var(--ap-text);
}
.cal-event {
width: fit-content;
max-width: 100%;
font-size: 0.62rem;
font-weight: 700;
padding: 0.18rem 0.45rem;
border-radius: 0.35rem;
color: var(--ap-accent);
background: color-mix(in srgb, var(--ap-accent) 14%, var(--ap-card-bg));
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.cal-event--primary {
color: var(--ap-active-text);
background: var(--ap-accent);
}
.cal-event--secondary {
color: var(--ap-text-muted);
background: var(--ap-bg);
}
.cal-bottom-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.cal-ai-card,
.cal-habit-card,
.cal-scheduler-card,
.cal-upcoming-card {
border-radius: 0.85rem;
border: 1px solid var(--ap-border);
background: var(--ap-card-bg);
padding: 1rem;
}
.cal-ai-card {
background: linear-gradient(135deg, var(--ap-accent) 0%, color-mix(in srgb, var(--ap-accent) 60%, #000) 100%);
border-color: transparent;
color: var(--ap-active-text);
}
.cal-card-eyebrow {
margin: 0 0 0.7rem;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: color-mix(in srgb, var(--ap-text-muted) 85%, transparent);
}
.cal-ai-card .cal-card-eyebrow,
.cal-ai-card .cal-card-title,
.cal-ai-card .cal-card-body {
color: var(--ap-active-text);
}
.cal-card-eyebrow--accent {
color: color-mix(in srgb, var(--ap-accent) 72%, var(--ap-text-muted));
}
.cal-card-title,
.cal-habit-title {
margin: 0 0 0.6rem;
font-size: 1.8rem;
font-weight: 700;
color: var(--ap-text);
}
.cal-habit-title { font-size: 1.55rem; }
.cal-habit-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.cal-habit-header .cal-habit-title { margin-bottom: 0; }
/* Habit manage dialog rows */
.ap-manage-row--habits {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.habit-icon-wrap,
.habit-edit-icon-preview {
width: 1.6rem;
text-align: center;
flex-shrink: 0;
color: var(--rz-text-secondary-color, #888);
}
.habit-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.habit-time { white-space: nowrap; font-size: 0.8rem; }
.habit-input--name { flex: 1; min-width: 120px; }
.habit-input--time { width: 90px; flex-shrink: 0; }
/* Icon display (read-only, coloured background circle) */
.habit-icon-display {
width: 2rem; height: 2rem;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* Icon button (edit mode — click to open grid) */
.habit-icon-btn {
width: 2rem; height: 2rem;
border-radius: 0.4rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border: 1px solid var(--rz-base-300, #444);
flex-shrink: 0;
font-size: 1.1rem;
transition: border-color 0.15s;
}
.habit-icon-btn:hover { border-color: var(--rz-primary, #6366f1); }
/* Colour swatch + popover */
.habit-color-wrap { position: relative; flex-shrink: 0; }
.habit-color-swatch {
width: 1.7rem; height: 1.7rem;
border-radius: 50%;
cursor: pointer;
border: 2px solid rgba(255,255,255,0.15);
transition: transform 0.15s;
}
.habit-color-swatch:hover { transform: scale(1.15); }
.habit-color-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 200;
background: var(--rz-base-background-color, #1e1e2e);
border: 1px solid var(--rz-base-300, #444);
border-radius: 0.5rem;
padding: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Icon grid picker */
.habit-icon-grid {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
padding: 0.5rem 0.25rem;
max-width: 420px;
}
.habit-icon-option {
width: 2.2rem; height: 2.2rem;
border-radius: 0.35rem;
border: 1px solid var(--rz-base-300, #444);
background: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--rz-text-secondary-color, #888);
font-size: 1.1rem;
transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.habit-icon-option:hover { border-color: var(--rz-primary, #6366f1); color: var(--rz-primary, #6366f1); }
.habit-icon-option--active { border-color: currentColor; font-size: 1.2rem; }
/* Add section divider */
.habit-add-section {
border-top: 1px solid var(--rz-base-300, #444);
padding-top: 0.75rem;
}
.cal-card-body {
margin: 0 0 1rem;
font-size: 0.85rem;
line-height: 1.55;
}
.cal-primary-action {
border: none;
border-radius: 0.55rem;
background: var(--ap-active-text);
color: var(--ap-accent);
font-size: 0.82rem;
font-weight: 700;
padding: 0.6rem 0.95rem;
cursor: pointer;
}
.cal-primary-action--full {
width: 100%;
background: var(--ap-accent);
color: var(--ap-active-text);
}
.cal-habit-list { display: flex; flex-direction: column; gap: 0.55rem; }
.cal-habit-item {
display: flex;
align-items: center;
gap: 0.65rem;
background: color-mix(in srgb, var(--ap-bg) 85%, var(--ap-card-bg));
border: 1px solid var(--ap-border);
border-radius: 0.55rem;
padding: 0.55rem 0.65rem;
}
.cal-habit-icon-wrap {
width: 30px;
height: 30px;
border-radius: 0.45rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ap-accent);
background: color-mix(in srgb, var(--ap-accent) 14%, var(--ap-card-bg));
}
.cal-habit-name {
margin: 0;
font-size: 0.84rem;
font-weight: 700;
color: var(--ap-text);
}
.cal-habit-meta {
margin: 0.1rem 0 0;
font-size: 0.7rem;
color: var(--ap-text-muted);
}
.cal-type-option {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.cal-type-dot {
width: 0.7rem;
height: 0.7rem;
flex: 0 0 0.7rem;
}
.cal-field-label {
margin: 0.4rem 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ap-text-muted);
}
.cal-input {
width: 100%;
border: 1px solid var(--ap-border);
border-radius: 0.45rem;
background: var(--ap-bg);
color: var(--ap-text);
font-size: 0.82rem;
padding: 0.45rem 0.65rem;
outline: none;
}
.cal-appointment-time-row { align-items: end; }
.cal-appointment-all-day-col { display: flex; align-items: end; }
.cal-appointment-all-day-wrap { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
.cal-suggestion-btn {
width: 100%;
text-align: left;
border: 1px solid var(--ap-border);
border-radius: 0.45rem;
background: var(--ap-card-bg);
color: var(--ap-text);
font-size: 0.78rem;
font-weight: 600;
padding: 0.55rem 0.6rem;
margin-bottom: 0.4rem;
cursor: pointer;
}
.cal-suggestion-btn--active {
border-color: color-mix(in srgb, var(--ap-accent) 35%, var(--ap-border));
background: color-mix(in srgb, var(--ap-accent) 8%, var(--ap-card-bg));
}
.cal-manual-time-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
margin-top: 0.2rem;
margin-bottom: 0.55rem;
}
.cal-upcoming-card { background: transparent; border: none; padding: 0.25rem 0.1rem; }
.cal-timeline {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.cal-timeline-item {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: 0.45rem;
align-items: start;
}
.cal-timeline-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 0.25rem;
background: var(--ap-accent);
}
.cal-time {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--ap-text-muted);
}
.cal-item-title {
margin: 0 0 0.15rem;
font-size: 0.93rem;
font-weight: 700;
color: var(--ap-text);
}
.cal-item-meta {
margin: 0;
font-size: 0.72rem;
color: var(--ap-text-muted);
}
/* ---- Calendar condensed density (driven by user preference) ---- */
.ap-shell--condensed .cal-header-row {
margin-bottom: 0.7rem;
}
.ap-shell--condensed .cal-grid,
.ap-shell--condensed .cal-left,
.ap-shell--condensed .cal-right {
gap: 0.7rem;
}
.ap-shell--condensed .cal-board {
border-radius: 0.7rem;
padding: 0.65rem;
}
.ap-shell--condensed .cal-fullcalendar {
min-height: 540px;
}
.ap-shell--condensed .cal-ai-card,
.ap-shell--condensed .cal-habit-card,
.ap-shell--condensed .cal-scheduler-card,
.ap-shell--condensed .cal-upcoming-card {
border-radius: 0.7rem;
padding: 0.72rem;
}
.ap-shell--condensed .cal-card-title,
.ap-shell--condensed .cal-habit-title {
font-size: 1.35rem;
margin-bottom: 0.4rem;
}
.ap-shell--condensed .cal-card-eyebrow {
margin-bottom: 0.45rem;
font-size: 0.6rem;
}
.ap-shell--condensed .cal-card-body {
margin-bottom: 0.65rem;
font-size: 0.77rem;
line-height: 1.42;
}
.ap-shell--condensed .cal-primary-action {
font-size: 0.76rem;
padding: 0.48rem 0.75rem;
}
.ap-shell--condensed .cal-habit-list {
gap: 0.4rem;
}
.ap-shell--condensed .cal-habit-item {
gap: 0.5rem;
padding: 0.4rem 0.5rem;
}
.ap-shell--condensed .cal-habit-icon-wrap {
width: 24px;
height: 24px;
}
.ap-shell--condensed .cal-habit-name {
font-size: 0.76rem;
}
.ap-shell--condensed .cal-habit-meta {
font-size: 0.64rem;
}
.ap-shell--condensed .cal-field-label {
margin: 0.3rem 0 0.2rem;
font-size: 0.62rem;
}
.ap-shell--condensed .cal-suggestion-btn {
font-size: 0.72rem;
padding: 0.42rem 0.5rem;
margin-bottom: 0.3rem;
}
.ap-shell--condensed .cal-timeline {
gap: 0.62rem;
}
.ap-shell--condensed .cal-time {
font-size: 0.62rem;
}
.ap-shell--condensed .cal-item-title {
font-size: 0.82rem;
}
.ap-shell--condensed .cal-item-meta {
font-size: 0.67rem;
}
@media (max-width: 1140px) {
.cal-grid { grid-template-columns: 1fr; }
.cal-right { order: -1; }
}
@media (max-width: 860px) {
.cal-bottom-cards { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.cal-header-row { flex-direction: column; align-items: flex-start; }
.cal-day-cell { min-height: 70px; padding: 0.35rem; }
.cal-manual-time-grid { grid-template-columns: 1fr; }
}
/* ============================================================
RECIPE KEEPER — rk-* styles
Light / dark adaptive via Radzen CSS variable tokens.
============================================================ */
/* Shell layout: inner left sidebar + main area */
.rk-shell {
display: flex;
height: 100%;
overflow: hidden;
background: var(--rz-base-background-color);
}
/* ── Loading ─────────────────────────────────── */
.rk-loading {
display: flex;
align-items: center;
justify-content: center;
height: 60vh;
}
/* ── Inner sidebar ───────────────────────────── */
.rk-sidebar {
width: 220px;
min-width: 220px;
background: var(--rz-sidebar-background-color, var(--rz-base-background-color));
border-right: 1px solid var(--rz-border-color);
display: flex;
flex-direction: column;
padding: 1.25rem 0 1rem;
overflow-y: auto;
flex-shrink: 0;
}
.rk-sidebar-brand {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1rem 1.25rem;
border-bottom: 1px solid var(--rz-border-color);
margin-bottom: 0.75rem;
}
.rk-sidebar-avatar {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--rz-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.rk-sidebar-brand-name {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: var(--rz-text-color);
}
.rk-sidebar-brand-sub {
display: block;
font-size: 0.63rem;
color: var(--rz-secondary-text-color);
letter-spacing: 0.04em;
}
/* Nav links */
.rk-nav { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.5rem; flex: 1; }
.rk-nav-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.85rem;
border-radius: 0.5rem;
font-size: 0.875rem;
color: var(--rz-secondary-text-color);
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.rk-nav-item:hover { background: color-mix(in srgb, var(--rz-primary) 8%, transparent); color: var(--rz-text-color); }
.rk-nav-item--active { background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-primary); font-weight: 600; }
.rk-nav-icon { font-size: 1.1rem; }
/* Add FAB at bottom of sidebar */
.rk-sidebar-footer { padding: 1rem 0.75rem 0; border-top: 1px solid var(--rz-border-color); margin-top: auto; }
.rk-add-fab {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.7rem 1rem;
border-radius: 2rem;
background: var(--rz-primary);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: opacity 0.15s;
}
.rk-add-fab:hover { opacity: 0.88; }
/* ── Main content ────────────────────────────── */
.rk-main {
flex: 1;
overflow-y: auto;
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ── Hero / action bar ───────────────────────── */
.rk-hero-bar {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.rk-welcome-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rz-primary);
background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
border-radius: 2rem;
padding: 0.2rem 0.65rem;
margin-bottom: 0.35rem;
}
.rk-hero-title {
font-size: 2rem;
font-weight: 800;
color: var(--rz-text-color);
margin: 0 0 0.2rem;
line-height: 1.15;
}
.rk-hero-sub {
font-size: 0.9rem;
color: var(--rz-secondary-text-color);
margin: 0;
}
.rk-hero-actions {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.rk-action-btn.rz-button { border-radius: 0.5rem; font-size: 0.85rem; }
/* ── Stats row (My Kitchen summary cards) ───────────────────────── */
.rk-stats-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.rk-stat-card {
flex: 1 1 160px;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: var(--rz-base-background-color, var(--ap-card-bg));
border: 1px solid var(--rz-border-color, var(--ap-border));
border-radius: 0.75rem;
}
.rk-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: 0.6rem;
background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
color: var(--rz-primary);
}
.rk-stat-icon .rzi { font-size: 1.25rem; }
.rk-stat-body {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.15;
}
.rk-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--rz-text-color); }
.rk-stat-label { font-size: 0.78rem; color: var(--rz-secondary-text-color); }
/* Clickable stat cards / insight tiles — drill down into the Recipe Vault */
.rk-stat-card--clickable,
.rk-insight-tile--clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.rk-stat-card--clickable:hover,
.rk-insight-tile--clickable:hover { border-color: var(--rz-primary); box-shadow: 0 2px 12px color-mix(in srgb, var(--rz-primary) 22%, transparent); transform: translateY(-1px); }
.rk-stat-card--clickable:focus-visible,
.rk-insight-tile--clickable:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
/* ── My Kitchen dashboard ───────────────────────── */
.rk-dash { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.rk-insight-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.rk-insight-tile { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color); border-radius: 0.75rem; }
.rk-insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; flex-shrink: 0; }
.rk-insight-icon .rzi { font-size: 1.3rem; }
.rk-insight-icon--fire { background: color-mix(in srgb, var(--rz-danger) 16%, transparent); color: var(--rz-danger); }
.rk-insight-icon--star { background: color-mix(in srgb, var(--rz-warning) 18%, transparent); color: var(--rz-warning); }
.rk-insight-icon--time { background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-primary); }
.rk-insight-icon--world { background: color-mix(in srgb, var(--rz-info) 16%, transparent); color: var(--rz-info); }
.rk-insight-icon--cooks { background: color-mix(in srgb, var(--rz-success) 16%, transparent); color: var(--rz-success); }
.rk-insight-icon--streak { background: color-mix(in srgb, var(--rz-primary) 16%, transparent); color: var(--rz-primary); }
.rk-insight-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rk-insight-value { font-size: 1.35rem; font-weight: 800; color: var(--rz-text-color); }
.rk-insight-label { font-size: 0.75rem; color: var(--rz-secondary-text-color); }
.rk-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
/* Donut chart height token — referenced via Style="height:var(--rk-donut-h)" so Radzen's
JS layout reads the responsive value directly from the computed style. */
:root { --rk-donut-h: 360px; }
@media (max-width: 480px) { :root { --rk-donut-h: 460px; } }
@media (min-width: 481px) and (max-width: 680px) { :root { --rk-donut-h: 400px; } }
.rk-dash-card { background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color); border-radius: 0.875rem; padding: 1rem 1.1rem; min-width: 0; }
.rk-dash-card-title { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 700; color: var(--rz-text-color); margin-bottom: 0.65rem; }
.rk-dash-card-title .rzi { font-size: 1.1rem; color: var(--rz-primary); }
.rk-dash-hint { margin-left: auto; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--rz-secondary-text-color); opacity: 0.75; }
.rk-dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; height: 200px; color: var(--rz-secondary-text-color); text-align: center; font-size: 0.85rem; padding: 0 1rem; }
.rk-dash-empty .rzi { font-size: 1.8rem; opacity: 0.5; }
.rk-top-list { display: flex; flex-direction: column; gap: 0.15rem; }
.rk-top-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.55rem 0.6rem; border: none; background: transparent; border-radius: 0.5rem; cursor: pointer; text-align: left; transition: background 0.12s; }
.rk-top-row:hover { background: color-mix(in srgb, var(--rz-primary) 8%, transparent); }
.rk-top-name { font-size: 0.88rem; font-weight: 600; color: var(--rz-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rk-top-val { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--rz-primary); white-space: nowrap; flex-shrink: 0; }
.rk-top-val .rzi { font-size: 0.95rem; color: var(--rz-warning); }
.rk-top-val--muted { color: var(--rz-secondary-text-color); font-weight: 600; }
/* ── Filter chips (replaces old stat cards) ─────────────────────── */
.rk-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.rk-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 2rem;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-secondary-text-color);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
--chip-hue: 260deg;
--chip-color: hsl(var(--chip-hue) 60% 65%);
--chip-bg: hsl(var(--chip-hue) 50% 22%);
--chip-glow: hsl(var(--chip-hue) 60% 50% / 0.25);
}
.rk-filter-chip .rzi { font-size: 1rem; }
/* Per-chip colour identities */
.rk-filter-chip--all { --chip-hue: 220deg; }
.rk-filter-chip--favourites { --chip-hue: 340deg; }
.rk-filter-chip--totry { --chip-hue: 170deg; }
.rk-filter-chip--cooked { --chip-hue: 30deg; }
/* Idle: tinted icon + count badge using chip colour */
.rk-filter-chip:hover {
border-color: var(--chip-color);
color: var(--chip-color);
box-shadow: 0 0 0 2px var(--chip-glow);
}
/* Active: filled with the chip's own colour */
.rk-filter-chip--active {
border-color: var(--chip-color);
background: var(--chip-bg);
color: var(--chip-color);
box-shadow: 0 0 0 2px var(--chip-glow);
}
.rk-filter-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.3rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--chip-color) 20%, transparent);
color: var(--chip-color);
font-size: 0.7rem;
font-weight: 800;
line-height: 1;
}
.rk-filter-chip--active .rk-filter-chip-count {
background: color-mix(in srgb, var(--chip-color) 30%, transparent);
}
/* ── User category chips ─────────────────────── */
.rk-category-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.rk-category-chips--empty {
margin-bottom: 0.25rem;
}
.rk-cat-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.65rem;
border-radius: 2rem;
/* Unselected chips read as neutral so only the selected ones stand out. */
border: 1.5px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-text-color);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.rk-cat-chip .rzi { font-size: 0.95rem; }
.rk-cat-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background: color-mix(in srgb, var(--cat-color, #6366f1) 22%, transparent);
color: var(--cat-color, #6366f1);
flex: 0 0 auto;
}
.rk-cat-chip-icon .rz-icon,
.rk-cat-chip-icon .rzi {
font-size: 0.78rem;
}
.rk-cat-chip:hover {
border-color: var(--cat-color, var(--rz-primary));
background: color-mix(in srgb, var(--cat-color, #6366f1) 10%, var(--rz-base-background-color));
}
/* Selected chips all use one readable colour (theme success/green) regardless of category colour. */
.rk-cat-chip--active {
background: color-mix(in srgb, var(--rz-success) 18%, var(--rz-base-background-color));
border-color: var(--rz-success);
color: var(--rz-text-color);
font-weight: 800;
box-shadow: inset 0 0 0 1px var(--rz-success);
}
.rk-cat-chip-check { font-size: 0.95rem !important; margin: 0 -0.05rem; color: var(--rz-success); }
.rk-cat-chip--active .rk-cat-chip-count {
background: color-mix(in srgb, var(--rz-success) 22%, transparent);
color: var(--rz-success);
}
.rk-cat-chip--active .rk-cat-chip-icon {
background: color-mix(in srgb, var(--rz-success) 22%, transparent);
color: var(--rz-success);
}
/* "Selected" row that floats the chosen categories above the rest */
.rk-category-selected-row {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
padding: 0.5rem 0.65rem;
margin-bottom: 0.6rem;
background: color-mix(in srgb, var(--rz-success) 7%, var(--rz-base-background-color));
border: 1px solid color-mix(in srgb, var(--rz-success) 28%, transparent);
border-radius: 0.75rem;
}
.rk-category-selected-label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--rz-success);
flex-shrink: 0;
}
.rk-category-selected-label .rzi { font-size: 1rem; }
.rk-category-chips--selected { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.rk-cat-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.25rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--rz-text-color) 12%, transparent);
color: var(--rz-text-secondary-color, var(--rz-secondary-text-color));
font-size: 0.65rem;
font-weight: 800;
line-height: 1;
}
.rk-category-mode-toggle {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.15rem;
border: 1px solid var(--rz-border-color);
border-radius: 2rem;
background: var(--rz-base-background-color);
}
.rk-category-mode-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.5rem;
border: 0;
border-radius: 2rem;
background: transparent;
color: var(--rz-secondary-text-color);
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.rk-category-mode-btn .rz-icon,
.rk-category-mode-btn .rzi {
font-size: 0.82rem;
}
.rk-category-mode-btn--active {
background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
color: var(--rz-primary);
}
.rk-category-mode-btn:hover {
color: var(--rz-primary);
}
.rk-cat-manage-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.5rem;
border-radius: 2rem;
border: 1px dashed var(--rz-border-color);
background: transparent;
color: var(--rz-secondary-text-color);
font-size: 0.75rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.rk-cat-manage-btn:hover {
border-color: var(--rz-primary);
color: var(--rz-primary);
}
.rk-cat-manage-btn--label { gap: 0.4rem; font-weight: 600; }
/* ── Category manage dialog ──────────────────── */
.rk-manage-section-title {
margin: 0 0 0.5rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--rz-text-color);
}
/* Grocery item dialog — field heading row with a "Manage" link */
.gi-field-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.gi-manage-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.75rem;
color: var(--rz-primary);
}
.gi-manage-link:hover { text-decoration: underline; }
.gi-swatch {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 3px;
margin-right: 0.4rem;
vertical-align: middle;
}
.rk-manage-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: min(52vh, 420px);
overflow-y: auto;
overflow-x: hidden;
}
.rk-manage-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.rk-manage-row--editing {
grid-template-columns: minmax(160px, 1fr) minmax(190px, 220px) auto auto auto;
}
.rk-manage-input {
width: 100%;
min-width: 0;
}
.rk-manage-icon-input,
.rk-manage-icon-picker {
width: 220px;
min-width: 220px;
}
.rk-icon-option {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 180px;
font-size: 0.85rem;
font-weight: 600;
color: var(--rz-text-color);
}
.rk-icon-option .rz-icon {
font-size: 1.15rem;
flex: 0 0 auto;
}
.rk-icon-option--value {
min-width: 0;
}
.rk-manage-icon-picker .rz-dropdown-label {
min-width: 0;
}
.rk-cat-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: 2rem;
font-size: 0.8rem;
font-weight: 600;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Size the pill to its label instead of stretching to fill the name column,
so 'system' and the action controls line up in a tidy right-hand column. */
.rk-manage-row .rk-cat-pill {
justify-self: start;
}
.rk-manage-system-badge {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--rz-secondary-text-color);
padding: 0.1rem 0.4rem;
border: 1px solid var(--rz-border-color);
border-radius: 0.5rem;
}
.rk-manage-add-row {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(190px, 220px) auto auto;
align-items: center;
gap: 0.5rem;
border-top: 1px solid var(--rz-border-color);
padding-top: 0.75rem;
min-width: 0;
}
@media (max-width: 720px) {
.rk-manage-row,
.rk-manage-row--editing,
.rk-manage-add-row {
grid-template-columns: 1fr;
align-items: stretch;
}
.rk-manage-icon-picker,
.rk-manage-icon-input {
width: 100%;
min-width: 0;
}
.rk-manage-row .rz-button,
.rk-manage-add-row .rz-button {
justify-self: start;
}
}
/* ── Narrow the Radzen colour-picker popup ──────────────────────────────────
The popup renders at (outside .ap-shell), so target the popup class
directly. min() keeps it responsive — never wider than the viewport. */
.rz-colorpicker-popup {
min-width: 0;
width: min(15rem, calc(100vw - 2rem));
max-width: min(15rem, calc(100vw - 2rem));
}
/* Let the HEX / R / G / B / A fields wrap inside the narrower panel instead of
forcing it back to full width. */
.rz-colorpicker-popup .rz-colorpicker-rgba {
flex-wrap: wrap;
}
.rk-search-row {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
}
.rk-search-row .rk-search-bar {
flex: 1;
min-width: 0;
width: auto;
}
.rk-search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
border-radius: 2rem;
padding: 0.4rem 1rem;
width: 100%;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.rk-search-bar:focus-within {
border-color: var(--rz-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 20%, transparent);
}
.rk-search-icon { color: var(--rz-secondary-text-color); font-size: 1.1rem; flex-shrink: 0; }
/* Covers both the old RadzenTextBox (.rz-textbox) and the current plain */
.rk-search-input,
.rk-search-input.rz-textbox {
flex: 1;
min-width: 0;
border: none;
background: transparent;
outline: none;
box-shadow: none;
font-size: 0.9rem;
color: var(--rz-text-color);
caret-color: var(--rz-primary);
}
.rk-search-input::placeholder,
.rk-search-input.rz-textbox::placeholder {
color: var(--rz-secondary-text-color);
opacity: 0.6;
}
.rk-search-input:focus,
.rk-search-input.rz-textbox:focus { box-shadow: none; outline: none; }
/* ── Two-column content area ─────────────────── */
.rk-content-columns {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1.5rem;
align-items: flex-start;
}
/* ── Sort toolbar ────────────────────────────── */
.rk-sort-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
margin-bottom: 1rem;
border: 1px solid var(--rz-border-color);
border-radius: 0.85rem;
background: color-mix(in srgb, var(--rz-base-background-color) 70%, transparent);
}
.rk-sort-label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rz-secondary-text-color);
}
.rk-sort-label .rzi { font-size: 1.05rem; }
.rk-sort-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.rk-sort-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.7rem;
border-radius: 2rem;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-secondary-text-color);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.rk-sort-chip .rzi { font-size: 1rem; }
.rk-sort-chip:hover {
border-color: var(--rz-primary);
color: var(--rz-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}
.rk-sort-chip--active {
border-color: var(--rz-primary);
background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
color: var(--rz-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}
.rk-sort-chip-dir { font-size: 0.95rem !important; }
.rk-sort-dir-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-left: auto;
padding: 0.35rem 0.75rem;
border-radius: 2rem;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-text-color);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rk-sort-dir-btn .rzi { font-size: 1rem; }
.rk-sort-dir-btn:hover {
border-color: var(--rz-primary);
color: var(--rz-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}
/* ── Feed / section headers ──────────────────── */
.rk-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.85rem;
}
.rk-section-header--mt { margin-top: 2rem; }
.rk-section-title {
font-size: 1rem;
font-weight: 700;
color: var(--rz-text-color);
}
.rk-view-all {
display: flex;
align-items: center;
gap: 0.2rem;
font-size: 0.82rem;
font-weight: 500;
color: var(--rz-primary);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
/* ── Recipe card row (2-up) ──────────────────── */
.rk-card-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
margin-bottom: 0.5rem;
}
/* ── Recipe card ─────────────────────────────── */
.rk-recipe-card {
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s, background 0.15s;
}
.rk-recipe-card:hover {
border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--rz-border-color));
background: color-mix(in srgb, var(--rz-primary) 7%, var(--rz-base-background-color));
box-shadow: 0 4px 20px color-mix(in srgb, var(--rz-primary) 18%, transparent);
transform: translateY(-2px);
}
/* The recipe the user last opened — a persistent highlighted ring around the card (image + title). */
.rk-recipe-card--selected,
.rk-recipe-card--selected:hover {
border-color: var(--rz-primary);
box-shadow: 0 0 0 2px var(--rz-primary), 0 6px 22px color-mix(in srgb, var(--rz-primary) 24%, transparent);
}
.rk-card-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.rk-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-card-img-placeholder {
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--rz-primary);
opacity: 0.5;
}
/* Cuisine/time badges overlaid bottom-left of image */
.rk-card-badges {
position: absolute;
bottom: 0.55rem;
left: 0.55rem;
display: flex;
gap: 0.35rem;
}
.rk-badge {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.18rem 0.5rem;
border-radius: 0.3rem;
}
.rk-badge-cuisine { background: var(--rz-primary); color: #fff; }
.rk-badge-time { background: rgba(0,0,0,0.55); color: #fff; }
/* Favourite heart — top-right of image */
.rk-fav-pill {
position: absolute;
top: 0.55rem;
right: 0.55rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
color: #bbb;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: color 0.15s, background 0.15s;
}
.rk-fav-pill:hover { color: #ef4444; }
.rk-fav-pill--active { color: #ef4444; }
/* Delete pill — sits just left of the favourite pill on each card */
.rk-del-pill {
position: absolute;
top: 0.55rem;
right: 3rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
color: #bbb;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: color 0.15s, background 0.15s;
}
.rk-del-pill:hover { color: var(--rz-danger, #ef4444); }
.rk-del-inline:hover { color: var(--rz-danger, #ef4444); }
/* Card body */
.rk-card-body { padding: 0.8rem 0.9rem 0.7rem; }
.rk-card-title { font-size: 0.95rem; font-weight: 700; color: var(--rz-text-color); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-card-desc { font-size: 0.78rem; color: var(--rz-secondary-text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; }
.rk-card-foot { display: flex; align-items: center; justify-content: space-between; }
.rk-difficulty-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--rz-secondary-text-color);
}
.rk-difficulty-dot--easy { background: #22c55e; }
.rk-difficulty-dot--medium { background: #f59e0b; }
.rk-difficulty-dot--hard { background: #ef4444; }
.rk-card-rating { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; font-weight: 700; color: #f59e0b; }
/* ── Empty state ─────────────────────────────── */
.rk-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem;
color: var(--rz-secondary-text-color);
font-size: 0.9rem;
text-align: center;
}
.rk-empty-state .rzi { font-size: 2.5rem; opacity: 0.3; }
/* Infinite scroll sentinel */
.rk-scroll-sentinel {
display: flex;
justify-content: center;
padding: 1.5rem 0 0.5rem;
grid-column: 1 / -1;
}
/* ── Right panel ─────────────────────────────── */
.rk-right-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.rk-panel-section {
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
border-radius: 0.875rem;
padding: 1rem 1.1rem;
}
.rk-panel-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--rz-text-color);
margin-bottom: 0.75rem;
}
/* Folder list */
.rk-folder-list { display: flex; flex-direction: column; gap: 0.4rem; }
.rk-folder-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.7rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.12s;
}
.rk-folder-item:hover { background: color-mix(in srgb, var(--rz-primary) 8%, transparent); }
.rk-folder-icon {
width: 34px;
height: 34px;
border-radius: 0.45rem;
background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
color: var(--rz-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.rk-folder-body { flex: 1; min-width: 0; }
.rk-folder-name { display: block; font-size: 0.84rem; font-weight: 600; color: var(--rz-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-folder-count { display: block; font-size: 0.72rem; color: var(--rz-secondary-text-color); }
.rk-folder-arrow { font-size: 0.9rem; color: var(--rz-secondary-text-color); }
/* Recent searches */
.rk-recent-searches { display: flex; flex-direction: column; gap: 0.35rem; }
.rk-search-chip {
display: flex;
align-items: center;
gap: 0.45rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.82rem;
color: var(--rz-secondary-text-color);
padding: 0.3rem 0.25rem;
text-align: left;
transition: color 0.12s;
}
.rk-search-chip:hover { color: var(--rz-primary); }
.rk-search-chip .rzi { font-size: 0.9rem; opacity: 0.6; }
/* ── Dark mode adjustments ───────────────────── */
.ap-shell--dark .rk-fav-pill { background: rgba(30,30,40,0.88); }
.ap-shell--dark .rk-del-pill { background: rgba(30,30,40,0.88); }
.ap-shell--dark .rk-badge-time { background: rgba(0,0,0,0.7); }
/* ── Section header actions (toggle + clear filter) ── */
.rk-section-header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Full-width content when grid view active (no right panel) */
.rk-content-columns--full {
grid-template-columns: 1fr !important;
}
/* ── View mode toggle ────────────────────────── */
.rk-view-toggle {
display: inline-flex;
align-items: center;
gap: 0;
background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
border: 1px solid var(--rz-border-color);
border-radius: 0.5rem;
overflow: hidden;
}
.rk-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 30px;
background: none;
border: none;
color: var(--rz-secondary-text-color);
font-size: 1rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.rk-view-btn:hover { background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-text-color); }
.rk-view-btn--active { background: var(--rz-primary); color: #fff; }
/* ── Grid summary bar ────────────────────────── */
.rk-grid-summary {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 0.6rem 1rem;
margin-bottom: 0.75rem;
background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
border: 1px solid var(--rz-border-color);
border-radius: 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-secondary-text-color);
flex-wrap: wrap;
}
.rk-grid-summary-count {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--rz-text-color);
font-weight: 700;
font-size: 0.9rem;
}
.rk-grid-summary-stat {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--rz-secondary-text-color);
}
.rk-grid-summary-fav { color: #ef4444; }
.rk-grid-summary-star { color: #f59e0b; }
.rk-grid-summary-btn { background: transparent; border: none; border-radius: 0.4rem; cursor: pointer; font: inherit; color: inherit; padding: 0.15rem 0.45rem; transition: background 0.15s, color 0.15s; }
.rk-grid-summary-btn:hover { background: color-mix(in srgb, var(--rz-primary) 12%, transparent); color: var(--rz-primary); }
.rk-grid-summary-btn--active { background: color-mix(in srgb, var(--rz-primary) 18%, transparent); color: var(--rz-primary); }
/* ── Recipe data grid ────────────────────────── */
.rk-data-grid.rz-datalist,
.rk-data-grid .rz-datalist,
.rk-data-grid.rz-grid-table-wrapper,
.rk-data-grid {
border: 1px solid var(--rz-border-color);
border-radius: 0.875rem;
overflow: visible;
font-size: 0.85rem;
}
/* Header row — no hard border lines, use subtle background */
.rk-data-grid .rz-datatable-thead .rz-column-title,
.rk-data-grid .rz-column-header-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rz-secondary-text-color);
}
.rk-data-grid .rz-datatable-thead th,
.rk-data-grid thead th {
background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-base-background-color));
border-bottom: 2px solid color-mix(in srgb, var(--rz-primary) 18%, transparent);
border-right: none;
padding: 0.6rem 0.85rem;
}
/* Body rows */
.rk-data-grid .rz-datatable-data tr,
.rk-data-grid tbody tr {
border-bottom: 1px solid var(--rz-border-color);
transition: background 0.12s;
cursor: pointer;
}
.rk-data-grid .rz-datatable-data tr:last-child,
.rk-data-grid tbody tr:last-child { border-bottom: none; }
.rk-data-grid .rz-datatable-data tr:hover,
.rk-data-grid tbody tr:hover {
background: color-mix(in srgb, var(--rz-primary) 7%, transparent) !important;
}
/* The recipe the user last opened — highlighted row so it's obvious where they left off (matches the
card view's selected ring). Stronger tint + a thick primary bar down the leading edge of the row. */
.rk-data-grid .rz-datatable-data tr.rk-grid-row--selected,
.rk-data-grid tbody tr.rk-grid-row--selected {
background: color-mix(in srgb, var(--rz-primary) 20%, transparent) !important;
box-shadow: inset 4px 0 0 0 var(--rz-primary);
}
.rk-data-grid .rz-datatable-data tr.rk-grid-row--selected:hover,
.rk-data-grid tbody tr.rk-grid-row--selected:hover {
background: color-mix(in srgb, var(--rz-primary) 24%, transparent) !important;
}
.rk-data-grid .rz-datatable-data td,
.rk-data-grid tbody td {
border-right: none;
padding: 0.55rem 0.85rem;
vertical-align: middle;
}
.rk-data-grid .rz-grid-table-wrapper,
.rk-data-grid .rz-datatable-scrollable-wrapper,
.rk-data-grid .rz-data-grid-data {
overflow: visible !important;
}
.rk-data-grid .rz-frozen-cell,
.rk-data-grid .rz-cell-data {
overflow: visible !important;
}
.rk-data-grid .rz-datatable-data tr:has(.rk-grid-thumb-wrap:hover),
.rk-data-grid tbody tr:has(.rk-grid-thumb-wrap:hover) {
position: relative;
z-index: 10000;
}
.rk-data-grid .rz-datatable-data td:has(.rk-grid-thumb-wrap:hover),
.rk-data-grid tbody td:has(.rk-grid-thumb-wrap:hover) {
position: relative;
z-index: 10001 !important;
}
/* Pager */
.rk-data-grid .rz-paginator {
border-top: 1px solid var(--rz-border-color);
background: color-mix(in srgb, var(--rz-primary) 4%, var(--rz-base-background-color));
border-radius: 0 0 0.875rem 0.875rem;
font-size: 0.8rem;
padding: 0.35rem 0.75rem;
}
/* ── Grid cell components ────────────────────── */
.rk-grid-thumb-wrap {
width: 44px;
height: 44px;
border-radius: 0.45rem;
overflow: visible;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.rk-grid-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0.45rem;
}
.rk-grid-thumb-preview {
position: absolute;
left: calc(100% + 0.75rem);
top: 50%;
width: min(280px, 38vw);
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--rz-primary) 24%, var(--rz-border-color));
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(0.94);
transform-origin: left center;
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 10000;
}
.rk-grid-thumb-wrap:hover,
.rk-grid-thumb-wrap:focus-within {
z-index: 10000;
}
.rk-grid-thumb-wrap:hover .rk-grid-thumb-preview,
.rk-grid-thumb-wrap:focus-within .rk-grid-thumb-preview {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.rk-grid-thumb-placeholder {
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--rz-primary);
font-size: 1.2rem;
opacity: 0.6;
}
.rk-grid-title-cell {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.rk-grid-title {
font-weight: 700;
color: var(--rz-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.88rem;
}
.rk-grid-desc {
font-size: 0.75rem;
color: var(--rz-secondary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 360px;
}
.rk-grid-cuisine-badge {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.55rem;
border-radius: 0.35rem;
background: var(--rz-primary);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rk-grid-tag {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.55rem;
border-radius: 0.35rem;
background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
color: var(--rz-primary);
font-size: 0.72rem;
font-weight: 600;
}
.rk-grid-difficulty {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--rz-secondary-text-color);
}
.rk-grid-difficulty-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rz-secondary-text-color);
flex-shrink: 0;
}
.rk-grid-difficulty--easy { color: #22c55e; } .rk-grid-difficulty--easy .rk-grid-difficulty-dot { background: #22c55e; }
.rk-grid-difficulty--medium { color: #f59e0b; } .rk-grid-difficulty--medium .rk-grid-difficulty-dot { background: #f59e0b; }
.rk-grid-difficulty--hard { color: #ef4444; } .rk-grid-difficulty--hard .rk-grid-difficulty-dot { background: #ef4444; }
.rk-grid-meta {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
color: var(--rz-secondary-text-color);
font-weight: 500;
}
.rk-grid-rating {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.82rem;
font-weight: 700;
color: #f59e0b;
}
.rk-fav-pill--inline {
position: static;
width: 28px;
height: 28px;
background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
color: var(--rz-secondary-text-color);
border: 1px solid var(--rz-border-color);
}
.rk-fav-pill--inline.rk-fav-pill--active { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); border-color: #ef4444; }
/* ── Reusable grid column filter panels ───────── */
.rk-grid-filter-header {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 28px;
}
.rk-grid-filter-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: 0.35rem;
background: transparent;
color: var(--rz-secondary-text-color);
cursor: pointer;
}
.rk-grid-filter-trigger:hover,
.rk-grid-filter-trigger--active {
background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
color: var(--rz-primary);
}
.rk-column-filter-dropdown {
position: absolute;
z-index: 30;
top: calc(100% + 0.45rem);
left: 0;
min-width: 210px;
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
border-radius: 0.65rem;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.rk-column-filter-panel {
min-width: 180px;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
color: var(--rz-text-color);
}
.rk-column-filter-panel--search {
min-width: 280px;
}
.rk-column-filter-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rz-secondary-text-color);
}
.rk-column-filter-option {
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 30px;
font-size: 0.86rem;
font-weight: 600;
color: var(--rz-text-color);
cursor: pointer;
}
.rk-column-filter-actions {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.45rem;
border-top: 1px solid var(--rz-border-color);
}
.rk-column-search-box {
display: flex;
align-items: center;
gap: 0.45rem;
border: 1px solid var(--rz-border-color);
border-radius: 0.5rem;
background: var(--rz-base-background-color);
padding: 0.35rem 0.55rem;
}
.rk-column-search-box .rz-icon {
color: var(--rz-secondary-text-color);
font-size: 1rem;
}
.rk-column-search-input {
width: 100%;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: var(--rz-text-color);
font-size: 0.86rem;
font-weight: 600;
}
.rk-column-search-input::placeholder {
color: var(--rz-secondary-text-color);
}
/* ── Responsive: tablet (≤1100px) ───────────── */
@media (max-width: 1100px) {
.rk-content-columns { grid-template-columns: 1fr; }
.rk-right-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}
/* ── Responsive: phone (≤680px) ─────────────── */
@media (max-width: 680px) {
/* On mobile the shell stacks vertically and scrolls naturally —
restore ap-main scrolling so the whole page can scroll as one */
.ap-main:has(.rk-shell) { overflow-y: auto; padding: 0; }
.rk-shell { flex-direction: column; height: auto; overflow: visible; }
.rk-main { overflow-y: visible; padding: 1rem; }
.rk-sidebar {
width: 100%;
min-width: unset;
flex-direction: row;
overflow-x: auto;
border-right: none;
border-bottom: 1px solid var(--rz-border-color);
padding: 0.5rem;
}
.rk-sidebar-brand { display: none; }
.rk-nav { flex-direction: row; gap: 0.25rem; padding: 0; flex: none; }
.rk-nav-item span { display: none; }
.rk-nav-item { padding: 0.5rem 0.7rem; }
.rk-sidebar-footer { display: none; }
.rk-hero-title { font-size: 1.4rem; }
.rk-filter-chips { gap: 0.35rem; }
.rk-card-row { grid-template-columns: 1fr; }
.rk-hero-actions { gap: 0.4rem; }
.rk-right-panel { grid-template-columns: 1fr; }
}
/* ============================================================
RECIPE DETAIL — rd-* styles
============================================================ */
.rd-not-found {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 4rem;
color: var(--rz-secondary-text-color);
font-size: 1rem;
}
/* ── Main content wrapper ────────────────────── */
.rd-main {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* ── Breadcrumb / back row ───────────────────── */
.rd-breadcrumb {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 1.75rem 0;
}
.rd-back-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.85rem;
color: var(--rz-secondary-text-color);
padding: 0.3rem 0;
transition: color 0.12s;
}
.rd-back-btn:hover { color: var(--rz-primary); }
.rd-page-label {
font-size: 0.95rem;
font-weight: 700;
color: var(--rz-text-color);
}
/* ── Hero image ──────────────────────────────── */
.rd-hero {
position: relative;
margin: 1rem 1.75rem 0;
border-radius: 1rem;
overflow: hidden;
min-height: 280px;
max-height: 340px;
background: #111;
}
.rd-hero--drag { outline: 3px dashed var(--rz-primary); outline-offset: -6px; }
.rd-hero:focus { outline: none; }
.rd-hero:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.rd-hero-drop-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: color-mix(in srgb, var(--rz-primary) 78%, rgba(0,0,0,0.55));
color: #fff;
z-index: 6;
pointer-events: none;
animation: rdHeroDropFade 120ms ease-out;
}
.rd-hero-drop-overlay .rzi { font-size: 3rem; }
.rd-hero-drop-overlay-title { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.rd-hero-drop-overlay-sub { font-size: 0.85rem; opacity: 0.85; }
@keyframes rdHeroDropFade { from { opacity: 0; } to { opacity: 1; } }
.rd-hero-file-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.rd-hero-drop-hint {
position: absolute;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: rgba(17, 17, 17, 0.65);
color: #fff;
font-size: 0.8rem;
font-weight: 500;
pointer-events: none;
z-index: 2;
backdrop-filter: blur(6px);
}
.rd-hero--drag .rd-hero-drop-hint {
background: var(--rz-primary);
color: var(--rz-on-primary, #fff);
}
.rd-hero-paste-btn {
position: absolute;
top: 1rem;
left: 1rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(17, 17, 17, 0.65);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
z-index: 5;
backdrop-filter: blur(6px);
transition: background 120ms ease, transform 120ms ease;
}
.rd-hero-paste-btn:hover { background: var(--rz-primary); }
.rd-hero-paste-btn:active { transform: scale(0.97); }
.rd-hero-paste-btn .rzi { font-size: 1rem; }
.rd-hero-img {
width: 100%;
height: 100%;
max-height: 340px;
object-fit: contain;
object-position: center;
display: block;
background: #111;
}
/* Floating enlarged preview shown while hovering the hero. Fixed-positioned so it escapes the
hero's overflow:hidden clipping; non-interactive so it never blocks the replace/paste affordances. */
.rd-hero-zoom {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
z-index: 1200;
max-width: 80vw;
max-height: 85vh;
padding: 0.5rem;
background: var(--rz-base-background-color, #1e1e28);
border: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.15));
border-radius: 12px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.rd-hero:hover .rd-hero-zoom {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
/* While the cursor is over one of the hero's interactive buttons (paste, or the favourite / share
icons), suppress the floating zoom so it never obscures the control the user is reaching for.
Higher specificity than the :hover rule above, so it wins.
NOTE: .rd-hero-file-input is stretched edge-to-edge (inset:0) for click-to-browse, so it must NOT
be a trigger here — keying off it would suppress the zoom on every hover. */
.rd-hero:has(.rd-hero-paste-btn:hover) .rd-hero-zoom,
.rd-hero:has(.rd-hero-icons:hover) .rd-hero-zoom {
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%) scale(0.96);
}
.rd-hero-zoom-img {
display: block;
max-width: 78vw;
max-height: 82vh;
object-fit: contain;
border-radius: 8px;
}
.rd-hero-placeholder {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(255,255,255,0.2);
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.rd-hero-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
z-index: 4;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
}
.rd-hero-tags {
display: flex;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.rd-tag {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.06em;
padding: 0.2rem 0.6rem;
border-radius: 0.25rem;
}
.rd-tag-cuisine { background: var(--rz-primary); color: #fff; }
.rd-tag-staff {
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.35);
backdrop-filter: blur(4px);
}
.rd-hero-title {
font-size: 1.8rem;
font-weight: 800;
color: #fff;
margin: 0 0 0.5rem;
line-height: 1.2;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.rd-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 1.1rem;
}
.rd-meta-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.82rem;
color: rgba(255,255,255,0.85);
}
.rd-meta-item strong { color: #fff; }
/* Hero top-right icon buttons */
.rd-hero-icons {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 5;
}
.rd-icon-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
transition: background 0.15s;
font-size: 1.05rem;
}
.rd-icon-btn:hover { background: rgba(255,255,255,0.28); }
.rd-icon-btn--active { color: #ef4444; }
/* ── Action buttons row ──────────────────────── */
.rd-actions {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
padding: 1.1rem 1.75rem;
}
.rd-actions-spacer { flex: 1; }
.rd-action-btn.rz-button { border-radius: 0.6rem; font-size: 0.875rem; }
/* Uploaded-video inline player */
.rd-video-section { padding: 0 1.75rem 1.1rem; }
.rd-video-wrap { width: 100%; max-width: 720px; border-radius: 0.75rem; overflow: hidden; background: #000; box-shadow: var(--rz-shadow-2, 0 2px 8px rgba(0,0,0,0.25)); }
.rd-video { display: block; width: 100%; max-height: 70vh; background: #000; }
/* ── Star rating row ─────────────────────────── */
.rd-rating-row {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.75rem 0.9rem;
flex-wrap: wrap;
}
.rd-rating-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #888);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* Display-only star icons */
.rd-stars { display: flex; align-items: center; gap: 0.05rem; }
.rd-star-icon { font-size: 1.25rem; color: var(--rz-text-secondary-color, #888); pointer-events: none; }
.rd-star-icon--filled { color: #f59e0b; }
/* Slider wrapper + ruler */
.rd-rating-slider-wrap {
display: flex;
flex-direction: column;
width: 180px;
flex-shrink: 0;
}
/* Slider — input height must fit the thumb so the hit area is full size */
.rd-rating-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 20px; /* contains the 18px thumb — never shrink below this */
background: transparent;
outline: none;
cursor: pointer;
padding: 0;
margin: 0 0 2px;
}
/* Track — WebKit (Chrome / Edge / Safari) */
.rd-rating-slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: var(--rz-base-300, #333);
border: 1.5px solid rgba(245,158,11,0.5);
box-shadow: 0 0 0 1px rgba(245,158,11,0.1);
}
/* Track — Firefox */
.rd-rating-slider::-moz-range-track {
height: 6px;
border-radius: 3px;
background: var(--rz-base-300, #333);
border: 1.5px solid rgba(245,158,11,0.5);
box-shadow: 0 0 0 1px rgba(245,158,11,0.1);
}
/* Filled portion — Firefox only (WebKit doesn't expose this) */
.rd-rating-slider::-moz-range-progress {
height: 6px;
border-radius: 3px 0 0 3px;
background: #f59e0b;
}
/* Thumb — WebKit */
.rd-rating-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid var(--rz-base-background-color, #1a1a1a);
box-shadow: 0 0 0 2px rgba(245,158,11,0.4);
cursor: grab;
margin-top: -7px; /* centres the 18px thumb on the 6px track: -(18-6)/2 + track_border */
transition: transform 0.12s, box-shadow 0.12s;
}
.rd-rating-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.2);
box-shadow: 0 0 0 5px rgba(245,158,11,0.2);
}
/* Thumb — Firefox */
.rd-rating-slider::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid var(--rz-base-background-color, #1a1a1a);
box-shadow: 0 0 0 2px rgba(245,158,11,0.4);
cursor: grab;
}
/* Ruler */
.rd-rating-ruler {
display: flex;
justify-content: space-between;
padding: 0 9px; /* ≈ thumb radius, aligns marks with thumb positions */
margin-top: 1px;
}
.rd-ruler-mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.rd-ruler-tick {
display: block;
border-radius: 1px;
background: var(--rz-text-secondary-color, #666);
}
.rd-ruler-tick--major { width: 1.5px; height: 6px; background: rgba(245,158,11,0.7); }
.rd-ruler-tick--minor { width: 1px; height: 4px; background: var(--rz-text-secondary-color, #555); opacity: 0.5; }
.rd-ruler-label {
font-size: 0.62rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #888);
line-height: 1;
letter-spacing: 0.02em;
}
/* Value label */
.rd-rating-value {
font-size: 0.95rem;
font-weight: 700;
color: #f59e0b;
min-width: 2rem;
}
/* Clear button */
.rd-rating-clear {
background: none;
border: none;
padding: 0.15rem;
cursor: pointer;
color: var(--rz-text-secondary-color, #888);
font-size: 0.85rem;
line-height: 1;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
}
.rd-rating-clear:hover { color: var(--rz-danger, #ef4444); background: rgba(239,68,68,0.1); }
.rd-action-btn--secondary.rz-button {
background: color-mix(in srgb, var(--rz-primary) 20%, transparent);
color: var(--rz-primary);
border: 1px solid color-mix(in srgb, var(--rz-primary) 35%, transparent);
}
.rd-action-btn--ghost.rz-button {
background: transparent;
color: var(--rz-secondary-text-color);
border: 1px solid var(--rz-border-color);
}
/* ── Recipe category chips ───────────────────── */
.rd-category-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1.75rem 0.75rem;
flex-wrap: wrap;
}
.rd-category-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rz-secondary-text-color);
text-transform: uppercase;
white-space: nowrap;
}
.rd-category-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.rd-cat-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.65rem;
border-radius: 2rem;
border: 1px solid color-mix(in srgb, var(--cat-color, var(--rz-border-color)) 60%, transparent);
background: transparent;
color: color-mix(in srgb, var(--cat-color, var(--rz-secondary-text-color)) 70%, var(--rz-secondary-text-color));
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.rd-cat-chip .rzi { font-size: 0.95rem; }
.rd-cat-chip:hover {
background: color-mix(in srgb, var(--cat-color, #6366f1) 15%, transparent);
border-color: var(--cat-color, var(--rz-primary));
color: var(--cat-color, var(--rz-primary));
}
.rd-cat-chip--on {
background: color-mix(in srgb, var(--cat-color, #6366f1) 22%, transparent);
border-color: var(--cat-color, var(--rz-primary));
color: var(--cat-color, var(--rz-primary));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #6366f1) 25%, transparent);
font-weight: 700;
}
.rd-cat-chip-check { font-size: 0.85rem !important; opacity: 0.9; }
/* Recipe description */
.rd-description {
padding: 0 1.75rem;
font-size: 0.9rem;
color: var(--rz-secondary-text-color);
line-height: 1.6;
margin: 0 0 1rem;
}
/* ── Two-column body ─────────────────────────── */
.rd-body-columns {
display: grid;
grid-template-columns: 320px 1fr;
gap: 2rem;
padding: 0 1.75rem 2rem;
align-items: flex-start;
}
/* ── Ingredients panel ───────────────────────── */
.rd-ingredients-panel {
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
border-radius: 1rem;
padding: 1.25rem;
}
.rd-panel-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--rz-text-color);
margin: 0 0 1rem;
}
.rd-panel-title-accent {
display: inline-block;
width: 4px;
height: 1.2em;
border-radius: 2px;
background: var(--rz-primary);
}
.rd-ing-group-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rz-secondary-text-color);
margin: 0.85rem 0 0.4rem;
}
.rd-ing-row {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.35rem 0;
border-bottom: 1px solid var(--rz-border-color);
}
.rd-ing-row:last-of-type { border-bottom: none; }
.rd-ing-check { margin-top: 3px; accent-color: var(--rz-primary); cursor: pointer; flex-shrink: 0; }
.rd-ing-label { font-size: 0.875rem; color: var(--rz-text-color); line-height: 1.5; cursor: pointer; }
.rd-ing-prep { color: var(--rz-secondary-text-color); }
.rd-empty-sub { font-size: 0.85rem; color: var(--rz-secondary-text-color); }
/* AI insight tip box */
.rd-ai-tip {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin-top: 1.1rem;
padding: 0.85rem 1rem;
border-radius: 0.6rem;
background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
font-size: 0.8rem;
color: var(--rz-text-color);
line-height: 1.5;
}
.rd-ai-tip-icon { color: var(--rz-primary); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
/* ── Method panel ────────────────────────────── */
.rd-method-panel { display: flex; flex-direction: column; gap: 2rem; }
.rd-method-title {
font-size: 1.3rem;
font-weight: 800;
color: var(--rz-text-color);
margin: 0 0 0.5rem;
}
/* Individual step */
.rd-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.rd-step-number {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
color: var(--rz-primary);
font-size: 1rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.rd-step-body { flex: 1; }
.rd-step-title { font-size: 1rem; font-weight: 700; color: var(--rz-text-color); margin: 0 0 0.4rem; }
.rd-step-text { font-size: 0.875rem; color: var(--rz-secondary-text-color); line-height: 1.6; margin: 0 0 0.75rem; }
/* Step image + pro tip side by side */
.rd-step-img-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 0.5rem;
}
.rd-step-img {
width: 100%;
border-radius: 0.6rem;
object-fit: cover;
aspect-ratio: 4/3;
}
.rd-pro-tip {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.85rem 1rem;
border-radius: 0.6rem;
background: color-mix(in srgb, var(--rz-primary) 7%, transparent);
font-size: 0.8rem;
color: var(--rz-text-color);
line-height: 1.5;
align-self: center;
}
.rd-pro-tip--inline { margin-top: 0.5rem; }
.rd-pro-tip-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.07em;
color: var(--rz-primary);
}
/* Target temperature callout */
.rd-target-temp {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
margin-top: 0.6rem;
border-radius: 0.6rem;
border-left: 3px solid var(--rz-primary);
background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
font-size: 0.82rem;
color: var(--rz-text-color);
}
.rd-target-temp .rzi { color: var(--rz-primary); font-size: 1.1rem; }
.rd-temp-label strong { color: var(--rz-text-color); }
/* ── Responsive ──────────────────────────────── */
@media (max-width: 1000px) {
.rd-body-columns { grid-template-columns: 1fr; }
.rd-ingredients-panel { order: 1; }
.rd-method-panel { order: 2; }
}
@media (max-width: 680px) {
.rd-hero { margin: 0.5rem; border-radius: 0.75rem; }
.rd-hero-title { font-size: 1.3rem; }
.rd-breadcrumb, .rd-actions, .rd-description, .rd-body-columns { padding-left: 1rem; padding-right: 1rem; }
.rd-actions { flex-direction: column; align-items: stretch; }
.rd-actions-spacer { display: none; }
.rd-step-img-row { grid-template-columns: 1fr; }
/* Allow the detail main panel to scroll naturally on mobile */
.rd-main { overflow-y: visible; }
}
/* ==========================================================================
Re-expose the --ap-* design tokens inside Radzen overlays.
Dialogs, popups, menus and tooltips are portalled to , OUTSIDE the
.ap-shell element where the --ap-* variables are defined. Without this any
themed content shown in an overlay (e.g. the project icon picker, attachment
cards) loses its colours — most visibly, icons become invisible in dark mode.
These map to the same Radzen theme variables the light-mode .ap-shell tokens
already alias, so overlay content tracks the active (light/dark) theme.
========================================================================== */
body .rz-dialog,
body .rz-dialog-wrapper,
body .rz-popup,
body .rz-overlaypanel,
body .rz-contextmenu,
body .rz-tooltip-content {
--ap-bg: var(--rz-body-background-color, #f0f0f8);
--ap-text: var(--rz-text-color, #1a1a2e);
--ap-text-muted: var(--rz-text-secondary-color, #6b7280);
--ap-border: var(--rz-border-color, #e5e7eb);
--ap-card-bg: var(--rz-base-background-color, #ffffff);
--ap-card-hover: color-mix(in srgb, var(--rz-primary, #5500dd) 10%, transparent);
--ap-accent: var(--rz-primary, #5500dd);
}
/* ==========================================================================
Radzen popup / dropdown / filter menu — theme-aware overrides
Radzen portals popups to , outside any theme-wrapper class.
CSS variables from :root (set by Radzen theme CSS) are still accessible.
The key bug: browser UA stylesheet resets