/* ============================================================ Survey Platform Admin Panel — styles.css Extends theme2.css design tokens ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); /* ── Design Tokens ── Realigned to the same reference-matched palette as theme2.css (the public marketing site) so the whole product - marketing pages and the authenticated panel alike - reads as one consistent visual system. */ :root { --navy: #0e1726; --navy-mid: #243147; --navy-light: #243147; --teal: #4b8ede; --teal-light: #66aaf2; --teal-dark: #286fca; --teal-darker: #205ca8; --teal-pale: #eaf3ff; --white: #FFFFFF; --off-white: #f6f9fd; --gray-50: #f6f9fd; --gray-100: #eef4fb; --gray-200: #dce4ef; --gray-400: #8290a4; --gray-600: #617087; --gray-800: #243147; --success: #0d9b6d; --success-pale: #e9fbf4; --warning: #e58a05; --warning-pale: #fff7e7; --danger: #d9485f; --danger-pale: #fff0f3; --text-primary: #0e1726; --text-secondary:#617087; --text-muted: #8290a4; --bg-page: #f6f9fd; --border: #dce4ef; --sidebar-w: 260px; --topbar-h: 64px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-sm: 0 4px 14px rgba(14,23,38,.06); --shadow-md: 0 18px 50px rgba(25,57,95,.12); --shadow-lg: 0 28px 80px rgba(25,57,95,.18); --transition: .18s ease; } /* Dark mode - driven by the shared v11 appearance toggle (see /assets/survey/theme/js/theme-v11.js, which sets data-theme on ). --white/--off-white/--gray-* aren't redefined here because they're used ambiguously in this file both as literal white (e.g. button text on a colored background, which must stay white) and as a "card surface" color - redefining them globally would make button text unreadable. Instead, the unambiguous page-chrome tokens are redefined, and the surface-role selectors that use var(--white) as a background are overridden directly, the same targeted approach theme-v11.css itself uses for the marketing site. The sidebar is intentionally left as-is - it's already a dark navy panel in light mode. */ html[data-theme="dark"] { --navy: #f4f7fb; --bg-page: #08111f; --gray-50: #0c1728; --gray-100: #15243a; --gray-200: #273b57; --gray-400: #6b7f99; --gray-600: #9fb0c5; --gray-800: #d7e1ee; --text-primary: #f4f7fb; --text-secondary:#d7e1ee; --text-muted: #9fb0c5; --border: #273b57; --teal-pale: rgba(75,142,222,.16); --success-pale: rgba(13,155,109,.16); --warning-pale: rgba(229,138,5,.16); --danger-pale: rgba(217,72,95,.18); color-scheme: dark; } html[data-theme="dark"] :where( .topbar, .user-menu, .stat-card, .card, .filter-select, .survey-grid-card, .modal, .form-textarea, .form-input, .form-select, .copy-btn, .question-item, .builder-panel, .canvas-question, .question-order-btn, .branch-remove-btn, .data-table, .table-scroll, .dropdown-menu, .toolbar-search input, .topbar-search input, .canvas-page-heading-btn ) { background: #101b2d !important; color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] .data-table th { background: var(--gray-50); } html[data-theme="dark"] .data-table td, html[data-theme="dark"] .data-table th { border-color: var(--border); } html[data-theme="dark"] .badge-status.badge-paused { background: var(--gray-100); color: var(--text-secondary); } /* --navy doubles as body-text color in ~20 places and as the sidebar's permanent dark background in 2 - redefined above for the text usages, pinned back to its original literal value here so the (already-dark) sidebar doesn't change. */ html[data-theme="dark"] .sidebar { background: #0e1726; } html[data-theme="dark"] .stat-icon.navy { background: rgba(75,142,222,.16); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--text-primary); background: var(--bg-page); overflow-x: hidden; } /* ============================================================ APP SHELL ============================================================ */ .app-shell { display: flex; min-height: 100vh; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { width: var(--sidebar-w); background: var(--navy); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform var(--transition); overflow-y: auto; overflow-x: hidden; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; } .sidebar-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--teal); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; } .sidebar-brand-text { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.2px; } .sidebar-brand-text span { color: var(--teal-light); } .sidebar-close-btn { display: none; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; background: rgba(255,255,255,.08); border: none; border-radius: 6px; color: rgba(255,255,255,.6); cursor: pointer; align-items: center; justify-content: center; } .sidebar-close-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 20px 20px 8px; } .sidebar-nav { list-style: none; padding: 0 10px; flex: 1; } .sidebar-nav li { margin-bottom: 2px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); text-decoration: none; transition: all var(--transition); position: relative; } .sidebar-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: .7; transition: opacity var(--transition); } .sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; } .sidebar-link:hover svg { opacity: 1; } .sidebar-link.active { background: rgba(75,142,222,.18); color: var(--teal-light); font-weight: 600; } .sidebar-link.active svg { opacity: 1; color: var(--teal-light); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--teal-light); border-radius: 0 3px 3px 0; } .link-badge { margin-left: auto; background: var(--teal); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; line-height: 1.5; } /* ============================================================ SIDEBAR GROUPS (collapsible sub-menus) ============================================================ */ .sidebar-group { margin-bottom: 2px; } .sidebar-group-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); background: none; border: none; text-align: left; cursor: pointer; transition: all var(--transition); } .sidebar-group-toggle svg.group-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: .7; transition: opacity var(--transition); } .sidebar-group-toggle:hover { background: rgba(255,255,255,.07); color: #fff; } .sidebar-group-toggle:hover svg.group-icon { opacity: 1; } .sidebar-group-toggle.active-child { color: var(--teal-light); } .sidebar-group-toggle.active-child svg.group-icon { opacity: 1; color: var(--teal-light); } .sidebar-group-chevron { margin-left: auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: transform var(--transition); flex-shrink: 0; } .sidebar-group.open > .sidebar-group-toggle .sidebar-group-chevron { transform: rotate(180deg); } .sidebar-group-items { list-style: none; display: none; padding: 2px 0 4px; } .sidebar-group.open > .sidebar-group-items { display: block; } .sidebar-group-items li { margin-bottom: 2px; } /* ============================================================ SIDEBAR SUB-HEADINGS (static section labels inside sidebar-nav) ============================================================ */ .sidebar-subheading { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 14px 12px 6px; margin-bottom: 0 !important; } .sidebar-nav > li:first-child.sidebar-subheading { padding-top: 4px; } .sidebar-group-items .sidebar-link { padding-left: 40px; font-size: 13.5px; } .sidebar-footer { padding: 14px 10px 20px; border-top: 1px solid rgba(255,255,255,.07); margin-top: auto; } .sidebar-usage { padding: 12px 12px; margin-bottom: 8px; background: rgba(255,255,255,.04); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.07); } .sidebar-usage-top { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.45); margin-bottom: 8px; } .sidebar-usage-bar { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; } .sidebar-usage-bar-fill { height: 100%; width: 62%; background: linear-gradient(90deg, var(--teal), var(--teal-light)); border-radius: 3px; } /* ============================================================ MAIN COLUMN ============================================================ */ .main-col { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } /* ============================================================ TOPBAR ============================================================ */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-h); background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 24px; box-shadow: var(--shadow-sm); } .menu-toggle-btn { display: none; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center; color: var(--gray-800); flex-shrink: 0; } .menu-toggle-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .topbar-crumb { flex-shrink: 0; } .topbar-crumb-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.2; } .topbar-crumb-sub { font-size: 11px; color: var(--text-muted); } .topbar-search { flex: 1; max-width: 380px; position: relative; margin-left: 8px; } .topbar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; fill: none; stroke: var(--gray-400); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .topbar-search input { width: 100%; height: 36px; padding: 0 14px 0 36px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-primary); outline: none; transition: border-color var(--transition), background var(--transition); } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-search input:focus { border-color: var(--teal); background: var(--white); } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .topbar-icon-btn { position: relative; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-600); transition: all var(--transition); } .topbar-icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .topbar-icon-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); } .topbar-icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 1.5px solid var(--white); } .topbar-lang select, .table-manage { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer; outline: none; transition: border-color var(--transition); } .topbar-lang select:hover { border-color: var(--teal); } /* ============================================================ USER DROPDOWN ============================================================ */ .topbar-user { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent; transition: all var(--transition); user-select: none; } .topbar-user:hover { background: var(--gray-50); border-color: var(--border); } .topbar-user.open { background: var(--teal-pale); border-color: var(--teal); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--navy-mid)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .5px; } .topbar-user-name { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; } .topbar-user-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .topbar-user-chevron { width: 14px; height: 14px; fill: none; stroke: var(--gray-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); flex-shrink: 0; } .topbar-user.open .topbar-user-chevron { transform: rotate(180deg); } /* ── Dropdown panel ── */ .user-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 300; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .user-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .user-menu-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .user-menu-header .avatar { width: 38px; height: 38px; font-size: 13px; } .user-menu-header-name { font-size: 13px; font-weight: 600; color: var(--navy); } .user-menu-header-email { font-size: 11px; color: var(--text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu a, .user-menu button.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--gray-800); text-decoration: none; transition: all var(--transition); width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; } .user-menu a svg, .user-menu button.menu-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--gray-400); flex-shrink: 0; transition: color var(--transition); } .user-menu a:hover, .user-menu button.menu-item:hover { background: var(--teal-pale); color: var(--teal); } .user-menu a:hover svg, .user-menu button.menu-item:hover svg { color: var(--teal); } .user-menu a.active-item { background: var(--teal-pale); color: var(--teal); font-weight: 600; } .user-menu a.active-item svg { color: var(--teal); } .user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .user-menu button.danger { color: var(--danger); } .user-menu button.danger svg { color: var(--danger); } .user-menu button.danger:hover { background: var(--danger-pale); color: var(--danger); } /* ============================================================ PAGE CONTENT ============================================================ */ .page-content { flex: 1; padding: 28px 28px 40px; width: 100%; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-title { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.25; } .page-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 3px; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: var(--radius-md); border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); white-space: nowrap; line-height: 1.4; } .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .btn-primary { background: var(--teal); color: var(--white); } .btn-primary:hover { background: var(--teal-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(75,142,222,.35); } .btn-primary:active { transform: translateY(0); } .btn-outline { background: transparent; color: var(--gray-800); border: 1.5px solid var(--gray-200); } .btn-outline:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); } .btn-danger { background: var(--danger); color: var(--white); } .btn-danger:hover { background: #b91c1c; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--gray-600); border: none; padding: 7px 12px; } .btn-ghost:hover { background: var(--gray-50); color: var(--navy); } .btn-sm { font-size: 12px; padding: 6px 14px; } /* ============================================================ STAT CARDS ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; align-items: center; gap: 16px; transition: all var(--transition); box-shadow: var(--shadow-sm); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .stat-icon.teal { background: var(--teal-pale); color: var(--teal); } .stat-icon.success { background: var(--success-pale); color: var(--success); } .stat-icon.navy { background: #e8f1fb; color: var(--navy-mid); } .stat-icon.warning { background: var(--warning-pale); color: var(--warning); } .stat-icon.danger { background: var(--danger-pale); color: var(--danger); } .stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; } .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .stat-delta { font-size: 11px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 3px; } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 24px; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); } .card-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); } .card-subtitle { font-size: 13px; color: var(--text-muted); } .card-body { padding: 22px; } /* ============================================================ TOOLBAR (search + filters) ============================================================ */ .toolbar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .toolbar-search { position: relative; flex: 1; min-width: 200px; } .toolbar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: none; stroke: var(--gray-400); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .toolbar-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-primary); outline: none; transition: border-color var(--transition), background var(--transition); } .toolbar-search input:focus { border-color: var(--teal); background: var(--white); } .filter-select { height: 36px; padding: 0 10px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-primary); cursor: pointer; outline: none; transition: border-color var(--transition); } .filter-select:hover { border-color: var(--teal); } .toolbar-spacer { flex: 1; } .view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .view-toggle button { width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--transition); } .view-toggle button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .view-toggle button:hover { background: var(--gray-50); color: var(--teal); } .view-toggle button.active { background: var(--teal); color: #fff; } /* ============================================================ DATA TABLE ============================================================ */ .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); background: var(--gray-50); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table .table-manage:first-child{margin-right: 10px;} .data-table th.sortable { cursor: pointer; user-select: none; } .data-table th.sortable:hover { color: var(--navy); } .sort-icon { display: inline-block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; margin-left: 4px; opacity: .4; } .sort-active .sort-icon { opacity: 1; color: var(--teal); } .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; color: var(--text-primary); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background var(--transition); } .data-table tbody tr:hover { background: var(--gray-50); } .survey-title-cell { display: flex; flex-direction: column; gap: 2px; } .survey-name { font-weight: 600; color: var(--navy); font-size: 14px; } .survey-meta { font-size: 11px; color: var(--text-muted); } .row-actions { display: flex; align-items: center; gap: 6px; } .action-btn { width: 30px; height: 30px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--transition); } .action-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .action-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); } .action-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-pale); } /* ============================================================ BADGES / STATUS ============================================================ */ .badge-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 100px; } .badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-active { background: var(--success-pale); color: var(--success); } .badge-draft { background: var(--gray-100); color: var(--gray-600); } .badge-paused { background: var(--warning-pale); color: var(--warning); } .badge-closed { background: var(--danger-pale); color: var(--danger); } .badge-published { background: var(--success-pale); color: var(--success); } /* ============================================================ USAGE BARS ============================================================ */ .usage-row { margin-bottom: 14px; } .usage-row:last-child { margin-bottom: 0; } .usage-row-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; } .usage-row-label strong { color: var(--navy); font-weight: 600; } .usage-track { height: 6px; border-radius: 100px; background: var(--gray-100); overflow: hidden; } .usage-fill { height: 100%; border-radius: 100px; background: var(--success); transition: width .3s ease; } .usage-fill.warning { background: var(--warning); } .usage-fill.danger { background: var(--danger); } /* ============================================================ SURVEY GRID VIEW ============================================================ */ .survey-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 20px; } .survey-grid.active { display: grid; } .survey-grid-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: all var(--transition); cursor: pointer; } .survey-grid-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal); } .sgc-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .sgc-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } .sgc-footer { display: flex; align-items: center; justify-content: space-between; } /* ============================================================ FILTER CHIPS ============================================================ */ .filter-chips { display: flex; align-items: center; gap: 8px; padding: 0 20px 14px; flex-wrap: wrap; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; background: var(--teal-pale); color: var(--teal); border-radius: 100px; border: none; cursor: pointer; } .filter-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; } .filter-chip:hover { background: #d1e4f8; } /* ============================================================ STATE PANELS (empty / loading / error) ============================================================ */ .state-panel { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; } .state-panel.visible { display: flex; } .state-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .state-icon.error { background: var(--danger-pale); color: var(--danger); } .state-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .state-title { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .state-desc { font-size: 14px; color: var(--text-secondary); max-width: 380px; line-height: 1.65; margin-bottom: 20px; } /* ============================================================ SKELETON ============================================================ */ .skeleton-block { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ============================================================ PAGINATION ============================================================ */ .pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .pagination-info { font-size: 13px; color: var(--text-muted); } .pagination-info strong { color: var(--navy); } .pagination-controls { display: flex; align-items: center; gap: 4px; } .page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .page-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); } .page-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; } .page-btn:disabled { opacity: .4; cursor: not-allowed; } .page-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ MODALS ============================================================ */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; animation: modalIn .22s cubic-bezier(.34,1.56,.64,1); } @keyframes modalIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 0; } .modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); } .modal-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 3px; } .modal-close-btn { width: 30px; height: 30px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-600); flex-shrink: 0; transition: all var(--transition); } .modal-close-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; } .modal-close-btn:hover { background: var(--danger-pale); color: var(--danger); border-color: var(--danger); } .modal-body { padding: 20px 24px; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; } .modal-confirm-icon { width: 56px; height: 56px; background: var(--danger-pale); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--danger); } .modal-confirm-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ FORM CONTROLS ============================================================ */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; } .form-label .optional { font-weight: 400; color: var(--text-muted); font-size: 12px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-md); font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-primary); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(75,142,222,.12); } .form-input.error { border-color: var(--danger); } .form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; } .form-select { cursor: pointer; } .form-error-text { display: none; align-items: center; gap: 5px; font-size: 12px; color: var(--danger); margin-top: 5px; } .form-error-text.visible { display: flex; } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; } .form-checkbox-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; } .form-checkbox-wrap input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; } .form-radio-group { display: flex; gap: 10px; } .form-radio-card { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--gray-800); transition: all var(--transition); } .form-radio-card input { display: none; } .form-radio-card.selected { border-color: var(--teal); background: var(--teal-pale); color: var(--teal); font-weight: 600; } /* ============================================================ ANALYTICS CHART ============================================================ */ .chart-wrap { padding: 4px 0 0; } .chart-canvas-wrap { position: relative; width: 100%; height: 220px; } .chart-canvas-wrap canvas { width: 100% !important; } .chart-legend { display: flex; align-items: center; gap: 20px; padding: 14px 0 0; font-size: 12px; color: var(--text-muted); } .chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; } /* ============================================================ RECENT SURVEYS TABLE (dashboard) ============================================================ */ .section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-label-text { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); } /* ============================================================ SURVEY FORM PAGE ============================================================ */ .survey-form-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .survey-form-title-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .survey-form-title-group h1 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); } .public-link-box { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .public-link-box a { flex: 1; font-size: 13px; color: var(--teal); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .public-link-box a:hover { text-decoration: underline; } .copy-btn { flex-shrink: 0; height: 30px; padding: 0 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 5px; } .copy-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; } .copy-btn:hover { border-color: var(--teal); color: var(--teal); } .question-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; background: var(--off-white); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; transition: all var(--transition); } .question-item:hover { border-color: var(--teal); background: var(--white); } .question-info { flex: 1; } .question-num { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 3px; } .question-type-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; } .question-options { list-style: none; display: flex; flex-direction: column; gap: 3px; } .question-options li { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; } /* .question-options li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gray-400); flex-shrink: 0; } */ .canvas-page-break { background: var(--teal-pale); border-style: dashed; border-color: var(--teal); } .canvas-page-break:hover { background: var(--teal-pale); border-color: var(--teal); } .pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-weight: 600; line-height: 1.6; } .builder-right-form .property-group { margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .builder-right-form .property-group:first-of-type { padding-top: 0; border-top: none; } .property-group h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 10px; } .add-question-section { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 24px; background: transparent; transition: border-color var(--transition); } .add-question-section:hover { border-color: var(--teal); } .add-question-title { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 16px; } /* ============================================================ SURVEY BUILDER (3-panel: question types / canvas / settings) ============================================================ */ .builder-shell { display: grid; grid-template-columns: 210px 1fr 320px; gap: 20px; align-items: start; } .builder-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; } .builder-panel-title { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 12px; } .question-tool-grid { display: flex; flex-direction: column; gap: 4px; } .question-tool { display: flex; align-items: center; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-800); cursor: pointer; transition: all var(--transition); } .question-tool:hover { background: var(--off-white); } .question-tool.active { background: var(--teal-pale); border-color: var(--teal); color: var(--teal); } .builder-canvas-wrap { min-height: 360px; } .builder-canvas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; } .builder-canvas-count { font-size: 13px; color: var(--text-muted); font-weight: 600; } .canvas-question { cursor: pointer; border-width: 2px; outline: none; } .canvas-question:focus-visible { border-color: var(--teal); } .canvas-question.active { border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px var(--teal-pale); } .canvas-edit-hint { align-self: center; font-size: 11.5px; font-weight: 600; color: var(--teal); opacity: 0; transition: opacity var(--transition); flex-shrink: 0; } .canvas-question:hover .canvas-edit-hint, .canvas-question.active .canvas-edit-hint { opacity: 1; } .canvas-empty { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; } .builder-right-form .form-group { margin-bottom: 14px; } @media (max-width: 991px) { .builder-shell { grid-template-columns: 1fr; } .builder-panel { position: static; max-height: none; } } /* ============================================================ SURVEY BUILDER: page sections + drag-and-drop (additive) ============================================================ */ .page-tree { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; } .page-tree-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); } .page-tree-item:hover { background: var(--off-white); } .page-tree-item.active { background: var(--teal-pale); border-color: var(--teal); } .page-tree-drag-handle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--gray-400); font-size: 13px; line-height: 1; cursor: grab; user-select: none; touch-action: none; } .page-tree-drag-handle:hover { color: var(--teal); } .page-tree-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-tree-item.active .page-tree-label { color: var(--teal); } .page-tree-count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 10.5px; font-weight: 700; } .canvas-page { margin-bottom: 20px; } .canvas-page:last-child { margin-bottom: 0; } .canvas-page-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .canvas-page-drag-handle, .question-drag-handle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--gray-400); font-size: 15px; line-height: 1; cursor: grab; user-select: none; touch-action: none; } .canvas-page-drag-handle:hover, .question-drag-handle:hover { color: var(--teal); background: var(--teal-pale); } .canvas-page-header-info { flex: 1; min-width: 0; } .canvas-page-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; } .canvas-page-heading-btn { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 1px dashed var(--teal); border-radius: var(--radius-md); background: var(--teal-pale); cursor: pointer; transition: all var(--transition); } .canvas-page-heading-btn:hover { background: var(--white); } .canvas-page-heading-title { font-size: 14px; font-weight: 600; color: var(--navy); } .canvas-page-heading-desc { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); white-space: pre-line; } .canvas-page-add-heading-btn { padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--transition); } .canvas-page-add-heading-btn:hover { border-color: var(--teal); color: var(--teal); } .canvas-page-questions { min-height: 12px; padding-inline-start: 32px; } .canvas-page-questions:empty { min-height: 40px; border: 1px dashed var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .canvas-page-questions:empty::after { content: attr(data-empty-hint); font-size: 12px; color: var(--text-muted); } .question-item-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .question-order-btns { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity var(--transition); } .question-item:hover .question-order-btns, .canvas-question.active .question-order-btns { opacity: 1; } .question-order-btn { width: 20px; height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 4px; background: var(--white); color: var(--gray-600); font-size: 9px; line-height: 1; cursor: pointer; padding: 0; } .question-order-btn:hover { border-color: var(--teal); color: var(--teal); } .canvas-question-ghost, .canvas-page-ghost { opacity: .4; background: var(--teal-pale) !important; } @media (max-width: 640px) { .canvas-page-questions { padding-inline-start: 0; } } .branch-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .branch-value-input { flex: 1; min-width: 0; } .branch-target-select { flex: 1; min-width: 0; } .branch-remove-btn { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-500); font-size: 16px; line-height: 1; cursor: pointer; } .branch-remove-btn:hover { border-color: var(--danger); color: var(--danger); } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 28px; right: 28px; background: var(--navy); color: #fff; padding: 13px 18px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 999; transform: translateY(80px); opacity: 0; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; pointer-events: none; max-width: 340px; } .toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .toast svg { width: 16px; height: 16px; fill: none; stroke: var(--teal-light); stroke-width: 2.5; stroke-linecap: round; flex-shrink: 0; } .toast.toast-error svg { stroke: #f87171; } .toast.toast-warning svg { stroke: #fbbf24; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-close-btn { display: flex; } .menu-toggle-btn { display: flex; } .main-col { margin-left: 0; } .topbar-search { display: none; } .topbar-user-role { display: none; } } @media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .page-content { padding: 18px 16px 32px; } .topbar { padding: 0 14px; gap: 8px; } .topbar-lang { display: none; } .toolbar { gap: 8px; } .toolbar-spacer { display: none; } .view-toggle { display: none; } .filter-select { display: none; } .pagination-bar { flex-direction: column; align-items: flex-start; } } @media (max-width: 561px){ .data-table .table-manage:first-child{margin-right: 10px;margin-bottom: 5px;} } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .modal { border-radius: var(--radius-lg); } .form-radio-group { flex-direction: column; } .page-header { flex-direction: column; align-items: flex-start; } .topbar-user-name { display: none; } } /* ============================================================ DASHBOARD PARITY REBUILD (admin overview + panel overview) ------------------------------------------------------------ Ported from theme/css/styles.css (public marketing/content pages) and theme/css/admin.css (admin console shell), which are not otherwise @import'ed here. Only class names not already defined above are added, so nothing already shipping is touched. Token aliases below map 1:1 (verified against the existing palette) or add clearly new tokens (--violet family) this file didn't have yet; none override an existing token. ============================================================ */ :root { --brand: var(--teal); --brand-700: var(--teal-dark); --brand-800: var(--teal-darker); --brand-900: #18487f; --brand-100: var(--teal-pale); --brand-50: #f5f9ff; --ink: var(--navy); --ink-2: var(--navy-mid); --muted: var(--text-secondary); --muted-2: var(--text-muted); --line: var(--border); --line-strong: #c7d2e2; --surface: var(--bg-page); --surface-2: var(--gray-100); --success-soft: var(--success-pale); --warning-soft: var(--warning-pale); --danger-soft: var(--danger-pale); --violet: #7558e8; --violet-soft: #f2efff; --radius: var(--radius-md); } /* -- Panel/creator dashboard: metric cards, chart+aside grid, widgets -- */ .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } .metric-card { padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; } .metric-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .metric-value { margin: 11px 0 5px; font-size: 28px; line-height: 1; font-weight: 900; } .metric-change { color: var(--success); font-size: 10px; font-weight: 800; } .dashboard-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 15px; margin-top: 15px; } .dashboard-panel { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; } .panel-head h2 { margin: 0; font-size: 16px; } .panel-head select { min-height: 34px; padding: 5px 28px 5px 10px; font-size: 10px; } .survey-list { margin-top: 15px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 13px; } .survey-row { display: grid; grid-template-columns: 1.7fr .7fr .6fr .55fr auto; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 11px; } .survey-row:last-child { border-bottom: 0; } .survey-row.header { color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; } .survey-name { display: flex; align-items: center; gap: 10px; } .survey-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand-800); background: var(--brand-100); border-radius: 9px; } .survey-name strong { display: block; font-size: 11px; } .survey-name span { color: var(--muted); font-size: 9px; } .dashboard-visualization-panel { min-width: 0; } .dashboard-kicker { display: block; margin-bottom: 3px; color: #6b7d92; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .dashboard-chart-head { align-items: flex-start; } .dashboard-chart-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0 10px; } .dashboard-chart-controls label span { display: block; margin-bottom: 5px; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .dashboard-chart-toolbar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; } .dashboard-chart-toolbar button { border: 1px solid #d9e4ef; background: var(--white); color: #526273; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 800; cursor: pointer; } .dashboard-chart-toolbar button.active, .dashboard-chart-toolbar button:hover { border-color: var(--brand); background: #eaf4ff; color: #155b9b; } .dashboard-chart-stage { min-height: 270px; border: 1px solid #e4ebf3; background: linear-gradient(180deg,#fbfdff,#f7fafe); border-radius: 12px; padding: 8px; overflow: auto; } .dashboard-svg-chart { display: block; width: 100%; min-width: 520px; height: 260px; } .dashboard-chart-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; color: #728197; font-size: 10px; } .dashboard-widget-section { margin-top: 15px; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; } .dashboard-widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } .dashboard-widget-grid article { padding: 15px; border: 1px solid #e1e9f2; border-radius: 11px; background: #fbfdff; } .dashboard-widget-grid strong, .dashboard-widget-grid span, .dashboard-widget-grid small { display: block; } .dashboard-widget-grid strong { font-size: 12px; } .dashboard-widget-grid span { margin: 5px 0; color: var(--brand-800); font-weight: 800; font-size: 11px; } .dashboard-widget-grid small { color: #738397; line-height: 1.45; } .audience-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .audience-workspace-stat { font-size: 28px; font-weight: 900; } .audience-workspace-stat small { font-size: 12px; font-weight: 600; color: #62748a; display: block; } .check-list { margin: 22px 0 0; padding: 0; list-style: none; } .check-list li { position: relative; margin: 11px 0; padding-inline-start: 28px; color: var(--muted); } .check-list li::before { content: "\2713"; position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; color: var(--white); background: var(--success); border-radius: 50%; font-size: 10px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--brand-800); background: var(--brand-100); border-radius: 999px; font-size: 11px; font-weight: 850; } .tag.success { color: var(--success); background: var(--success-soft); } .tag.warning { color: #9a5d00; background: var(--warning-soft); } .tag.violet { color: var(--violet); background: var(--violet-soft); } .eyebrow { display: block; margin-bottom: 8px; color: var(--brand-800); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .section-title { margin: 0; font-size: 24px; } .section-xs { margin-top: 30px; } .section-head { margin-bottom: 16px; } .dropdown-link { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; } .dropdown-link:hover { background: var(--surface); } .dropdown-icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand-800); background: var(--brand-100); border-radius: 9px; } .dropdown-title { display: block; font-size: 12px; font-weight: 800; } .dropdown-desc { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } /* -- Admin overview: 6-up KPI grid, mini cards, activity widgets -- */ .admin-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .admin-metric-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-metric-card { min-width: 0; min-height: 130px; padding: 15px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid #aab6c4; border-radius: 13px; box-shadow: 0 5px 18px rgba(29,62,99,.045); } .admin-metric-card.tone-brand { border-top-color: var(--brand); } .admin-metric-card.tone-success { border-top-color: var(--success); } .admin-metric-card.tone-warning { border-top-color: var(--warning); } .admin-metric-card.tone-danger { border-top-color: var(--danger); } .admin-metric-card.tone-violet { border-top-color: var(--violet); } .admin-metric-head { display: flex; align-items: center; gap: 8px; color: var(--muted); } .admin-metric-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand-800); background: var(--brand-50); border-radius: 8px; } .admin-metric-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; } .admin-metric-label { overflow: hidden; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .admin-metric-value { display: block; margin-top: 13px; font-size: 24px; line-height: 1; letter-spacing: -.04em; } .admin-metric-note { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; line-height: 1.35; } .admin-card { min-width: 0; margin-bottom: 18px; padding: 19px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 22px rgba(29, 62, 99, .05); } .admin-card h2 { margin: 3px 0 0; font-size: 16px; letter-spacing: -.025em; } .admin-card > p { color: var(--muted); font-size: 10px; } .admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; } .admin-card-kicker { display: block; color: var(--brand-700); font-size: 10px; font-weight: 900; line-height: 1.4; letter-spacing: .11em; text-transform: uppercase; } .admin-grid { display: grid; gap: 18px; } .admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-grid-2-1 { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); } .admin-chart-summary { display: flex; flex-wrap: wrap; gap: 24px; padding: 7px 0 15px; } .admin-chart-summary strong, .admin-chart-summary span { display: block; } .admin-chart-summary strong { font-size: 16px; } .admin-chart-summary span { color: var(--muted); font-size: 8px; } .admin-bar-chart { height: 190px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 7px; padding: 12px 8px 0; background: repeating-linear-gradient(to top, #eef2f7 0, #eef2f7 1px, transparent 1px, transparent 25%); border-bottom: 1px solid var(--line); } .admin-bar-chart span { height: var(--bar); min-height: 10px; background: linear-gradient(to top, var(--brand-800), #70acec); border-radius: 5px 5px 2px 2px; box-shadow: 0 5px 12px rgba(75,142,222,.17); } .admin-chart-axis { display: flex; justify-content: space-between; padding: 7px 7px 0; color: var(--muted); font-size: 8px; } .admin-service-list { display: grid; gap: 1px; } .admin-service-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #edf1f5; font-size: 10px; font-weight: 750; } .admin-service-list > div:last-child { border-bottom: 0; } .admin-incident-note { display: grid; grid-template-columns: 28px 1fr; gap: 9px; margin-top: 14px; padding: 11px 12px; color: #6d5314; background: var(--warning-soft); border: 1px solid #f0d9a7; border-radius: 10px; } .admin-incident-note > span { color: var(--warning); } .admin-incident-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .admin-incident-note p { margin: 0; font-size: 8px; line-height: 1.5; } .admin-priority-list { display: grid; gap: 8px; } .admin-priority-list button { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; text-align: start; cursor: pointer; } .admin-priority-list button:hover { background: var(--brand-50); border-color: #bfd5ef; } .admin-priority-list strong, .admin-priority-list small { display: block; } .admin-priority-list strong { font-size: 10px; } .admin-priority-list small { margin-top: 2px; color: var(--muted); font-size: 8px; } .admin-priority-list em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; } .admin-priority { width: 28px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-size: 8px; font-weight: 900; } .admin-priority.red { color: #a52f43; background: var(--danger-soft); } .admin-priority.amber { color: #a05d00; background: var(--warning-soft); } .admin-priority.blue { color: var(--brand-800); background: var(--brand-50); } .admin-plan-bars { display: grid; gap: 11px; } .admin-plan-bars > div { display: grid; grid-template-columns: 82px minmax(0,1fr) 42px; align-items: center; gap: 10px; font-size: 9px; } .admin-plan-bars b { height: 7px; overflow: hidden; background: #edf1f6; border-radius: 10px; display: block; } .admin-plan-bars i { height: 100%; display: block; background: linear-gradient(90deg, var(--brand-800), var(--brand)); border-radius: inherit; } .admin-plan-bars strong { text-align: end; } .admin-inline-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); } .admin-inline-stats strong, .admin-inline-stats span { display: block; } .admin-inline-stats strong { font-size: 16px; } .admin-inline-stats span { color: var(--muted); font-size: 8px; } .admin-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 8px; color: #48566b; background: #f1f4f8; border: 1px solid #dde4ed; border-radius: 20px; font-size: 9px; font-weight: 850; line-height: 1; } .admin-status i { width: 6px; height: 6px; background: #8996a8; border-radius: 50%; display: inline-block; } .admin-status.success { color: #087151; background: var(--success-soft); border-color: #bce8d8; } .admin-status.success i { background: var(--success); } .admin-status.warning { color: #a05d00; background: var(--warning-soft); border-color: #f2d9a7; } .admin-status.warning i { background: var(--warning); } .admin-status.danger { color: #a82e42; background: var(--danger-soft); border-color: #efbec6; } .admin-status.danger i { background: var(--danger); } .admin-status.brand { color: var(--brand-800); background: var(--brand-50); border-color: #c4d9f1; } .admin-status.brand i { background: var(--brand); } .admin-text-link { color: var(--brand-800); font-size: 10px; font-weight: 850; } .admin-text-link:hover { text-decoration: underline; text-underline-offset: 3px; } .admin-view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 22px; flex-wrap: wrap; } .admin-view-header h1 { margin: 4px 0 4px; font-size: clamp(24px, 3vw, 32px); line-height: 1.08; letter-spacing: -.03em; color: var(--ink); } .admin-view-header p { max-width: 810px; margin: 0; color: var(--muted); font-size: 12px; } .admin-view-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } @media (max-width: 1400px) { .admin-metric-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .dashboard-grid, .admin-grid-2-1, .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; } .dashboard-widget-grid, .audience-app-grid, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .admin-metric-grid, .admin-metric-grid.compact { grid-template-columns: repeat(2, 1fr); } .dashboard-chart-controls { grid-template-columns: 1fr; } } @media (max-width: 640px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .admin-metric-grid, .admin-metric-grid.compact { grid-template-columns: 1fr; } .dashboard-widget-grid, .audience-app-grid, .grid-3, .grid-4 { grid-template-columns: 1fr; } .survey-list { overflow-x: auto; } .survey-list .survey-row { min-width: 720px; } .admin-inline-stats { grid-template-columns: 1fr; } }