/* =========================================================
Ren & Remy's Loyalty Dashboard — Dark Theme (v2)
- Fixed left sidebar, scrollable main content
- Neon-accent progress bar across top of right pane
- Mobile-first responsive with off-canvas sidebar
- Built to be toggle-ready for future light mode
========================================================= */
/* THEME TOKENS (match main site) */
:root {
--pink: #E899F2;
--cyan: #9BE2F2;
--purple: #6D33A6;
--ink: #0d0d0d;
--ink-2: #1a1a1a;
--ink-70: rgba(0, 0, 0, 0.70);
--ink-50: rgba(0, 0, 0, 0.50);
--white: #f2f2f2;
/* UI scale + shadows */
--radius-lg: 14px;
--radius-md: 10px;
--radius-sm: 8px;
--shadow-1: 0 10px 30px rgba(0,0,0,0.25);
--shadow-2: 0 6px 18px rgba(0,0,0,0.25);
--ring: 0 0 0 1px rgba(255,255,255,0.06) inset;
/* Grid system */
--tile-row-height: 40px; /* doubled resolution for fine vertical control */
}
/* Base */
* { box-sizing: border-box; }
html, body {
height: 100%;
overflow-x: hidden;
max-width: 100vw;
}
/* COMMENTED OUT - Controlled by global-font.css */
/* body {
margin: 0;
background: radial-gradient(1200px 800px at 15% -10%, rgba(232,153,242,0.06), transparent 60%),
radial-gradient(900px 700px at 95% 10%, rgba(155,226,242,0.06), transparent 60%),
var(--ink);
color: var(--white);
font-family moved to main/assets/css/global-font.css
line-height: 1.4;
} */
body {
margin: 0;
background: radial-gradient(1200px 800px at 15% -10%, rgba(232,153,242,0.06), transparent 60%),
radial-gradient(900px 700px at 95% 10%, rgba(155,226,242,0.06), transparent 60%),
var(--ink);
color: var(--white);
/* font-family & font-size moved to global-font.css */
line-height: 1.4;
}
/* COMMENTED OUT - Controlled by global-font.css */
/* p {
font-size: var(--fs-lg);
} */
/* Dashboard pages shouldn't show the global footer; hide any footer markup here */
footer, .loyalty-footer, .site-footer, #footer {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Utility Classes */
.text-center { text-align: center; }
.text-muted { color: rgba(255,255,255,0.7); }
.text-error { color: #ff6b6b; }
.text-success { color: #28a745; }
.icon-large {
font-size: 3rem;
margin-bottom: 16px;
display: block;
}
/* Share icon row (inline, theme-aligned) */
.ld-share {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem; /* icons scale with font size */
color: var(--white);
}
.ld-share-label {
opacity: 0.85;
}
.ld-share-buttons {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.ld-share-btn {
/* Reuse base icon button styling; add minimal theming */
border-radius: var(--radius-sm);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem;
color: var(--white);
background: transparent;
transition: opacity 160ms ease, transform 160ms ease;
}
.ld-share-btn:hover,
.ld-share-btn:focus {
opacity: 0.85; /* use opacity transition over hard-coded color */
outline: none;
transform: translateY(-1px);
}
.ld-share-btn svg {
width: 1.1em;
height: 1.1em;
}
.icon-xl {
font-size: 48px;
color: #ccc;
margin-bottom: 20px;
display: block;
}
.verification-card {
max-width: 500px;
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
}
.verification-card h1 {
margin: 0 0 12px 0;
}
.verification-card p {
margin-bottom: 24px;
}
.verification-card .cta-btn {
display: inline-block;
padding: 12px 24px;
background: linear-gradient(180deg, #9BE2F2, #E899F2);
color: #0d0d0d;
border-radius: 8px;
text-decoration: none;
/* font-weight controlled by global-font.css */
}
.centered-layout {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.resend-note {
margin-top: 8px;
color: #666;
font-size: var(--fs-sub-sm);
}
.verification-success {
background: rgba(0,128,0,0.2);
padding: 10px;
border-radius: 8px;
}
.verification-section {
margin-top: 12px;
text-align: center;
}
.resend-btn {
background: #f0ad4e;
border: 0;
color: #000;
}
.table-header-center {
text-align: center;
}
.table-col-80 {
width: 80px;
}
.favicon-icon {
width: 24px;
height: 24px;
}
.tile-actions-divider {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.06);
text-align: right;
}
.add-widget-section {
display: flex;
align-items: center;
justify-content: flex-end; /* push buttons to right */
margin-bottom: 18px;
padding: 0 2px;
gap: 16px;
}
.layout-controls {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto; /* prevent drift/stretch when buttons show/hide */
}
/* Shared gradient button style for Add Widget and Edit Layout */
.gradient-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
/* font-weight controlled by global-font.css */
font-size: 0.95rem;
background: linear-gradient(180deg, var(--cyan), var(--pink));
color: var(--white);
transition: transform 80ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.gradient-btn:hover {
box-shadow: 0 0 16px var(--pink);
}
.gradient-btn:active {
transform: translateY(1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.36);
}
.gradient-btn[aria-expanded="true"] {
opacity: 0.95;
}
.ld-reset-layout-btn {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: var(--white);
padding: 8px 12px; /* match gradient-btn size */
border-radius: 8px; /* match gradient-btn radius */
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
/* font-weight controlled by global-font.css */
transition: transform 80ms ease, box-shadow 120ms ease, opacity 120ms ease; /* match gradient-btn transitions */
}
.ld-reset-layout-btn:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
box-shadow: 0 4px 12px rgba(155,226,242,0.15);
}
.ld-reset-layout-btn {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.ld-reset-layout-btn:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
.ld-reset-layout-btn:active {
transform: translateY(1px); /* match gradient-btn active state */
}
.ld-delete-selected-btn {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
padding: 8px 12px; /* match gradient-btn and reset-btn size */
border-radius: 8px; /* match gradient-btn and reset-btn radius */
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
/* font-weight controlled by global-font.css */
transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}
.ld-delete-selected-btn:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.ld-delete-selected-btn:active {
transform: translateY(1px);
}
/* Edit mode checkbox styling */
.tile-edit-checkbox {
position: absolute;
top: 12px;
left: 12px;
z-index: 10000; /* higher than tile-controls */
width: 24px;
height: 24px;
cursor: pointer;
accent-color: var(--pink);
display: none;
pointer-events: auto !important; /* force clickable even if parent has pointer-events: none */
}
/* Show checkbox only in edit mode */
.edit-mode-active .tile-edit-checkbox {
display: block;
pointer-events: auto !important;
}
/* Disable tile pointer events in edit mode to prevent navigation */
.edit-mode-active .ld-tile {
pointer-events: auto !important; /* allow checkbox interaction */
cursor: default; /* not a link in edit mode */
}
/* Hide 3-dot menu in edit mode */
.edit-mode-active .tile-controls {
display: none;
}
/* Highlight selected tiles */
.tile-selected {
outline: 2px solid var(--pink);
outline-offset: 2px;
}
.feed-state {
padding: 40px 20px;
text-align: center;
color: var(--white);
}
/* Layout shell */
.loyalty-dashboard {
display: grid;
/* Sidebar is positioned fixed; keep a single flexible column for main content
and use the .ld-main margin-left to offset the fixed sidebar. This prevents
double-reserving the sidebar width which can force the content area to be
narrower than expected. */
grid-template-columns: 1fr;
min-height: 100vh;
gap: 0;
}
/* Sidebar — fixed/sticky feel */
.ld-sidebar {
position: fixed; /* stays visible */
top: 0;
left: 0;
height: 100vh;
width: 280px;
background: linear-gradient(180deg, var(--ink-2), #151515 70%);
padding: 22px 18px;
border-right: 1px solid rgba(255,255,255,0.06);
box-shadow: var(--shadow-1);
z-index: 10;
display: flex;
flex-direction: column;
overflow-x: hidden;
box-sizing: border-box;
}
/* Sidebar header / profile */
.ld-profile {
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.ld-profile-img {
width: 64px; height: 64px; border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255,255,255,0.08);
}
.ld-name {
margin: 2px 0 4px;
font-weight: 600;
font-size: var(--fs-sm);
}
.ld-edit {
color: var(--cyan);
font-size: var(--fs-xs);
text-decoration: none;
opacity: 0.9;
}
.ld-edit:hover { opacity: 1; text-decoration: underline; }
.ld-edit-profile {
color: var(--cyan);
font-size: var(--fs-xs);
text-decoration: none;
opacity: 0.9;
display: inline-block;
margin-top: 4px;
}
.ld-edit-profile:hover { opacity: 1; text-decoration: underline; }
/* Sidebar nav */
.ld-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.ld-nav ul { list-style: none; padding: 10px 0 0; margin: 0; }
.ld-nav li { margin: 6px 0; position: relative; }
.ld-nav li.dragging-origin { opacity: 0.5; }
.ld-nav li.dragging, .ld-nav .dragging, .ld-nav .dragging-origin, .ld-nav .dragging * {
background: linear-gradient(90deg, rgba(232,153,242,0.22), rgba(155,226,242,0.18));
color: var(--ink) !important;
box-shadow: 0 4px 24px 0 rgba(232,153,242,0.18), 0 0 0 2px rgba(232,153,242,0.18) inset, var(--ring);
border-radius: var(--radius-sm);
z-index: 10000 !important;
opacity: 1 !important;
transition: none !important;
}
.ld-nav li.dragging:hover, .ld-nav .dragging:hover, .ld-nav .dragging-origin:hover, .ld-nav .dragging *:hover {
color: var(--white) !important;
}
.ld-nav .dragging .drag-handle, .ld-nav li.dragging-origin .drag-handle {
color: #fff !important;
opacity: 1 !important;
background: none !important;
}
/* Ghost wrapper used while dragging nav items (outside .ld-nav) */
.nav-drag-ghost {
pointer-events: none;
border-radius: var(--radius-sm);
overflow: hidden;
}
.nav-drag-ghost .drag-handle {
/* Ensure handle inside ghost matches position and look */
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-xs);
color: rgba(255,255,255,0.9);
padding: 4px;
}
/* Style for the actual when it's being dragged (moved into body) */
li.dragging, .dragging {
background: linear-gradient(90deg, rgba(232,153,242,0.22), rgba(155,226,242,0.18));
color: var(--ink) !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 2px rgba(232,153,242,0.08) inset;
border-radius: var(--radius-sm);
opacity: 1 !important;
transform: none !important;
list-style: none; /* avoid default list marker when is moved to */
}
.dragging a { color: var(--ink) !important; }
.dragging a:hover { color: var(--white) !important; }
.dragging .drag-handle {
color: var(--ink) !important;
z-index: 2;
position: absolute; /* ensure handle stays on the same row even when is outside .ld-nav */
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-xs);
}
.dragging .drag-handle:hover { color: var(--white) !important; }
/* While dragging, the moved is no longer inside .ld-nav, so its loses inherited styles.
Re-apply the nav link look so the pill stays visually consistent and fully opaque. */
.dragging > a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 40px 10px 12px; /* extra space on right to prevent wrapping under handle */
color: var(--ink);
text-decoration: none;
border-radius: var(--radius-sm);
/* Use the active gradient to ensure a solid, non-translucent feel while dragging */
background: linear-gradient(90deg, rgba(232,153,242,0.22), rgba(155,226,242,0.18));
box-shadow: 0 0 0 1px rgba(155,226,242,0.35) inset, 0 8px 30px rgba(0,0,0,0.35);
font-size: var(--fs-sm);
font-weight: 500;
width: 100%;
white-space: nowrap; /* keep text on a single line */
overflow: hidden;
text-overflow: ellipsis;
}
.dragging > a:hover { color: var(--white); }
/* Ensure nothing inside the dragging element is semi-transparent */
.dragging, .dragging * { opacity: 1 !important; }
/* Ghost lift animation */
.nav-drag-ghost {
transition: transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s ease, opacity .12s ease;
will-change: transform, box-shadow, opacity;
}
.nav-drag-ghost.lift {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 22px 40px rgba(0,0,0,0.35);
opacity: 1;
}
/* Placeholder transitions */
.nav-placeholder {
transition: height .14s ease, margin .14s ease, opacity .14s ease, background .18s ease;
opacity: 0;
background: rgba(255,255,255,0.02);
}
.nav-placeholder.show {
opacity: 1;
background: rgba(255,255,255,0.06);
}
.ld-nav li .drag-handle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-xs);
color: rgba(255,255,255,0.35);
cursor: grab;
user-select: none;
padding: 4px;
z-index: 1;
}
.ld-nav li .drag-handle:active { cursor: grabbing; }
.ld-nav li[data-fixed="true"] .drag-handle { display: none; }
.ld-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 32px 10px 12px; /* space on right for handle */
color: rgba(255,255,255,0.85);
text-decoration: none;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.02);
box-shadow: var(--ring);
transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
user-select: none;
font-size: var(--fs-sm);
font-weight: 500;
}
.ld-nav a svg {
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.18s ease;
}
.ld-nav a:hover svg,
.ld-nav li.active a svg {
opacity: 1;
}
.ld-nav li[data-fixed="true"] a { padding-right: 12px; }
.ld-nav a:hover {
background: linear-gradient(90deg, rgba(232,153,242,0.14), rgba(155,226,242,0.10));
color: #fff;
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(232,153,242,0.25) inset, 0 0 22px rgba(232,153,242,0.12);
}
.ld-nav li.active a {
background: linear-gradient(90deg, rgba(232,153,242,0.22), rgba(155,226,242,0.18));
color: #fff;
box-shadow: 0 0 0 1px rgba(155,226,242,0.35) inset, 0 0 28px rgba(155,226,242,0.18);
}
/* Sidebar footer with sign out link - pinned to bottom */
.ld-sidebar-footer {
margin-top: auto;
padding: 16px 0 0;
border-top: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.ld-signout-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
padding: 4px 0;
}
.ld-signout-link svg {
opacity: 0.5;
transition: opacity 0.2s ease;
}
.ld-signout-link:hover {
color: rgba(255,255,255,0.85);
}
.ld-signout-link:hover svg {
opacity: 0.85;
}
/* Mobile toggle inside sidebar (shown only < 980px) */
.ld-mobile-toggle {
display: none;
width: 100%;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: var(--white);
border-radius: var(--radius-sm);
cursor: pointer;
}
/* Main panel */
.ld-main {
min-width: 0;
margin-left: 280px; /* account for fixed sidebar */
padding: 22px;
padding-top: 80px; /* below header */
height: calc(100vh - 80px);
overflow-y: auto;
overflow-x: hidden;
max-width: calc(100vw - 280px);
box-sizing: border-box;
}
/* Fixed top header */
.ld-header {
position: fixed;
top: 0; left: 280px; right: 0;
height: 64px;
background: var(--ink-2);
display: flex; align-items: center; justify-content: space-between;
padding: 0 22px;
box-shadow: var(--shadow-2);
z-index: 15;
box-sizing: border-box;
max-width: calc(100vw - 280px);
overflow: hidden;
}
.ld-header .ld-link {
color: var(--cyan); text-decoration: none; margin-left: 14px;
}
.ld-header .ld-link:hover { text-decoration: underline; }
.ld-header-left { display: flex; align-items: center; gap: 10px; }
.ld-header-sep { opacity: .6; }
/* Header search and icons */
.ld-search { display:flex; align-items:center; gap:8px; }
.ld-search input[type="search"]{
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: var(--white);
padding: 8px 10px;
border-radius: 8px;
width: 260px;
}
.ld-search button{ background:transparent; border:0; color:var(--white); cursor:pointer; font-size:var(--fs-sm) }
.ld-search-bar{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);border-radius:8px;padding:0 12px;width:320px;max-width:100%;position:relative}
.ld-search-bar input{flex:1;background:transparent;border:0;color:var(--white);padding:10px 0;font-size:var(--fs-sm);outline:none}
.ld-search-bar input::placeholder{color:rgba(255,255,255,0.5)}
.ld-search-icon{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.7)}
.ld-search-icon svg{stroke: currentColor; color: currentColor}
.ld-header-center{flex:1;display:flex;align-items:center;justify-content:center}
.ld-header-right{display:flex;align-items:center;gap:12px;margin-left:auto}
/* === Dashboard Quick-Nav Search === */
.dashboard-search-container{
position:relative;
width:260px;
margin-left:12px;
}
.dashboard-search-container #dashboardSearch{
width:100%;
padding:8px 10px;
border-radius:8px;
border:1px solid rgba(155,226,242,0.12);
background: rgba(255,255,255,0.03);
color: var(--white);
outline: none;
}
.dashboard-search-container #dashboardSearch::placeholder{color:rgba(255,255,255,0.45)}
/* Position the search results dropdown anchored to the bottom edge of the
header search bar. The dashboard moved the input into `.ld-search-bar`, so
target that container rather than the old .dashboard-search-container. */
.ld-search-bar .search-results{
display:none;
position:absolute;
left:0;
top:calc(100% + 8px);
width:100%;
min-width:220px;
background: linear-gradient(180deg, rgba(20,20,22,0.98), rgba(18,18,18,0.98));
border-radius:8px;
box-shadow: 0 8px 30px rgba(0,0,0,0.5);
z-index:1300;
overflow:hidden;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ld-search-bar .search-results .result-item{
padding:10px 12px;
cursor:pointer;
color:var(--white);
border-bottom:1px solid rgba(255,255,255,0.02);
}
.ld-search-bar .search-results .result-item:hover{
background: rgba(155,226,242,0.08);
}
.ld-search-bar .search-results .no-results{
padding:10px 12px; color:rgba(255,255,255,0.6);
}
/* Inline settings toast on toolbar (left side) */
.ld-save-toast {
min-height: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
/* font-weight controlled by global-font.css */
color: #9EF5C3; /* mint green */
opacity: 0;
transform: translateY(2px);
transition: opacity .22s ease, transform .22s ease;
margin-right: auto; /* keep toast on left, push buttons right */
}
.ld-save-toast.visible {
opacity: 1;
transform: translateY(0);
}
.ld-save-toast.warn { color: #f7e27a; }
/* Brand + search grouping centered in header */
.ld-header-brand{display:flex;align-items:center;gap:12px}
/* Use main site H1 style for the dashboard title but left-aligned in header */
.ld-site-title{margin:0;font-size:2.5rem;color:var(--pink);line-height:1;letter-spacing:0.01em;text-align:left} /* keep size for branding */
.ld-brand-title{margin:0;font-size:2rem;color:var(--pink);line-height:1;letter-spacing:0.01em;text-align:left} /* keep size for branding */
/* Responsive scaling for small screens */
@media (max-width:980px){
.ld-site-title{font-size:1.6rem}
.ld-brand-title{font-size:1.4rem}
}
.icon-btn{background:transparent;border:0;color:var(--white);cursor:pointer;position:relative;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px}
.icon-btn:hover{background:rgba(255,255,255,0.06)}
.icon-btn svg{color:var(--white);stroke:var(--white)}
.badge{position:absolute;top:4px;right:4px;background:#e63946;color:#fff;border-radius:999px;padding:2px 6px;font-size:var(--fs-xs);/* font-weight controlled by global-font.css */line-height:1;min-width:18px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,0.3)}
.badge:empty{display:none}
/* Modal overlay (shared styling) */
.ld-modal{position:fixed;inset:0;display:none;z-index:10000}
.ld-modal[aria-hidden="false"]{display:block}
.ld-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter: blur(2px)}
.ld-modal-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink-2);border:1px solid rgba(255,255,255,0.06);border-radius:14px;box-shadow:var(--shadow-1);width:min(720px,90vw)}
.ld-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ld-modal-close{background:transparent;border:0;color:var(--white);cursor:pointer;font-size:var(--fs-sm);padding:6px;border-radius:8px}
.ld-modal-close:hover{background:rgba(255,255,255,0.06)}
.ld-modal-body{padding:16px 16px 18px 16px}
/* Add-widget specific layout */
.add-widget-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
.add-widget-item{display:flex;align-items:center;justify-content:center;padding:12px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:#fff;cursor:pointer;/* font-weight controlled by global-font.css */min-height:42px;box-shadow:var(--ring)}
.add-widget-item:hover{background:rgba(255,255,255,0.05)}
.add-widget-item[aria-disabled="true"], .add-widget-item.disabled{
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.2);
pointer-events: none;
}
@media (max-width: 980px){
.ld-modal-dialog{width:min(560px, 92vw)}
.add-widget-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
.ld-modal-dialog{width:92vw}
.ld-progress-container {
flex-direction: column;
}
.ld-progress-rewards,
.ld-progress-tier {
flex: 1 1 auto;
}
.ld-progress-tier {
flex-direction: row;
align-items: center;
text-align: left;
gap: 12px;
}
.ld-tier-current {
font-size: 0.85rem;
}
.ld-tier-remaining {
font-size: 1.2rem;
}
.ld-tier-label {
font-size: var(--fs-xs);
}
.ld-progress-tier .ld-progress-bar {
flex: 1;
margin-top: 0;
}
.add-widget-grid{grid-template-columns:1fr}
}
/* Dropdown panels */
.ld-dropdown{position:absolute;right:22px;top:64px;background:var(--ink-2);width:340px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 30px rgba(0,0,0,0.4);border-radius:10px;overflow:hidden;display:none}
.ld-dropdown[aria-hidden="false"]{display:block}
.ld-dropdown-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04)}
.ld-dropdown-body{max-height:320px;overflow:auto;padding:8px}
.ld-notif-item,.ld-msg-item{padding:10px;border-radius:8px;margin-bottom:6px;background:rgba(255,255,255,0.01);cursor:pointer;transition:background .15s ease}
.ld-notif-item:hover,.ld-msg-item:hover{background:rgba(255,255,255,0.04)}
.ld-notif-item.unread,.ld-msg-item.unread{background:linear-gradient(90deg, rgba(232,153,242,0.08), rgba(155,226,242,0.04))}
/* Priority color coding for notifications */
.ld-notif-item.priority-high{border-left:3px solid #e63946}
.ld-notif-item.priority-medium{border-left:3px solid #ffc857}
.ld-notif-item.priority-low{border-left:3px solid #9BE2F2}
.ld-notif-title{/* font-weight controlled by global-font.css */}
.ld-notif-snippet{font-size:0.92rem;color:rgba(255,255,255,0.85)}
.ld-notif-meta{font-size:0.8rem;color:rgba(255,255,255,0.5);margin-top:6px}
.ld-dropdown .small{background:transparent;border:0;color:var(--cyan);cursor:pointer;font-size:0.92rem;/* font-weight controlled by global-font.css */}
.ld-dropdown .small:hover{text-decoration:underline}
.ld-logo img{display:block;border-radius:4px}
/* Position individual panels separately */
#ld-notif-panel{right:94px}
#ld-msg-panel{right:48px}
/* Progress container — 80/20 split for rewards + tier */
.ld-progress-container {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
/* Rewards progress — full width across top of right pane */
.ld-progress {
background: rgba(255,255,255,0.04);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow-2);
outline: 1px solid rgba(255,255,255,0.06);
}
.ld-progress-rewards {
flex: 0 0 calc(80% - 6px);
}
.ld-progress-tier {
flex: 0 0 calc(20% - 6px);
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
text-align: center;
/* Fixed neon glow applied via tier-specific class; no layout change */
box-shadow: none;
overflow: hidden; /* ensure inset glow is clipped to the box */
}
/* Make tier box clearly interactive when clickable */
.ld-progress-tier[role="link"] {
cursor: pointer;
}
.ld-progress-tier[role="link"]:focus {
outline: 3px solid rgba(155,226,242,0.12);
outline-offset: 3px;
box-shadow: 0 0 0 3px rgba(109,51,166,0.06);
}
/* Fixed glow mappings by tier */
.ld-progress-tier.tier-friend-zone {
/* Inner neon glow */
box-shadow: inset 0 0 12px #9BE2F2, inset 0 0 24px rgba(155,226,242,0.6);
}
.ld-progress-tier.tier-regular-status {
box-shadow: inset 0 0 12px #E899F2, inset 0 0 30px rgba(232,153,242,0.65);
}
.ld-progress-tier.tier-logan-legend {
box-shadow: inset 0 0 18px #B45AF0, inset 0 0 40px rgba(109,51,166,0.7);
}
.ld-progress-tier.tier-valley-vip {
box-shadow: inset 0 0 20px #6D33A6, inset 0 0 45px rgba(155,226,242,0.5);
}
.ld-progress-tier.tier-founders-circle {
box-shadow: inset 0 0 30px #E899F2, inset 0 0 60px #9BE2F2, inset 0 0 90px rgba(255,255,255,0.2);
}
/* Support renamed tier label: 'Inner Circle' should use same glow as Regular Status */
.ld-progress-tier.tier-inner-circle {
box-shadow: inset 0 0 12px var(--cyan), inset 0 0 30px var(--cyan);
}
/* Hover: intensify inner glow slightly (no outer glow) */
.ld-progress-tier.tier-friend-zone:hover { box-shadow: inset 0 0 18px #9BE2F2, inset 0 0 36px rgba(155,226,242,0.75); }
.ld-progress-tier.tier-regular-status:hover,
.ld-progress-tier.tier-inner-circle:hover { box-shadow: inset 0 0 18px var(--cyan), inset 0 0 45px var(--cyan); }
.ld-progress-tier.tier-logan-legend:hover { box-shadow: inset 0 0 26px #B45AF0, inset 0 0 52px rgba(109,51,166,0.8); }
.ld-progress-tier.tier-valley-vip:hover { box-shadow: inset 0 0 28px #6D33A6, inset 0 0 60px rgba(155,226,242,0.6); }
.ld-progress-tier.tier-founders-circle:hover { box-shadow: inset 0 0 40px #E899F2, inset 0 0 80px #9BE2F2, inset 0 0 120px rgba(255,255,255,0.25); }
.ld-progress-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.ld-progress-title {
/* font-weight controlled by global-font.css */
font-size: var(--fs-sm);
color: rgba(255,255,255,0.92);
}
.ld-progress-count {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
}
.ld-progress-count h2,
.ld-progress-count h3 {
margin: 0;
font-size: var(--fs-base); /* use global base heading size */
/* font-weight controlled by global-font.css */
color: var(--cyan);
/* Ensure heading uses the global heading font (Sigmar) */
font-family: var(--font-heading);
/* Utility monospace styles for rewards/codes */
.mono-code { font-family: var(--font-mono); }
.mono-code.mono-large { font-size: var(--fs-lg); }
}
.ld-progress-count:hover h2,
.ld-progress-count:focus h2,
.ld-progress-count:hover h3,
.ld-progress-count:focus h3 {
text-decoration: underline;
}
/* Reward numeric count: slightly larger than surrounding heading */
.ld-progress-count .ld-reward-num {
color: var(--pink);
font-size: var(--fs-xl);
line-height: 1;
display: inline-block;
vertical-align: middle;
margin: 0 6px;
/* font-weight controlled by global-font.css */
}
.ld-progress-count:focus {
outline: 3px solid rgba(232,153,242,0.12);
outline-offset: 3px;
}
.ld-progress-meta {
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
}
.ld-progress-bar {
width: 100%;
height: 14px;
background: #262626;
border-radius: 999px;
/* allow tick tooltips to extend outside the pill */
overflow: visible;
position: relative;
}
.ld-progress-fill {
height: 100%;
width: 0%;
/* three-stop gradient: purple -> pink -> cyan */
background: linear-gradient(90deg, var(--purple) 0%, var(--pink) 50%, var(--cyan) 100%);
box-shadow: 0 0 24px rgba(109,51,166,0.14), 0 0 28px rgba(232,153,242,0.12);
transition: width .7s cubic-bezier(.22,1,.36,1);
border-radius: 999px;
/* ensure ticks receive pointer events even when under the fill */
pointer-events: none;
z-index: 5;
}
/* Ticks should appear above the fill and be easily hoverable */
.ld-progress-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
width: 28px; /* wider hit area for hover */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 40;
cursor: pointer;
}
.ld-tick-bar {
width: 2px;
height: 10px;
background: rgba(255,255,255,0.5);
border-radius: 2px;
transition: background 0.2s ease, height 0.2s ease, width 0.2s ease;
}
.ld-progress-tick:hover .ld-tick-bar {
background: rgba(255,255,255,0.9);
height: 14px;
width: 3px;
}
.ld-tick-tip {
display: none;
position: absolute;
top: -48px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.92);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
font-size: 0.8rem;
pointer-events: none;
z-index: 50;
}
.ld-progress-tick:hover .ld-tick-tip {
display: block;
}
/* Tier progress styling */
.ld-tier-current {
/* Prominent centered tier name - use global heading font */
font-family: var(--font-heading) !important;
font-size: var(--fs-base);
font-weight: 700; /* brand-specific emphasis */
color: rgba(255,255,255,0.98);
margin-bottom: 6px;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.ld-tier-next {
/* Secondary paragraph under the tier name - use global body font */
font-family: var(--font-body) !important;
font-size: var(--fs-sm);
/* font-weight controlled by global-font.css */
color: rgba(255,255,255,0.85);
margin: 0 0 8px 0;
text-align: center;
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Utility font-size helpers used in tier box */
.fs--xs { font-size: var(--fs-xs) !important; }
.fs--lg { font-size: var(--fs-lg) !important; font-weight: 700; }
/* Compact small subtext for points-to-next when shown under multiplier */
.ld-tier-next-compact {
font-family: var(--font-heading);
text-align: center;
margin: 0 0 8px 0;
}
.ld-tier-remaining, .ld-tier-label {
/* Keep these present for backward compatibility but make them subtle */
display: none;
}
.ld-progress-tier .ld-progress-bar {
height: 8px;
margin-top: auto;
}
.ld-tier-fill {
background: linear-gradient(90deg, var(--cyan) 0%, var(--pink) 100%);
box-shadow: 0 0 16px rgba(155,226,242,0.3);
}
/* ==============================
METRIC TILES — CONTINUOUS GRADIENT STRIP (FIXED)
============================== */
.ld-tiles {
display: grid;
/* Use 12-column grid for flexible fractional widths (4=1/3, 8=2/3, 12=full) */
grid-template-columns: repeat(12, 1fr);
/* Fixed row height ensures tiles with row spans are consistent height */
grid-auto-rows: var(--tile-row-height);
/* Enable dense packing to fill gaps vertically */
grid-auto-flow: row dense;
gap: 5px; /* uniform spacing via grid gap instead of tile padding */
/*margin-bottom: 5px;*/ /* optional spacing below tile grid */
/* Stretch tiles to fill their grid area (required for row spans to work) */
align-items: stretch;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
/* Dropdown footer (view all) */
.ld-dropdown-foot { padding: 10px; border-top: 1px solid rgba(255,255,255,0.04); text-align: center; }
.ld-dropdown-foot .ld-view-all { color: var(--cyan); text-decoration: none; /* font-weight controlled by global-font.css */ }
.ld-dropdown-foot .ld-view-all:hover { text-decoration: underline; }
/* Per-item 3-dot menus */
.ld-item-menu { display: none; background: var(--ink-2); border: 1px solid rgba(255,255,255,0.04); padding: 6px; border-radius: 8px; position: absolute; right: 8px; top: 36px; z-index: 2000; min-width: 160px; box-shadow: var(--shadow-2); }
.ld-item-menu[aria-hidden="false"] { display: block; }
.ld-item-menu[aria-hidden="true"] { display: none !important; }
.ld-item-menu .ld-action { display: block; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--white); text-align: left; cursor: pointer; font-size: 0.95rem; }
.ld-item-menu .ld-action:hover { background: rgba(255,255,255,0.03); }
/* Notification list row layout */
.ld-list-row { display:flex; align-items:flex-start; gap:10px; position:relative; }
.ld-list-item, .ld-convo-item { position: relative; }
.ld-list-main { flex: 1; }
.ld-list-actions { flex: 0 0 auto; align-self:flex-start; }
/* Messenger layout */
.ld-messenger.msg-layout { display:flex; gap:8px; height: calc(100vh - 220px); }
.ld-msg-convos.msg-threads { width: 30%; min-width: 180px; max-width: 60%; background: rgba(255,255,255,0.02); border-radius: 10px; padding: 10px; overflow:auto; }
.ld-msg-divider { width: 8px; cursor: ew-resize; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border-radius: 4px; align-self: stretch; }
.ld-msg-thread.msg-conversation { flex:1; background: rgba(255,255,255,0.02); border-radius: 10px; padding: 12px; display:flex; flex-direction:column; overflow:hidden; min-width: 220px; }
.ld-convo-list { list-style:none; padding:0; margin:0; }
.ld-convo-item { display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px solid rgba(255,255,255,0.02); cursor:pointer; position:relative; }
.ld-convo-item.unread { background: linear-gradient(90deg, rgba(155,226,242,0.02), rgba(232,153,242,0.02)); }
.ld-convo-title { /* font-weight controlled by global-font.css */ }
.ld-convo-snippet { font-size:0.95rem; color: rgba(255,255,255,0.75); }
.ld-thread-head { /* font-weight controlled by global-font.css */ margin-bottom: 8px; }
.ld-thread-body { flex:1; overflow:auto; padding:8px; }
.ld-thread-composer { display:flex; gap:8px; align-items:center; padding-top:8px; border-top:1px solid rgba(255,255,255,0.04); }
.ld-thread-composer[aria-hidden="true"] { display:none; }
.ld-msg { margin-bottom: 10px; }
.ld-msg-bubble { background: rgba(255,255,255,0.04); padding:10px 12px; border-radius:10px; display:inline-block; max-width:70%; }
.ld-msg-outgoing .ld-msg-bubble { background: linear-gradient(90deg, var(--cyan), var(--pink)); color: var(--ink); }
.ld-msg-meta { font-size:0.8rem; color: rgba(255,255,255,0.5); margin-top:6px; }
/* New alias classes for requested naming */
.msg-threads { }
.msg-thread-item { }
.msg-thread-item.unread { background: linear-gradient(90deg, rgba(155,226,242,0.02), rgba(232,153,242,0.02)); }
.msg-thread-selected { outline: 1px solid rgba(155,226,242,0.25); border-radius: 8px; }
.msg-conversation { }
.msg-bubble { }
.msg-bubble.me .ld-msg-bubble { background: linear-gradient(90deg, var(--cyan), var(--pink)); color: var(--ink); }
.msg-bubble.them .ld-msg-bubble { background: rgba(255,255,255,0.06); }
/* Tabs for Inbox/Sent */
.msg-tabs { display:flex; gap:8px; margin-top:8px; }
.msg-tab { background: rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.12); padding:6px 10px; border-radius:8px; cursor:pointer; /* font-weight controlled by global-font.css */ font-size:0.92rem; }
.msg-tab.active { background: linear-gradient(90deg, rgba(232,153,242,0.22), rgba(155,226,242,0.18)); border-color: rgba(155,226,242,0.35); }
/* Mobile responsiveness for messenger */
@media (max-width: 980px){
.ld-messenger.msg-layout { flex-direction: column; height: auto; }
.ld-msg-convos.msg-threads { width: 100%; max-width: 100%; }
}
/* Resizing state */
body.ld-resizing { cursor: ew-resize; user-select: none; }
/* Small three-dot toggles for per-item menus to match tile control look */
.notif-menu-toggle, .convo-menu-toggle {
background: transparent;
border: 0;
color: rgba(255,255,255,0.85);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 18px;
line-height: 1;
padding: 0;
cursor: pointer;
}
.notif-menu-toggle:hover, .convo-menu-toggle:hover { background: rgba(255,255,255,0.03); color: var(--white); }
/* Ensure item menus are clipped to the parent and not full-width exposed */
.ld-list-item .ld-item-menu, .ld-convo-item .ld-item-menu { right: 8px; top: 36px; }
.ld-tile {
padding: 5px; /* 5px edge padding = 10px total spacing when adjacent */
box-sizing: border-box;
border-radius: var(--radius-md);
color: #fff;
box-shadow: var(--shadow-2);
border: 1px solid rgba(255,255,255,0.06); /* Changed from outline to border - respects box-sizing */
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
/* No global overlay gradient — per-tile gradients are explicit to avoid extra coloring/opacity */
background: transparent;
position:relative;
will-change: transform;
/* Height is controlled by grid-row span via inline styles - no min-height needed */
/* Row span is set by inline style from PHP or JavaScript - no hardcoded default */
overflow: hidden;
max-width: 100%;
}
/* Tile controls (3-dot menu) */
.tile-controls{position:absolute;top:8px;right:8px;z-index:20}
.ld-list-item .tile-controls, .ld-convo-item .tile-controls { /* Reuse tile controls inside list/convo items but keep natural flow */
position: static;
top: auto; right: auto;
display: flex;
align-items: center;
margin-left: 6px;
}
.tile-menu-btn{background:transparent;border:0;color:var(--white);cursor:pointer;padding:6px;border-radius:6px;font-size:var(--fs-sm)}
.tile-menu{display:none;position:fixed;background:var(--ink-2);border:1px solid rgba(255,255,255,0.06);padding:6px;border-radius:10px;width:220px;box-shadow:var(--shadow-2);z-index:9999}
.tile-menu[aria-hidden="false"]{display:block}
.tile-menu-row{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.03)}
.tile-menu-row.label{border-bottom:0;padding:6px 6px 8px 6px;/* font-weight controlled by global-font.css */color:var(--white)}
.tile-menu .tile-action{display:flex;align-items:center;gap:8px;color:var(--white);background:transparent;border:0;padding:6px;width:100%;text-align:left;cursor:pointer;/* font-weight controlled by global-font.css */font-size:0.95rem}
.tile-widths{display:flex;gap:8px;align-items:center}
.tile-width{width:44px;height:36px;border-radius:8px;background:#f2f2f2;border:1px solid rgba(0,0,0,0.08);display:inline-flex;align-items:center;justify-content:center;/* font-weight controlled by global-font.css */cursor:pointer;color:var(--ink)}
.tile-width:hover{color:var(--white)}
.tile-colors{display:flex;flex-wrap:wrap;gap:8px;max-width:220px}
.tile-color-btn{width:36px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;margin-bottom:6px}
.tile-color-btn.swatch-9{background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} /* glass effect */
.tile-color-btn.swatch-1{background: linear-gradient(90deg, #9BE2F2 0%, #E899F2 100%)} /* blue -> pink */
.tile-color-btn.swatch-2{background: linear-gradient(90deg, #6D33A6 0%, #262626 100%)} /* purple -> 262626 */
.tile-color-btn.swatch-3{background: linear-gradient(90deg, #FF9A3D 0%, #E53935 100%)} /* orange -> red */
.tile-color-btn.swatch-4{background: linear-gradient(90deg, #2ECC71 0%, #0D1F3A 100%)} /* green -> navy */
.tile-color-btn.swatch-5{background: linear-gradient(90deg, #7FD1FF 0%, #58A6FF 100%)} /* mint->blue */
.tile-color-btn.swatch-6{background: linear-gradient(90deg, #D8B4FF 0%, #FF7ACD 100%)} /* lavender->magenta */
.tile-color-btn.swatch-7{background: linear-gradient(90deg, #FFC37A 0%, #FF6B35 100%)} /* amber->orange */
.tile-color-btn.swatch-8{background: linear-gradient(90deg, #7EE0B8 0%, #163B72 100%)} /* mint->navy */
/* Collapsible Color Picker Section */
.tile-color-header {
display: flex !important;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.tile-color-header:hover {
background: rgba(255,255,255,0.03);
}
.tile-color-toggle {
background: transparent;
border: 0;
color: rgba(255,255,255,0.6);
font-size: 0.75rem;
cursor: pointer;
padding: 4px 8px;
transition: transform 0.2s ease, color 0.2s ease;
}
.tile-color-toggle:hover {
color: rgba(255,255,255,0.9);
}
.tile-color-toggle[aria-expanded="true"] {
transform: rotate(180deg);
}
.tile-color-section {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.tile-color-section[aria-hidden="false"] {
max-height: 300px;
}
/* Custom Color Picker Modal */
.color-picker-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 12px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.06);
}
.color-picker-row label {
font-weight: 600;
font-size: 0.95rem;
color: rgba(255,255,255,0.9);
}
.gradient-color-input {
width: 80px;
height: 40px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
cursor: pointer;
background: transparent;
}
.gradient-preview {
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
.tile-menu .tile-remove{display:flex;align-items:center;gap:8px;color:var(--white);background:transparent;border:0;padding:6px;width:100%;text-align:left;cursor:pointer;/* font-weight controlled by global-font.css */font-size:0.95rem}
.tile-menu .tile-delete-row{background:#ff6b6b;color:#fff;border-radius:8px;padding:8px;display:flex;align-items:center;gap:8px}
/* Only delete action buttons (with data-action="delete") are red */
.tile-menu .tile-action[data-action="delete"],
.tile-menu .tile-remove[data-action="delete"] {
color: #ff6b6b;
}
/* Tile header + content lines */
.ld-title-row{margin-top:4px;margin-bottom:6px;padding-right:32px;/* font-weight controlled by global-font.css */letter-spacing:0.2px;opacity:0.95}
.ld-lines{display:flex;flex-direction:column;gap:4px}
.ld-line{font-size:0.88rem;color:rgba(255,255,255,0.9);/* font-weight controlled by global-font.css */opacity:0.95}
/* Dynamic tile body container */
.ld-tile-body {
padding: 8px 0;
overflow-y: auto;
max-height: calc(100% - 40px); /* Leave room for title */
}
/* Notification list in tiles */
.ld-tile .ld-notifications-list {
list-style: none;
padding: 0;
margin: 0;
}
.ld-tile .ld-notification-item {
background: rgba(0,0,0,0.2);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
transition: background .15s ease;
}
.ld-tile .ld-notification-item:hover {
background: rgba(0,0,0,0.3);
}
.ld-tile .ld-notification-item.unread {
background: rgba(255,255,255,0.1);
border-left: 3px solid var(--cyan);
}
.ld-tile .ld-notification-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.ld-tile .ld-notification-text {
font-size: 0.85rem;
/* font-weight controlled by global-font.css */
color: rgba(255,255,255,0.95);
line-height: 1.3;
}
.ld-tile .ld-notification-time {
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
/* font-weight controlled by global-font.css */
}
/* Activity Log tile styles */
.ld-activity-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ld-activity-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
background: rgba(0,0,0,0.2);
border-radius: 8px;
transition: background 0.15s ease;
}
.ld-activity-item:hover {
background: rgba(0,0,0,0.3);
}
.ld-activity-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
/* font-family and font-size controlled by global-font.css */
}
/* Icon classes for activity types - text-based icons */
.ld-activity-icon::before {
font-size: 12px;
color: rgba(255,255,255,0.9);
/* font-family controlled by global-font.css */
}
.ld-activity-icon.icon-calendar::before { content: '◉'; color: var(--cyan); }
.ld-activity-icon.icon-check::before { content: '✓'; color: #7ee0b8; }
.ld-activity-icon.icon-location::before { content: '◎'; color: var(--pink); }
.ld-activity-icon.icon-star::before { content: '★'; color: #ffc37a; }
.ld-activity-icon.icon-cart::before { content: '$'; color: #7ee0b8; }
.ld-activity-icon.icon-gift::before { content: '✦'; color: var(--pink); }
.ld-activity-icon.icon-message::before { content: '●'; color: var(--cyan); }
.ld-activity-icon.icon-gamepad::before { content: '▶'; color: #d8b4ff; }
.ld-activity-icon.icon-trophy::before { content: '▲'; color: #ffc37a; }
.ld-activity-icon.icon-activity::before { content: '•'; color: rgba(255,255,255,0.7); }
.ld-activity-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ld-activity-text {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.95);
line-height: 1.3;
/* font-family controlled by global-font.css */
}
.ld-activity-time {
font-size: 0.7rem;
color: rgba(255,255,255,0.5);
/* font-family controlled by global-font.css */
}
/* Tile gradient variants (per-tile) — exact color stops, no overlays */
.tile-grad-9{
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(255,255,255,0.1),
0 8px 32px rgba(0,0,0,0.2);
} /* glass effect */
.tile-grad-1{background: linear-gradient(90deg, #9BE2F2 0%, #E899F2 100%);} /* blue -> pink */
.tile-grad-2{background: linear-gradient(90deg, #6D33A6 0%, #262626 100%);} /* purple -> 262626 */
.tile-grad-3{background: linear-gradient(90deg, #FF9A3D 0%, #E53935 100%);} /* orange -> red */
.tile-grad-4{background: linear-gradient(90deg, #2ECC71 0%, #0D1F3A 100%);} /* green -> navy */
.tile-grad-5{background: linear-gradient(90deg, #7FD1FF 0%, #58A6FF 100%);} /* mint -> blue */
.tile-grad-6{background: linear-gradient(90deg, #D8B4FF 0%, #FF7ACD 100%);} /* lavender -> magenta */
.tile-grad-7{background: linear-gradient(90deg, #FFC37A 0%, #FF6B35 100%);} /* amber -> orange */
.tile-grad-8{background: linear-gradient(90deg, #7EE0B8 0%, #163B72 100%);} /* mint -> navy */
/* Ensure per-tile gradients are not affected by positioning or repeat rules */
.ld-tile.tile-grad-9, .ld-tile.tile-grad-1, .ld-tile.tile-grad-2, .ld-tile.tile-grad-3, .ld-tile.tile-grad-4,
.ld-tile.tile-grad-5, .ld-tile.tile-grad-6, .ld-tile.tile-grad-7, .ld-tile.tile-grad-8 {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* When certain light gradients are active, use dark text for better contrast */
.ld-tile.tile-grad-0,
.ld-tile.tile-grad-0 .ld-num,
.ld-tile.tile-grad-0 .ld-sub,
.ld-tile.tile-grad-0 .ld-title,
.ld-tile.tile-grad-0 .ld-line,
.ld-tile.tile-grad-0 .tile-menu-btn {
color: rgba(255,255,255,0.95);
}
.ld-tile.tile-grad-1,
.ld-tile.tile-grad-1 .ld-num,
.ld-tile.tile-grad-1 .ld-sub,
.ld-tile.tile-grad-1 .ld-title,
.ld-tile.tile-grad-1 .ld-line,
.ld-tile.tile-grad-1 .tile-menu-btn,
.ld-tile.tile-grad-5,
.ld-tile.tile-grad-5 .ld-num,
.ld-tile.tile-grad-5 .ld-sub,
.ld-tile.tile-grad-5 .ld-title,
.ld-tile.tile-grad-5 .ld-line,
.ld-tile.tile-grad-5 .tile-menu-btn,
.ld-tile.tile-grad-6,
.ld-tile.tile-grad-6 .ld-num,
.ld-tile.tile-grad-6 .ld-sub,
.ld-tile.tile-grad-6 .ld-title,
.ld-tile.tile-grad-6 .ld-line,
.ld-tile.tile-grad-6 .tile-menu-btn {
color: #262626;
}
/* Small color preview on the color button to match tile gradient */
.ld-tile.tile-grad-1 .tile-color-btn{background: linear-gradient(90deg, #f2f2f2 0%, #9BE2F2 100%); color:var(--ink)}
.ld-tile.tile-grad-1 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-2 .tile-color-btn{background: linear-gradient(90deg, #E899F2 0%, #6D33A6 100%); color:var(--ink)}
.ld-tile.tile-grad-2 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-3 .tile-color-btn{background: linear-gradient(90deg, #FF9A3D 0%, #E53935 100%); color:var(--ink)}
.ld-tile.tile-grad-3 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-4 .tile-color-btn{background: linear-gradient(90deg, #2ECC71 0%, #0D1F3A 100%); color:var(--ink)}
.ld-tile.tile-grad-4 .tile-color-btn:hover{color:var(--white)}
/* Previews for new gradients */
.ld-tile.tile-grad-5 .tile-color-btn{background: linear-gradient(90deg, #7FD1FF 0%, #58A6FF 100%); color:var(--ink)}
.ld-tile.tile-grad-5 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-6 .tile-color-btn{background: linear-gradient(90deg, #D8B4FF 0%, #FF7ACD 100%); color:var(--ink)}
.ld-tile.tile-grad-6 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-7 .tile-color-btn{background: linear-gradient(90deg, #FFC37A 0%, #FF6B35 100%); color:var(--ink)}
.ld-tile.tile-grad-7 .tile-color-btn:hover{color:var(--white)}
.ld-tile.tile-grad-8 .tile-color-btn{background: linear-gradient(90deg, #7EE0B8 0%, #163B72 100%); color:var(--ink)}
.ld-tile.tile-grad-8 .tile-color-btn:hover{color:var(--white)}
/* Responsive: disable custom spans on smaller viewports */
@media (max-width: 980px){
.ld-tiles{grid-template-columns: repeat(6, 1fr);} /* stack more naturally */
.ld-tile{grid-column: span 6 !important}
}
/* Divide gradient evenly across tiles */
/* Removed old nth-child background-position rules to avoid interfering with explicit per-tile gradients */
.ld-tile:hover {
transform: translateY(-2px);
outline-color: rgba(232,153,242,0.22);
box-shadow: 0 8px 28px rgba(232,153,242,0.18);
}
/* ========== NEW: DRAGGABLE TILE RESIZING MODE ========== */
.ld-tile.tile-resize-mode {
position: relative;
overflow: visible;
/* Custom resize handles - don't use native CSS resize */
outline: 1px solid var(--pink);
outline-offset: -1px;
}
/* Resize handles - draggable edges and corners */
.resize-handle {
position: absolute;
background: transparent;
border: 1px solid var(--pink);
z-index: 9999;
transition: background-color 0.2s ease;
}
.resize-handle:hover {
background: rgba(232,153,242,0.25);
}
/* Ensure tiles in resize mode and their controls are always on top */
.tile-resize-mode {
z-index: 999;
position: relative;
}
.tile-resize-buttons {
z-index: 10000;
}
/* Edge handles */
.resize-handle-n, .resize-handle-s {
left: 10%;
right: 10%;
height: 6px;
border-left: none;
border-right: none;
}
.resize-handle-n {
top: -1px;
border-bottom: none;
}
.resize-handle-s {
bottom: -1px;
border-top: none;
}
.resize-handle-e, .resize-handle-w {
top: 10%;
bottom: 10%;
width: 6px;
border-top: none;
border-bottom: none;
}
.resize-handle-e {
right: -1px;
border-left: none;
}
.resize-handle-w {
left: -1px;
border-right: none;
}
/* Corner handles */
.resize-handle-ne, .resize-handle-nw, .resize-handle-se, .resize-handle-sw {
width: 12px;
height: 12px;
border-radius: 2px;
}
.resize-handle-ne {
top: -1px;
right: -1px;
border-left: none;
border-bottom: none;
}
.resize-handle-nw {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}
.resize-handle-se {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}
.resize-handle-sw {
bottom: -1px;
left: -1px;
border-right: none;
border-top: none;
}
/* Prevent invisible overlays from eating clicks (defensive) */
.resize-overlay,
.grid-overlay,
.drag-overlay {
pointer-events: none !important;
}
/* Save/Cancel buttons during resize */
.tile-resize-buttons {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 6px;
z-index: 101;
}
.resize-cancel-btn, .resize-save-btn {
padding: 6px 12px;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.resize-cancel-btn {
background: rgba(255,255,255,0.1);
color: var(--white);
border: 1px solid rgba(255,255,255,0.2);
}
.resize-cancel-btn:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.3);
}
.resize-save-btn {
background: linear-gradient(90deg, var(--cyan), var(--pink));
color: var(--ink);
border: none;
}
.resize-save-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(155,226,242,0.3);
}
/* Body cursor during resize */
body.ld-resizing {
cursor: ew-resize;
user-select: none;
}
/* Flash animation when tiles are added in batch */
.added-flash {
animation: addedFlash 1.2s ease forwards;
}
@keyframes addedFlash {
0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.0); transform: translateY(0); }
10% { box-shadow: 0 8px 22px rgba(40,167,69,0.18); transform: translateY(-4px); }
60% { box-shadow: 0 8px 22px rgba(40,167,69,0.08); transform: translateY(-2px); }
100% { box-shadow: 0 6px 16px rgba(40,167,69,0.0); transform: translateY(0); }
}
/* Simple toast for confirmations */
.ld-toast {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(38,38,38,0.96);
color: #fff;
padding: 12px 18px;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0,0,0,0.28);
opacity: 0;
transition: opacity 260ms ease, transform 260ms ease;
z-index: 12000;
font-weight: 600;
min-width: 160px;
text-align: center;
}
.ld-toast.visible { opacity: 1; transform: translate(-50%, -56%); }
/* visual hint when a tile is being refreshed */
.ld-tile.tile-refreshing { opacity: 0.6; transition: opacity 0.45s ease; }
.ld-tile .ld-kicker{font-size:.78rem;letter-spacing:.02em;opacity:.85;display:inline-flex;align-items:center;gap:8px}
.tile-metric{width:auto;max-width:140px;background:transparent;color:#fff;border:none;/* font-weight controlled by global-font.css */font-size:var(--fs-sm);display:inline-block}
.tile-metric:focus{outline:none}
.tile-controls{position:absolute;top:8px;right:8px;z-index:20;opacity:1}
.ld-tile .ld-num {
display: block;
margin-top: 6px;
font-weight: 500;
font-size: var(--fs-xl);
}
.ld-tile .ld-sub {
font-size: var(--fs-xs);
opacity: 0.85;
}
/* Tile heading and inline data lines */
.ld-title {
font-weight: 500;
font-size: 0.95rem;
margin-top: 4px;
margin-bottom: 6px;
color: rgba(255,255,255,0.95);
}
.ld-line:nth-child(n) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Rewards thumbnail grid */
.rewards-thumbnails {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 8px;
padding: 4px 0;
}
.reward-thumb {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
transition: transform 0.2s ease;
cursor: pointer;
}
.reward-thumb:hover {
transform: scale(1.05);
}
.reward-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reward-thumb.img-error {
background: rgba(255, 255, 255, 0.15);
}
.reward-thumb.img-error::before {
content: '🎁';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
opacity: 0.6;
}
.reward-thumb.no-image {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.reward-thumb .placeholder-icon {
font-size: 28px;
opacity: 0.7;
}
/* Widgets grid */
.ld-widgets {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 14px;
}
.ld-ghost-wrapper {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
}
.ld-ghost {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
/* Half width × 2/3 height of default tile (~160px × 107px) */
width: 160px;
height: 107px;
border: 2px dashed rgba(255,255,255,0.15);
background: rgba(13,13,13,0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: rgba(255,255,255,0.85);
border-radius: var(--radius-md);
cursor: pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.ld-ghost:hover {
transform: translateY(-3px);
background: rgba(13,13,13,0.95);
border-color: rgba(155,226,242,0.3);
box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.ld-ghost-icon {
font-size: 32px;
/* font-weight controlled by global-font.css */
line-height: 1;
}
.ld-ghost-label {
font-size: 0.85rem;
/* font-weight controlled by global-font.css */
}
/* Responsive: smaller ghost button on mobile */
@media (max-width: 640px) {
.ld-ghost-wrapper {
bottom: 16px;
right: 16px;
}
.ld-ghost {
width: 70px;
height: 70px;
}
.ld-ghost-icon {
font-size: 20px;
}
.ld-ghost-label {
font-size: 0.6rem;
}
}
.ld-add-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
background: var(--ink-2);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
box-shadow: var(--shadow-2);
min-width: 220px;
z-index: 1000;
overflow: hidden;
}
.ld-add-menu[aria-hidden="false"] {
display: block;
}
.ld-add-menu-header {
padding: 10px 12px;
font-weight: 500;
font-size: 0.95rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.92);
}
.ld-add-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
color: rgba(255,255,255,0.85);
text-align: left;
cursor: pointer;
transition: background .15s ease, color .15s ease;
font-size: 0.95rem;
}
.ld-add-item:hover {
background: rgba(255,255,255,0.05);
color: #fff;
}
.ld-add-item[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.ld-widget {
background: rgba(255,255,255,0.04);
border-radius: var(--radius-md);
padding: 16px;
box-shadow: var(--shadow-2);
outline: 1px solid rgba(255,255,255,0.06);
}
.ld-widget h3 {
margin: 0 0 12px;
font-size: var(--fs-sm);
font-weight: 600;
color: rgba(255,255,255,0.92);
}
.ld-widget .ld-list {
margin: 0; padding: 0; list-style: none;
}
.ld-widget .ld-list li {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 8px;
border-bottom: 1px dashed rgba(255,255,255,0.10);
color: rgba(255,255,255,0.88);
}
.ld-widget .ld-list li:last-child { border-bottom: 0; }
.ld-muted { color: rgba(255,255,255,0.70); }
/* Off-canvas behavior for narrow screens */
@media (max-width: 980px) {
.loyalty-dashboard {
grid-template-columns: 1fr; /* main content spans */
}
.ld-sidebar {
position: fixed;
left: 0; top: 0; bottom: 0;
width: 84%;
max-width: 340px;
transform: translateX(-100%);
transition: transform .28s ease;
border-right: 1px solid rgba(255,255,255,0.12);
}
.ld-sidebar.open { transform: translateX(0); }
.ld-mobile-toggle { display: block; }
.ld-main {
margin-left: 0;
padding: 16px;
padding-top: 76px;
height: calc(100vh - 76px);
}
.ld-header { left: 0; right: 0; }
.ld-tiles {
grid-template-columns: repeat(2, 1fr);
}
.ld-widgets {
grid-template-columns: 1fr;
}
/* Floating toggle button to open sidebar */
.ld-fab {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
background: linear-gradient(135deg, var(--pink), var(--cyan));
color: var(--ink);
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
cursor: pointer;
font-weight: 500;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s ease, box-shadow .15s ease;
}
.ld-fab:hover {
transform: scale(1.05);
box-shadow: 0 12px 32px rgba(232,153,242,0.4);
}
.ld-fab:active {
transform: scale(0.98);
}
}
/* Drag placeholder used during tile re-ordering */
.ld-tile.placeholder {
border: 2px dashed rgba(255,255,255,0.08);
background: rgba(255,255,255,0.01);
opacity: 0.9;
box-shadow: none;
/* Height controlled by grid-row span, no min-height */
pointer-events: none;
}
/* Floating ghost used during pointer drag */
.drag-ghost { opacity: 0.92; transform: translateZ(0); box-shadow: 0 10px 30px rgba(0,0,0,0.35); pointer-events: none; user-select: none; }
.ld-tile { user-select: none; }
.ld-tile.dragging { opacity: 0.4; }
body.dragging-tile, body.dragging-tile * { cursor: grabbing !important; user-select: none !important; }
/* Progressive loading priority: show header/sidebar first
NOTE: in local/dev we avoid hiding the entire page during the brief JS-driven
startup window — this prevents a large empty/black box appearing on refresh.
*/
body.loading *:not(.ld-sidebar):not(.ld-header) { visibility: visible; }
body.ready * { visibility: visible; }
/* Widget fade-in support */
.ld-widget { opacity: 0; transition: opacity .4s ease; }
.ld-widget.loaded { opacity: 1; }
/* Light mode removed: theme toggle and light-mode overrides have been eliminated */
/* =========================================================
EDIT PROFILE PAGE — UNIVERSAL FORM STYLING
========================================================= */
.edit-wrap {
display: flex;
flex-wrap: wrap;
gap: 32px;
max-width: 820px;
width: 90%;
margin: 60px auto;
background: rgba(255,255,255,0.04);
padding: 32px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
outline: 1px solid rgba(255,255,255,0.08);
}
.edit-left {
flex: 0 0 200px;
text-align: center;
}
.edit-left img {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255,255,255,0.08);
}
.change-photo {
display: block;
margin-top: 10px;
color: var(--cyan);
font-size: 0.9rem;
text-decoration: none;
}
.change-photo:hover { text-decoration: underline; }
.edit-right {
flex: 1 1 400px;
min-width: 260px;
}
.edit-right form label {
display: block;
font-size: 0.9rem;
margin-top: 14px;
color: rgba(255,255,255,0.85);
}
.edit-right form input,
.edit-right form select,
.edit-right form textarea {
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 0.95rem;
}
.edit-right form input:focus,
.edit-right form select:focus,
.edit-right form textarea:focus {
outline: none;
border-color: var(--cyan);
}
.save-row {
text-align: right;
margin-top: 24px;
}
button.save-btn {
background: linear-gradient(90deg, var(--pink), var(--cyan));
border: none;
padding: 12px 24px;
color: #fff;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: opacity .2s;
}
button.save-btn:hover { opacity: .9; }
.cancel-btn {
display: inline-block;
margin-right: 10px;
padding: 10px 16px;
color: rgba(255,255,255,0.9);
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
text-decoration: none;
}
.cancel-btn:hover { opacity: .95; }
@media(max-width:700px){
.edit-wrap { flex-direction: column; align-items: center; padding: 24px; }
.edit-left { margin-bottom: 12px; }
.edit-right { width: 100%; }
}
/* =========================================================
PAGE VIEWS BELOW PROGRESS: HEADERS, FILTERS, TABLES
========================================================= */
.ld-page { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 14px; }
.ld-page + .ld-page { margin-top: 16px; }
.ld-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.ld-page-title { font-weight: 500; font-size: 1.05rem; color: rgba(255,255,255,0.96); }
/* Filters */
.ld-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.ld-filters .field { display:flex; flex-direction:column; gap:6px; }
.ld-filters label { font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.ld-filters input[type="date"] {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
padding: 8px 10px;
border-radius: 8px;
}
.ld-filters button {
padding: 9px 14px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(90deg, rgba(232,153,242,0.18), rgba(155,226,242,0.14));
color: #fff;
cursor: pointer;
}
.ld-filters button:hover { filter: brightness(1.05); }
/* Tables */
.ld-table-wrap { width: 100%; overflow:auto; border-radius: 10px; outline: 1px solid rgba(255,255,255,0.06); }
table.ld-table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(255,255,255,0.02); }
table.ld-table thead th { position: sticky; top: 0; background: rgba(255,255,255,0.06); color: #fff; font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
table.ld-table thead th.sorted-asc::after { content: " \25B2"; } /* ▲ */
table.ld-table thead th.sorted-desc::after { content: " \25BC"; } /* ▼ */
table.ld-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
table.ld-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.02); }
table.ld-table tbody tr:hover td { background: rgba(255,255,255,0.04); }
/* Compact variants */
.ld-table.compact thead th, .ld-table.compact tbody td { padding: 8px 10px; }
/* Content sections below tiles */
.ld-content-section {
margin-top: 32px;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ld-content-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 24px;
box-shadow: var(--shadow-1);
}
.ld-content-card h2 {
margin: 0 0 12px 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--white);
}
.ld-content-card p {
margin: 0;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
/* Profile Edit Page */
.ld-profile-edit {
max-width: 1000px;
}
.ld-profile-sections {
display: flex;
flex-direction: column;
gap: 24px;
}
.ld-profile-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 24px;
}
.ld-profile-section h3 {
margin: 0 0 20px 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--white);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 12px;
}
.ld-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.ld-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.ld-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.ld-form-group label {
font-weight: 600;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
}
.ld-form-group input[type="text"],
.ld-form-group input[type="email"],
.ld-form-group input[type="tel"],
.ld-form-group input[type="date"],
.ld-form-group input[type="password"],
.ld-form-group input[type="file"] {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: var(--white);
font-size: 0.95rem;
transition: border-color 0.2s, background 0.2s;
}
.ld-form-group input:focus {
outline: none;
border-color: var(--cyan);
background: rgba(255, 255, 255, 0.06);
}
.ld-form-group input.ld-input-disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.02);
}
.ld-form-static {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
}
.ld-form-help {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
font-style: italic;
}
.ld-form-actions {
display: flex;
gap: 12px;
align-items: center;
}
.ld-btn {
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.ld-btn-primary {
background: linear-gradient(180deg, var(--cyan), var(--pink));
color: var(--ink);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
}
.ld-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(232, 153, 242, 0.3);
}
.ld-btn-secondary {
background: linear-gradient(180deg, var(--cyan), var(--pink));
color: var(--ink);
border: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.32);
transition: transform 80ms ease, box-shadow 120ms ease;
}
.ld-btn-secondary:hover {
box-shadow: 0 0 16px var(--pink);
transform: translateY(-1px);
}
.ld-btn-ghost {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.ld-btn-ghost:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.12);
}
.ld-avatar-preview {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.ld-avatar-large {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, 0.12);
}
.ld-alert {
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: 600;
}
/* Notification Center: temporal grouping styles */
.notif-group{margin-bottom:28px}
.notif-group-title{font-size:var(--fs-base);font-weight:600;color:rgba(255,255,255,0.9);margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ld-notifications-list{list-style:none;padding:0;margin:0}
.ld-notifications-list .ld-list-item{background:rgba(255,255,255,0.02);border-radius:10px;padding:12px 14px;margin-bottom:8px;transition:background .15s ease}
.ld-notifications-list .ld-list-item:hover{background:rgba(255,255,255,0.04)}
.ld-notifications-list .ld-list-item.unread{background:linear-gradient(90deg, rgba(232,153,242,0.08), rgba(155,226,242,0.04))}
.ld-notifications-list .ld-list-item.priority-high{border-left:3px solid #e63946}
.ld-notifications-list .ld-list-item.priority-medium{border-left:3px solid #ffc857}
.ld-notifications-list .ld-list-item.priority-low{border-left:3px solid #9BE2F2}
.ld-empty{text-align:center;padding:40px 20px;color:rgba(255,255,255,0.5);opacity:0.6;font-size:0.85rem}
/* === Utility Classes for JS Inline Style Removal === */
.hidden { display: none !important; }
/* Notification dismissal animation */
.notification-dismissed {
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Notification flash/highlight */
.notification-flash {
background: rgba(155,226,242,0.2) !important;
transition: background 0.3s ease;
}
/* Achievement progress bar - width set by JS via data attribute */
.progress-fill {
transition: width 0.5s ease;
}
/* Expired reward indication */
.expired {
color: #ef4444 !important;
}
/* === End Utility Classes === */
.ld-alert-error {
background: rgba(230, 57, 70, 0.15);
border: 1px solid rgba(230, 57, 70, 0.3);
color: #ff8a8a;
}
.ld-alert-success {
background: rgba(40, 167, 69, 0.15);
border: 1px solid rgba(40, 167, 69, 0.3);
color: #9ef5c3;
}
/* Error message */
.ld-error {
padding: 16px;
background: rgba(230, 57, 70, 0.1);
border: 1px solid rgba(230, 57, 70, 0.3);
border-radius: var(--radius-md);
color: #ff8a8a;
text-align: center;
font-weight: 600;
}
/* ============================================
FB-LITE Friends Panel (Phase 2A - skeleton)
============================================ */
#friends-panel {
position: fixed;
top: 0;
right: 0;
width: min(30vw, 380px);
min-width: 260px;
height: 100vh;
background: rgba(9, 10, 15, 0.98);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
transition: transform 0.25s ease-out, opacity 0.2s ease-out;
opacity: 0;
z-index: 1300; /* higher than dashboard content but below any global overlays */
color: #fff;
}
#friends-panel.is-open {
transform: translateX(0);
opacity: 1;
}
.friends-panel-inner {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 1rem 1.25rem;
height: 100%;
overflow-y: auto;
z-index: 1300;
scrollbar-width: thin;
}
.friends-panel-section {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 1px;
margin-bottom: 0;
}
.friends-panel-section:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.friends-panel-section .section-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
transition: opacity 0.2s ease;
margin-bottom: 0.1rem;
padding: 0.1rem 0 0.1rem 0;
margin-top: 0.1rem;
}
.friends-panel-section .section-header:hover {
opacity: 0.8;
}
.friends-panel-section .section-header h3 {
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
margin: 0;
flex: 1;
}
.section-caret {
flex-shrink: 0;
color: rgba(155, 212, 255, 0.7);
transition: transform 0.25s ease;
margin-left: 0.5rem;
}
.friends-panel-section.is-expanded .section-caret {
transform: rotate(0deg);
}
.friends-panel-section.is-collapsed .section-caret {
transform: rotate(-90deg);
}
.friends-panel-section .section-body {
overflow: visible;
transition: max-height 0.3s ease-out, opacity 0.25s ease;
max-height: 2000px;
opacity: 1;
}
.friends-panel-section.is-collapsed .section-body {
max-height: 0;
opacity: 0;
}
.friends-panel-section .section-footer {
margin-top: 0.1rem;
transition: opacity 0.25s ease;
}
.friends-panel-section.is-collapsed .section-footer {
display: none;
}
.friends-empty-state {
font-size: 0.8rem;
opacity: 0.7;
margin: 0.1rem 0;
padding: 0.1rem 0;
}
.friend-row {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0;
}
.friend-avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
.friend-main {
flex: 1;
min-width: 0;
}
.friend-name {
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.friend-actions {
display: flex;
align-items: center;
gap: 0.25rem;
}
.friends-panel .icon-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 0.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.85;
color: inherit;
}
.friends-panel .icon-btn:disabled {
opacity: 0.4;
cursor: default;
}
.friends-view-all-btn {
margin-top: 0;
font-size: 0.8rem;
background: transparent;
border: none;
color: #9bd4ff;
cursor: pointer;
padding: 0.1rem 0;
text-decoration: underline;
text-underline-offset: 2px;
}
.friends-view-all-btn:disabled {
opacity: 0.5;
cursor: default;
}
/* ========================================
FB-LITE: Phase 3A - Two-Tab Panel (Messages + Friends)
======================================== */
/* Tab Bar */
.panel-tab-bar {
display: flex;
border-bottom: 1px solid rgba(155, 212, 255, 0.2);
margin-bottom: 0.5rem;
}
.panel-tab {
flex: 1;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
padding: 0.6rem 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.85rem;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
position: relative;
top: 1px;
}
.panel-tab:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(155, 212, 255, 0.05);
}
.panel-tab.active {
color: #9bd4ff;
border-bottom-color: #9bd4ff;
}
.panel-tab svg {
width: 16px;
height: 16px;
}
/* Panel Content Wrappers */
.panel-content-wrapper {
height: 100%;
overflow: hidden;
}
.panel-content-wrapper[data-panel-mode="friends"] {
overflow-y: auto;
}
/* ========================================
Messages: Thread List (Inbox)
======================================== */
.messages-thread-list {
height: 100%;
overflow-y: auto;
}
.thread-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.8rem;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.2s ease;
}
.thread-row:hover {
background: rgba(155, 212, 255, 0.08);
}
.thread-row.unread {
background: rgba(155, 212, 255, 0.05);
}
.thread-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(155, 212, 255, 0.2);
overflow: hidden;
flex-shrink: 0;
}
.thread-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thread-main {
flex: 1;
min-width: 0;
}
.thread-name {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thread-row.unread .thread-name {
font-weight: 600;
color: #9bd4ff;
}
.thread-snippet {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thread-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
flex-shrink: 0;
}
.thread-timestamp {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
}
.thread-unread-badge {
background: #9bd4ff;
color: #090a0f;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
/* ========================================
Messages: Conversation View (Slide-in)
======================================== */
.messages-conversation-view {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(9, 10, 15, 0.98);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s ease-out;
z-index: 10;
}
.messages-conversation-view.active {
transform: translateX(0);
}
/* Conversation Header */
.conversation-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.8rem;
border-bottom: 1px solid rgba(155, 212, 255, 0.2);
flex-shrink: 0;
}
.conversation-back-btn {
background: transparent;
border: none;
color: #9bd4ff;
cursor: pointer;
padding: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.conversation-back-btn:hover {
opacity: 0.7;
}
.conversation-partner-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.conversation-partner-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(155, 212, 255, 0.2);
overflow: hidden;
flex-shrink: 0;
}
.conversation-partner-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.conversation-partner-name {
font-size: 0.9rem;
font-weight: 600;
color: #9bd4ff;
}
/* Conversation Messages Area */
.conversation-messages {
flex: 1;
overflow-y: auto;
padding: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.message-bubble {
display: flex;
gap: 0.5rem;
max-width: 85%;
animation: messageFadeIn 0.2s ease;
}
@keyframes messageFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message-bubble.sent {
align-self: flex-end;
flex-direction: row-reverse;
}
.message-bubble.received {
align-self: flex-start;
}
.message-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(155, 212, 255, 0.2);
overflow: hidden;
flex-shrink: 0;
}
.message-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-content {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.message-text {
background: rgba(155, 212, 255, 0.15);
padding: 0.5rem 0.7rem;
border-radius: 12px;
font-size: 0.85rem;
line-height: 1.4;
word-wrap: break-word;
}
.message-bubble.sent .message-text {
background: rgba(155, 212, 255, 0.25);
border-bottom-right-radius: 4px;
}
.message-bubble.received .message-text {
border-bottom-left-radius: 4px;
}
.message-timestamp {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
padding: 0 0.3rem;
}
.message-bubble.sent .message-timestamp {
text-align: right;
}
/* Conversation Composer */
.conversation-composer {
display: flex;
align-items: flex-end;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-top: 1px solid rgba(155, 212, 255, 0.2);
background: rgba(9, 10, 15, 0.95);
flex-shrink: 0;
}
.conversation-composer textarea {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(155, 212, 255, 0.3);
color: #fff;
padding: 0.5rem;
border-radius: 6px;
font-size: 0.85rem;
font-family: inherit;
resize: none;
max-height: 100px;
overflow-y: auto;
}
.conversation-composer textarea:focus {
outline: none;
border-color: #9bd4ff;
background: rgba(255, 255, 255, 0.08);
}
.conversation-send-btn {
background: #9bd4ff;
border: none;
color: #090a0f;
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.conversation-send-btn:hover {
background: #b3e0ff;
transform: scale(1.05);
}
.conversation-send-btn:active {
transform: scale(0.95);
}
.conversation-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ========================================
FB-LITE: Phase 2B - Loading, Error & Interactive States
======================================== */
/* Loading State */
.friends-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
.friends-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(155, 212, 255, 0.3);
border-top-color: #9bd4ff;
border-radius: 50%;
animation: friends-spin 0.8s linear infinite;
margin-bottom: 0.3rem;
}
@keyframes friends-spin {
to { transform: rotate(360deg); }
}
/* Error State */
.friends-error-state {
padding: 0.1rem;
text-align: center;
}
.friends-error-state .error-message {
color: #ff6b6b;
font-size: 0.9rem;
margin: 0.1rem 0;
}
.friends-retry-btn {
background: rgba(155, 212, 255, 0.1);
border: 1px solid #9bd4ff;
color: #9bd4ff;
padding: 0.4rem 1rem;
margin-top: 0.4rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.2s ease;
}
.friends-retry-btn:hover {
background: rgba(155, 212, 255, 0.2);
}
/* Friend Row Interactive States */
.friend-row {
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
}
.friend-row:hover {
background-color: rgba(155, 212, 255, 0.05);
}
.friend-row .friend-name {
cursor: pointer;
transition: color 0.2s ease;
}
.friend-row .friend-name:hover {
color: #9bd4ff;
}
/* Action Buttons */
.friend-accept-btn,
.friend-decline-btn,
.friend-add-btn,
.friend-message-btn,
.friend-remove-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease, transform 0.1s ease;
color: inherit;
}
.friend-accept-btn {
color: #51cf66;
}
.friend-decline-btn {
color: #ff6b6b;
}
.friend-add-btn {
color: #9bd4ff;
}
.friend-message-btn {
color: #9bd4ff;
opacity: 0.8;
}
.friend-remove-btn {
color: #ff6b6b;
opacity: 0.7;
}
.friend-accept-btn:hover,
.friend-decline-btn:hover,
.friend-add-btn:hover,
.friend-message-btn:hover,
.friend-remove-btn:hover {
opacity: 1;
transform: scale(1.1);
}
.friend-accept-btn:active,
.friend-decline-btn:active,
.friend-add-btn:active,
.friend-message-btn:active,
.friend-remove-btn:active {
transform: scale(0.95);
}
/* Pending/Status Badges */
.friend-pending-badge,
.search-friend-badge,
.search-pending-badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 3px;
background: rgba(155, 212, 255, 0.2);
color: #9bd4ff;
border: 1px solid rgba(155, 212, 255, 0.3);
}
.search-friend-badge {
background: rgba(81, 207, 102, 0.2);
color: #51cf66;
border-color: rgba(81, 207, 102, 0.3);
}
/* Friend Meta Info */
.friend-meta {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 0.1rem;
line-height: 1.1;
}
/* Birthday specific styles */
.birthday-row .friend-birthday-date {
color: #ffd43b;
font-weight: 500;
}
/* Avatar images */
.friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ========================================
FB-LITE: Search People Results (Phase 2B)
======================================== */
.search-people-section {
border-top: 1px solid rgba(155, 212, 255, 0.15);
padding-top: 0.5rem;
margin-top: 0.5rem;
}
.search-people-section-header {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 0.5rem;
padding: 0 0.75rem;
}
.search-person-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-person-row:hover {
background-color: rgba(155, 212, 255, 0.08);
}
.search-person-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(155, 212, 255, 0.1);
}
.search-person-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.search-person-main {
flex: 1;
min-width: 0;
}
.search-person-name {
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-person-username {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 0.1rem;
}
.search-person-action {
flex-shrink: 0;
}
.search-add-btn {
background: rgba(155, 212, 255, 0.15);
border: 1px solid rgba(155, 212, 255, 0.3);
color: #9bd4ff;
padding: 0.3rem 0.6rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.search-add-btn:hover {
background: rgba(155, 212, 255, 0.25);
transform: scale(1.05);
}
.search-add-btn svg {
width: 14px;
height: 14px;
}
/* ========================================
ACHIEVEMENTS PANEL & TILE STYLES
Phase 4 - FB-lite Migration
======================================== */
/* Side Panel Base */
.side-panel {
position: fixed;
top: 0;
right: -450px;
width: 450px;
height: 100vh;
background: var(--ink-2);
border-left: 1px solid rgba(255,255,255,0.06);
box-shadow: -4px 0 20px rgba(0,0,0,0.5);
z-index: 1000;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.side-panel.panel-open {
right: 0;
}
.panel-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
body.panel-active .panel-backdrop {
opacity: 1;
pointer-events: auto;
}
/* Panel Header */
.side-panel .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(109, 51, 166, 0.1);
}
.side-panel .panel-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--pink);
display: flex;
align-items: center;
gap: 12px;
}
.side-panel .panel-header h2 svg {
color: #f59e0b;
}
.panel-close-btn {
background: none;
border: none;
color: rgba(255,255,255,0.7);
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.panel-close-btn:hover {
background: rgba(255,255,255,0.1);
color: white;
}
/* Panel Stats */
.panel-stats {
display: flex;
gap: 16px;
padding: 16px 24px;
background: rgba(109, 51, 166, 0.05);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.panel-stats .stat-badge {
flex: 1;
text-align: center;
padding: 12px;
background: rgba(232, 153, 242, 0.1);
border: 1px solid rgba(232, 153, 242, 0.2);
border-radius: 8px;
}
.panel-stats .stat-badge .label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.6);
margin-bottom: 4px;
}
.panel-stats .stat-badge .value {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--pink);
}
/* Panel Filters */
.panel-filters {
display: flex;
gap: 8px;
padding: 16px 24px;
border-bottom: 1px solid rgba(255,255,255,0.06);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.panel-filters::-webkit-scrollbar {
height: 4px;
}
.panel-filters::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2px;
}
.filter-btn {
padding: 8px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
color: rgba(255,255,255,0.7);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.filter-btn:hover {
background: rgba(255,255,255,0.1);
color: white;
}
.filter-btn.active {
background: var(--purple);
border-color: var(--pink);
color: white;
box-shadow: 0 0 12px rgba(232, 153, 242, 0.3);
}
/* Panel Content */
.panel-content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.panel-content::-webkit-scrollbar {
width: 8px;
}
.panel-content::-webkit-scrollbar-track {
background: rgba(0,0,0,0.2);
}
.panel-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 4px;
}
.panel-content::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
/* Achievements Grid */
.achievements-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.achievement-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.achievement-card.locked {
opacity: 0.6;
filter: grayscale(0.5);
}
.achievement-card.unlocked {
border-color: rgba(251, 191, 36, 0.3);
box-shadow: 0 0 20px rgba(251, 191, 36, 0.1);
}
.achievement-card.unlocked::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.achievement-card.rarity-uncommon.unlocked {
border-color: rgba(34, 197, 94, 0.3);
}
.achievement-card.rarity-rare.unlocked {
border-color: rgba(59, 130, 246, 0.3);
}
.achievement-card.rarity-legendary.unlocked {
border-color: rgba(168, 85, 247, 0.3);
box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}
.achievement-icon {
font-size: 40px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(251, 191, 36, 0.1);
border: 2px solid rgba(251, 191, 36, 0.3);
border-radius: 50%;
flex-shrink: 0;
}
.achievement-card.locked .achievement-icon {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
}
.achievement-info {
flex: 1;
min-width: 0;
}
.achievement-name {
font-size: 16px;
font-weight: 600;
color: white;
margin-bottom: 4px;
}
.achievement-desc {
font-size: 13px;
color: rgba(255,255,255,0.6);
line-height: 1.4;
margin-bottom: 8px;
}
.achievement-progress {
margin: 8px 0;
}
.achievement-progress .progress-bar {
width: 100%;
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 4px;
}
.achievement-progress .progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #2563eb);
border-radius: 3px;
transition: width 0.3s ease;
}
.achievement-progress .progress-text {
font-size: 11px;
color: rgba(255,255,255,0.5);
}
.achievement-points {
display: inline-block;
padding: 4px 12px;
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: #fbbf24;
}
.unlock-badge {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: #22c55e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
/* Loading & Error States */
.loading-spinner,
.error-message,
.empty-message {
text-align: center;
padding: 40px 20px;
color: rgba(255,255,255,0.6);
font-size: 14px;
}
.error-message {
color: #ef4444;
}
.empty-message {
color: rgba(255,255,255,0.5);
}
/* Mobile Responsive */
@media (max-width: 640px) {
.side-panel {
width: 100vw;
right: -100vw;
}
.achievements-grid {
gap: 12px;
}
.achievement-card {
padding: 12px;
gap: 12px;
}
.achievement-icon {
width: 48px;
height: 48px;
font-size: 32px;
}
}
/* ========== PHASE 2: SEARCH ENHANCEMENTS ========== */
/* Search dropdown (autocomplete) */
.search-dropdown {
position: fixed; /* Changed from absolute to escape header overflow */
/* top, left, width set dynamically by JS */
background: rgba(20, 20, 30, 0.98);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
max-height: 480px;
overflow-y: auto;
z-index: 15000; /* Above all dashboard layers (max is 12000) */
backdrop-filter: blur(12px);
}
/* Search result item */
.search-result-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.15s ease;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover,
.search-result-item.selected {
background: rgba(139, 92, 246, 0.15);
}
.search-result-icon {
font-size: 20px;
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
border-radius: 8px;
margin-top: 2px;
}
.search-result-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.search-result-title {
font-size: 15px;
font-weight: 600;
color: rgba(255,255,255,0.95);
line-height: 1.3;
}
.search-result-title strong {
color: #8b5cf6;
font-weight: 700;
background: rgba(139, 92, 246, 0.15);
padding: 0 2px;
border-radius: 2px;
}
.search-result-context {
font-size: 12px;
color: rgba(255,255,255,0.45);
font-weight: 400;
line-height: 1.2;
}
/* Home Depot style breadcrumb arrow */
.search-result-context::before {
content: '← ';
opacity: 0.6;
}
/* No results in dropdown */
.search-no-results-dropdown {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 20px;
text-align: center;
color: rgba(255,255,255,0.6);
}
.search-no-results-dropdown svg {
opacity: 0.3;
}
.search-no-results-dropdown p {
font-size: 14px;
margin: 0;
}
.search-no-results-dropdown strong {
color: rgba(255,255,255,0.9);
}
/* Search highlight pulse animation */
.search-highlight-pulse {
animation: searchHighlightPulse 2s ease-out;
scroll-margin-top: 80px;
}
@keyframes searchHighlightPulse {
0% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
background-color: rgba(139, 92, 246, 0.2);
}
10% {
box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
background-color: rgba(139, 92, 246, 0.25);
}
20% {
box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
background-color: rgba(139, 92, 246, 0.2);
}
30% {
box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
background-color: rgba(139, 92, 246, 0.25);
}
100% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
background-color: transparent;
}
}
/* Old search no results message (for tile filtering - deprecated) */
.search-no-results {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 60px 20px;
text-align: center;
color: rgba(255,255,255,0.6);
grid-column: 1 / -1;
}
.search-no-results svg {
opacity: 0.3;
}
.search-no-results p {
font-size: 16px;
margin: 0;
}
.search-no-results strong {
color: rgba(255,255,255,0.9);
}
.search-no-results small {
font-size: 13px;
opacity: 0.7;
}
/* Search highlight animation (deprecated) */
.search-match {
animation: search-pulse 0.4s ease-out;
}
@keyframes search-pulse {
0% {
transform: scale(1);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
50% {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}
100% {
transform: scale(1);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
}
/* ========== PHASE 2: PROFILE PAGE ENHANCEMENTS ========== */
/* Profile sections spacing */
.ld-profile-sections {
padding-bottom: 60px;
}
/* Danger zone styling */
.ld-profile-danger-zone {
border: 2px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.05);
}
.ld-danger-warning {
color: rgba(255,255,255,0.8);
padding: 12px 16px;
background: rgba(239, 68, 68, 0.1);
border-radius: 6px;
border-left: 3px solid #ef4444;
margin-bottom: 16px;
}
.ld-danger-warning strong {
color: #ef4444;
}
/* Danger button styling */
.ld-btn-danger {
background: #dc2626;
color: #fff;
border: 1px solid #b91c1c;
}
.ld-btn-danger:hover {
background: #b91c1c;
border-color: #991b1b;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.ld-btn-danger:active {
background: #991b1b;
transform: translateY(1px);
}
/* ========== PHASE 2: FRAGMENT PAGE ENHANCEMENTS ========== */
/* Page header with actions */
.ld-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.ld-page-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Icon buttons for table actions */
.ld-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: rgba(255,255,255,0.7);
cursor: pointer;
transition: all 0.2s ease;
}
.ld-btn-icon:hover {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
border-color: rgba(255,255,255,0.25);
}
.ld-btn-icon svg {
display: block;
}
/* Table actions column */
.table-actions {
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
}
/* Messages page - Conversations header with action buttons */
.ld-convos-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ld-convos-actions {
display: flex;
gap: 6px;
align-items: center;
}
/* ========== TILE GROUPING STYLES ========== */
/* Group selected button */
.ld-group-selected-btn {
background: rgba(155, 226, 242, 0.1);
border: 1px solid rgba(155, 226, 242, 0.3);
color: var(--cyan);
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}
.ld-group-selected-btn:hover:not(.disabled) {
background: rgba(155, 226, 242, 0.2);
border-color: rgba(155, 226, 242, 0.5);
box-shadow: 0 4px 12px rgba(155, 226, 242, 0.3);
}
.ld-group-selected-btn:active:not(.disabled) {
transform: translateY(1px);
}
.ld-group-selected-btn.disabled {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
/* =========================================================
GROUP WRAPPER STYLING
Groups tiles in a container with visible border
========================================================= */
/* Group wrapper container */
.ld-tile-group {
position: relative;
border: 3px solid var(--white, #ffffff);
border-radius: 12px;
padding: 5px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.05);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Subtle glow effect on hover in edit mode */
.edit-mode-active .ld-tile-group:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* Group wrapper during drag */
.ld-tile-group.dragging {
opacity: 0.9;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Ungroup button (shown only in edit mode) */
.tile-ungroup-btn {
position: absolute;
top: -8px;
right: -8px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid var(--cyan, #00b4d8);
color: var(--dark, #1a1a2e);
width: 24px;
height: 24px;
font-size: 12px;
font-weight: bold;
padding: 0;
border-radius: 50%;
cursor: pointer;
display: none; /* Hidden by default */
align-items: center;
justify-content: center;
z-index: 100;
transition: all 120ms ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.tile-ungroup-btn:hover {
background: var(--cyan, #00b4d8);
color: white;
transform: scale(1.1);
}
/* Show ungroup button in edit mode on group wrapper */
.edit-mode-active .ld-tile-group .tile-ungroup-btn {
display: flex;
}
/* Grouped tiles inside wrapper */
.tile-grouped {
/* Tiles inside group maintain their styling */
}
/* =========================================================
PHASE 2: 4-Segment Lane Progress Bar
========================================================= */
/* Segment container (replaces single progress bar when feature flag enabled) */
.ld-progress-segments {
/* inherits .ld-progress base styling */
}
.ld-segments-container {
display: flex;
gap: 12px;
width: 100%;
align-items: stretch;
}
.ld-segment {
position: relative;
flex: 1;
min-height: 32px;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ld-segment:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ld-segment-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(135deg, var(--cyan), var(--pink));
border-radius: var(--radius-sm);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
.ld-segment-fill.complete {
background: linear-gradient(135deg, #4ade80, #22c55e);
}
.ld-segment-label {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 8px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.ld-segment-name {
font-weight: 600;
font-size: 0.8rem;
margin-bottom: 2px;
}
.ld-segment-progress {
font-size: 0.7rem;
opacity: 0.8;
}
/* Mobile responsive: stack segments vertically on very small screens */
@media (max-width: 600px) {
.ld-segments-container {
flex-direction: column;
gap: 8px;
}
.ld-segment {
min-height: 48px;
}
.ld-segment-label {
flex-direction: row;
justify-content: space-between;
padding: 12px;
}
.ld-segment-name {
margin-bottom: 0;
}
}
/* Tablet: reduce segment height slightly */
@media (max-width: 960px) {
.ld-segment {
min-height: 28px;
}
.ld-segment-label {
font-size: 0.7rem;
}
}
/* =========================================================
PHASE 4: Top X% Label on Tier Badge
========================================================= */
/* Top X% rank label (appears between tier name and "pts to next tier") */
.ld-tier-rank {
margin: 4px 0 8px 0;
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.3px;
opacity: 0.8;
line-height: 1.3;
}
/* Subtle highlight on hover (optional, very light) */
.ld-progress-tier:hover .ld-tier-rank {
opacity: 0.9;
}
/* Mobile: slightly smaller on very small screens */
@media (max-width: 600px) {
.ld-tier-rank {
font-size: 0.7rem;
margin: 3px 0 6px 0;
}
}
/* =========================================================
Friend Menu Dropdown - Z-Index Layering Fix
========================================================= */
.friend-menu {
position: relative;
z-index: 1;
}
.friend-menu-dropdown {
position: fixed;
background: var(--ink-2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
min-width: 160px;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.friend-menu-dropdown[aria-hidden="false"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.friend-menu-item {
display: block;
width: 100%;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.8);
padding: 10px 12px;
text-align: left;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s ease, color 0.2s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.friend-menu-item:last-child {
border-bottom: none;
}
.friend-menu-item:hover {
background-color: rgba(155, 226, 242, 0.1);
color: rgba(155, 226, 242, 0.9);
}