/* ============================================================ SMB1001 Admin Shell - app-admin.css Persistent admin app shell styles. Uses pcs.css tokens only (--bg, --fg, --gold, etc.) so light + dark themes work automatically via data-theme on . ============================================================ */ /* -------- Hide legacy chrome when shell owns the screen -------- */ body.ash-on .qnav, body.ash-on .qheader, body.ash-on .qprogress, body.ash-on #qbody { display: none !important; } /* -------- Hide shell overlay when not in shell mode -------- */ body:not(.ash-on) #ashShell { display: none !important; } /* -------- Back-to-console button (shown when assessment editor is open) -------- */ #ashBackBtn { position: fixed; top: 14px; left: 14px; z-index: 200; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: #0a0a0a; background: var(--gold, #C49A2C); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.28); white-space: nowrap; transition: background 0.15s, box-shadow 0.15s; } #ashBackBtn:hover { background: var(--glt, #D4AA3C); box-shadow: 0 4px 16px rgba(0,0,0,0.38); } #ashBackBtn svg { width: 15px; height: 15px; stroke: #0a0a0a; flex-shrink: 0; } body.ash-on #ashBackBtn { display: none !important; } /* -------- Shell shimmer keyframe -------- */ @keyframes ash-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } /* ============================================================ LAYOUT - full-viewport flex: sidebar + main column ============================================================ */ .ash { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: hidden; } /* ============================================================ SIDEBAR ============================================================ */ .ash-side { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg2); border-right: 1px solid var(--bdr); overflow: hidden; transition: width 0.22s ease; z-index: 110; } /* Collapsed to icon-rail */ .ash--side-collapsed .ash-side { width: 64px; } .ash--side-collapsed .ash-brand__text, .ash--side-collapsed .ash-nav__label, .ash--side-collapsed .ash-side__admin-label { display: none; } .ash--side-collapsed .ash-brand { justify-content: center; padding: 0; } .ash--side-collapsed .ash-nav__item { justify-content: center; padding: 0 0 0 0; } .ash--side-collapsed .ash-nav__icon { margin: 0; } .ash--side-collapsed .ash-side__collapse svg { transform: rotate(180deg); } .ash--side-collapsed .ash-side__admin-email { justify-content: center; padding: 0; } .ash--side-collapsed .ash-side__admin-email svg { margin: 0; } /* Brand / logo row */ .ash-side__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 16px 16px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; min-height: 68px; } .ash-brand { display: flex; align-items: center; gap: 10px; overflow: hidden; flex: 1; min-width: 0; } .ash-brand__img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .ash-brand__text { min-width: 0; overflow: hidden; } .ash-brand__name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .ash-brand__sub { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; } /* Collapse button */ .ash-side__collapse { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; color: var(--t3); transition: color 0.15s, border-color 0.15s; padding: 0; } .ash-side__collapse:hover { color: var(--gold); border-color: var(--gold); } .ash-side__collapse svg { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.22s; } /* Nav items */ .ash-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .ash-nav__item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--t2); font-size: 13.5px; font-weight: 500; border-left: 3px solid transparent; transition: color 0.14s, background 0.14s, border-color 0.14s; white-space: nowrap; border-radius: 0; min-height: 42px; } .ash-nav__item:hover { color: var(--fg); background: var(--surface-soft); } .ash-nav__item--active { color: var(--gold); border-left-color: var(--gold); background: var(--gglow); } .ash-nav__icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ash-nav__icon svg { width: 18px; height: 18px; stroke: currentColor; } /* Sidebar footer */ .ash-side__foot { padding: 12px 14px; border-top: 1px solid var(--bdr); flex-shrink: 0; } .ash-side__admin-email { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); overflow: hidden; } .ash-side__admin-email svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; } .ash-side__admin-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ SCRIM (mobile off-canvas) ============================================================ */ .ash-scrim { display: none; position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s; } .ash-scrim--on { opacity: 1; } /* ============================================================ MAIN COLUMN ============================================================ */ .ash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ============================================================ TOP BAR ============================================================ */ .ash-top { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 24px 0 20px; background: var(--bg2); border-bottom: 1px solid var(--bdr); box-shadow: 0 1px 0 var(--bdr); position: sticky; top: 0; z-index: 90; } /* Hamburger (hidden on desktop, shown on mobile) */ .ash-top__hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; color: var(--t2); flex-shrink: 0; padding: 0; } .ash-top__hamburger:hover { color: var(--gold); border-color: var(--gold); } .ash-top__hamburger svg { width: 18px; height: 18px; stroke: currentColor; } /* Search wrap */ .ash-top__search-wrap { position: relative; flex: 1; max-width: 360px; } .ash-top__search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--t3); pointer-events: none; } .ash-top__search { width: 100%; height: 36px; padding: 0 12px 0 32px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; } .ash-top__search:focus { border-color: rgba(196, 154, 44, 0.5); } .ash-top__search::placeholder { color: var(--t3); } .ash-top__search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 200; overflow: hidden; max-height: 320px; overflow-y: auto; } .ash-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); font-size: 13px; transition: background 0.12s; } .ash-search-item:hover { background: var(--surface-soft); } .ash-search-item__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); font-weight: 500; } .ash-search-empty { padding: 10px 14px; font-size: 13px; color: var(--t3); } /* Top-bar right actions */ .ash-top__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .ash-top__btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; color: var(--t2); padding: 0; transition: color 0.15s, border-color 0.15s; flex-shrink: 0; } .ash-top__btn:hover { color: var(--gold); border-color: var(--gold); } .ash-top__btn svg { width: 15px; height: 15px; stroke: currentColor; display: block; } .ash-top__theme .icon-sun { display: none; } .ash-top__theme .icon-moon { display: block; } [data-theme="light"] .ash-top__theme .icon-sun { display: block; } [data-theme="light"] .ash-top__theme .icon-moon { display: none; } .ash-top__admin { display: flex; align-items: center; gap: 10px; padding-left: 8px; border-left: 1px solid var(--bdr); } .ash-top__admin-email { font-size: 12.5px; color: var(--t2); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .ash-top__logout { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--t3); background: transparent; border: 1px solid var(--bdr); border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; font-family: 'DM Sans', sans-serif; } .ash-top__logout:hover { color: #D26545; border-color: rgba(210, 101, 69, 0.45); } /* ============================================================ VIEW / PAGE CONTENT ============================================================ */ .ash-view { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg); padding: 0; } .ash-page { padding: 28px 32px 64px; max-width: 1200px; } .ash-page__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .ash-page__title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.05em; color: var(--fg); flex: 1; min-width: 0; } .ash-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); margin: 28px 0 12px; } /* ============================================================ STAT TILES ROW ============================================================ */ .ash-stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 8px; } .ash-stat-tile { background: var(--card); border: 1px solid var(--bdr); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .ash-stat-tile__num { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--gold); line-height: 1; letter-spacing: 0.03em; } .ash-stat-tile__label { font-size: 11px; color: var(--t2); font-weight: 500; letter-spacing: 0.04em; } /* ============================================================ ORG CARDS GRID (Dashboard) ============================================================ */ .ash-org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .ash-org-card { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, background 0.15s, transform 0.12s; cursor: pointer; } .ash-org-card:hover { border-color: rgba(196, 154, 44, 0.4); background: var(--surface-soft); transform: translateY(-1px); } .ash-org-card__head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; } .ash-org-card__name { font-size: 14px; font-weight: 600; color: var(--fg); flex: 1; min-width: 0; word-break: break-word; line-height: 1.3; } .ash-org-card__ring-row { display: flex; align-items: center; gap: 12px; } .ash-org-card__counts { display: flex; flex-direction: column; gap: 2px; } .ash-org-card__count { font-size: 11px; font-weight: 600; color: var(--t2); } .ash-org-card__count--pass { color: #3DA864; } .ash-org-card__count--fail { color: #D26545; } .ash-org-card__count--na { color: var(--t3); } .ash-org-card__meta { font-size: 11.5px; color: var(--t3); } .ash-org-card__login { } .ash-org-card__chips { display: flex; flex-wrap: wrap; gap: 5px; } /* ============================================================ PROGRESS RING SVG ============================================================ */ .ash-ring { flex-shrink: 0; } .ash-ring__track { fill: none; stroke: var(--bdr); stroke-width: 3; } .ash-ring__fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; } .ash-ring__text { font-family: 'Bebas Neue', sans-serif; font-size: 11px; fill: var(--fg); letter-spacing: 0.02em; } /* ============================================================ CHIPS ============================================================ */ .ash-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; line-height: 1.2; } .ash-chip--tier { color: var(--tc); background: color-mix(in oklab, var(--tc) 12%, transparent); border: 1px solid color-mix(in oklab, var(--tc) 30%, transparent); } .ash-chip--submitted { color: #3DA864; background: rgba(61, 168, 100, 0.1); border: 1px solid rgba(61, 168, 100, 0.3); } .ash-chip--inprogress { color: var(--gold); background: var(--gglow); border: 1px solid rgba(196, 154, 44, 0.3); } .ash-chip--notstarted { color: var(--t3); background: var(--surface-soft); border: 1px solid var(--bdr); } .ash-chip--warn { color: #D26545; background: rgba(210, 101, 69, 0.09); border: 1px solid rgba(210, 101, 69, 0.3); text-transform: none; letter-spacing: 0.02em; } /* ============================================================ ACTIVITY STRIP ============================================================ */ .ash-activity { display: flex; flex-direction: column; gap: 2px; } .ash-activity__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; transition: background 0.12s; } .ash-activity__row:hover { background: var(--surface-soft); } .ash-activity__time { color: var(--t3); font-size: 11.5px; flex-shrink: 0; min-width: 68px; } .ash-activity__who { color: var(--t2); font-size: 12.5px; flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-activity__action { color: var(--fg); font-size: 12.5px; font-weight: 500; flex-shrink: 0; } .ash-activity__target { color: var(--t2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-activity-empty { font-size: 13px; color: var(--t3); padding: 16px 12px; font-style: italic; } /* ============================================================ ORGANIZATIONS TABLE ============================================================ */ .ash-orgs-bar { margin-bottom: 16px; } .ash-orgs-search { width: 100%; max-width: 360px; height: 38px; padding: 0 12px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; } .ash-orgs-search:focus { border-color: rgba(196, 154, 44, 0.5); } .ash-orgs-search::placeholder { color: var(--t3); } .ash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ash-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); padding: 10px 14px; border-bottom: 1px solid var(--bdr); white-space: nowrap; } .ash-table__row { border-bottom: 1px solid var(--bdr); transition: background 0.12s; } .ash-table__row:hover { background: var(--surface-soft); } .ash-table td { padding: 12px 14px; vertical-align: middle; color: var(--text); } .ash-table__name { color: var(--fg); } .ash-table__industry { color: var(--t2); font-size: 12.5px; } .ash-table__pct { display: flex; align-items: center; gap: 8px; } .ash-table__pct-bar { width: 80px; height: 6px; background: var(--bg3); border-radius: 100px; overflow: hidden; flex-shrink: 0; } .ash-table__pct-fill { height: 100%; background: linear-gradient(90deg, var(--gdk), var(--gold)); border-radius: 100px; transition: width 0.3s; } .ash-table__pct-num { font-size: 12px; color: var(--t2); font-weight: 600; min-width: 32px; } .ash-table__pin { font-size: 14px; } /* ============================================================ BUTTONS ============================================================ */ .ash-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; white-space: nowrap; letter-spacing: 0.02em; } .ash-btn--primary { background: var(--gold); color: #0a0a0a; border-color: var(--gold); } .ash-btn--primary:hover { background: var(--glt); border-color: var(--glt); } .ash-btn--ghost { background: transparent; color: var(--t2); border-color: var(--bdr); } .ash-btn--ghost:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); background: var(--surface-soft); } .ash-btn--danger { background: transparent; color: #D26545; border-color: rgba(210, 101, 69, 0.4); } .ash-btn--danger:hover { background: rgba(210, 101, 69, 0.08); border-color: rgba(210, 101, 69, 0.7); } .ash-btn--sm { font-size: 12px; padding: 6px 12px; border-radius: 6px; } /* ============================================================ SKELETON SHIMMER ============================================================ */ .ash-skeleton { background: linear-gradient( 90deg, var(--surface-soft) 0%, var(--card) 40%, var(--surface-soft) 80% ); background-size: 600px 100%; animation: ash-shimmer 1.4s linear infinite; border-radius: 6px; } /* ============================================================ EMPTY STATE ============================================================ */ .ash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 32px; gap: 12px; background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; margin-top: 8px; } .ash-empty__icon { color: var(--t3); } .ash-empty__icon svg { stroke: currentColor; } .ash-empty__title { font-size: 16px; font-weight: 600; color: var(--fg); } .ash-empty__body { font-size: 14px; color: var(--t2); max-width: 320px; line-height: 1.6; } /* ============================================================ COMING SOON PLACEHOLDER ============================================================ */ .ash-coming-soon { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 48px 36px; text-align: center; margin-top: 8px; } .ash-coming-soon__title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.06em; color: var(--fg); margin-bottom: 10px; } .ash-coming-soon__body { font-size: 14px; color: var(--t2); line-height: 1.65; font-style: italic; } /* ============================================================ SETTINGS ============================================================ */ .ash-settings-card { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; overflow: hidden; max-width: 560px; } .ash-settings-section { padding: 18px 22px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ash-settings-section--last { border-bottom: none; } .ash-settings-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); min-width: 180px; flex-shrink: 0; } .ash-settings-value { font-size: 14px; font-weight: 600; color: var(--fg); } .ash-settings-note { font-size: 13px; color: var(--t2); line-height: 1.6; max-width: 360px; font-style: italic; } /* ============================================================ BACK LINK ============================================================ */ .ash-back { font-size: 12.5px; color: var(--t2); text-decoration: none; padding: 6px 10px; border: 1px solid var(--bdr); border-radius: 6px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; flex-shrink: 0; } .ash-back:hover { color: var(--gold); border-color: var(--gold); } /* ============================================================ RESPONSIVE - 760px tablet ============================================================ */ @media (max-width: 760px) { .ash-side { position: fixed; top: 0; bottom: 0; left: 0; width: 248px; transform: translateX(-100%); transition: transform 0.22s ease; z-index: 115; box-shadow: none; } .ash-side--open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); } .ash-scrim { display: block; } .ash--side-collapsed .ash-side { width: 248px; transform: translateX(-100%); } .ash-top__hamburger { display: flex; } .ash-stat-row { grid-template-columns: repeat(2, 1fr); } .ash-stat-row .ash-stat-tile:last-child { grid-column: span 2; } .ash-page { padding: 20px 18px 48px; } .ash-top { padding: 0 16px; } .ash-top__admin-email { display: none; } .ash-table thead { display: none; } .ash-table, .ash-table tbody, .ash-table__row, .ash-table td { display: block; width: 100%; } .ash-table__row { padding: 12px 0; border-bottom: 1px solid var(--bdr); } .ash-table td { padding: 4px 14px; } .ash-table td:last-child { padding-top: 8px; } } /* ============================================================ RESPONSIVE - 480px phone ============================================================ */ @media (max-width: 480px) { .ash-page { padding: 14px 12px 40px; } .ash-org-grid { grid-template-columns: 1fr; } .ash-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; } .ash-stat-row .ash-stat-tile:last-child { grid-column: auto; } .ash-top { padding: 0 12px; gap: 8px; } .ash-top__search-wrap { max-width: 100%; } .ash-top__admin { display: none; } .ash-page__head { flex-direction: column; align-items: flex-start; } .ash-coming-soon { padding: 32px 18px; } } /* ============================================================ TAB BAR (org detail + future tabbed views) ============================================================ */ .ash-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bdr); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; } .ash-tabs::-webkit-scrollbar { display: none; } .ash-tabs__tab { display: inline-flex; align-items: center; padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: var(--t2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 0.14s, border-color 0.14s; } .ash-tabs__tab:hover { color: var(--fg); } .ash-tabs__tab--active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; } .ash-tab-content { padding-top: 4px; } /* ============================================================ ORG DETAIL LAYOUT ============================================================ */ .ash-od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .ash-card { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 20px 22px; } .ash-card__title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; } .ash-meta-list { display: flex; flex-direction: column; gap: 8px; } .ash-meta-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; } .ash-meta-key { min-width: 120px; flex-shrink: 0; color: var(--t2); font-size: 12.5px; } .ash-meta-val { color: var(--fg); font-weight: 500; } .ash-stats-row { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; } .ash-stats-counts { display: flex; flex-direction: column; gap: 4px; } .ash-stats-count { font-size: 12.5px; color: var(--t2); } .ash-stats-count--pass .ash-stats-num { color: #3DA864; } .ash-stats-count--fail .ash-stats-num { color: #D26545; } .ash-stats-count--na .ash-stats-num { color: var(--t3); } .ash-stats-num { font-weight: 700; font-size: 14px; margin-right: 2px; } .ash-chips-row { display: flex; flex-wrap: wrap; gap: 6px; } .ash-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } /* ============================================================ INLINE EDIT FORM ============================================================ */ .ash-inline-form { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 22px 24px; margin-top: 8px; } .ash-inline-form__title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 16px; } .ash-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; } .ash-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); } .ash-label--required::after { content: ' *'; color: #D26545; } .ash-label__note { font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--t3); } .ash-input { height: 38px; padding: 0 12px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; width: 100%; box-sizing: border-box; } .ash-input:focus { border-color: rgba(196, 154, 44, 0.5); } .ash-input::placeholder { color: var(--t3); } .ash-input--sm { height: 32px; font-size: 12px; padding: 0 10px; } .ash-input--search { max-width: 280px; } .ash-select { height: 38px; padding: 0 10px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; cursor: pointer; width: 100%; } .ash-select:focus { border-color: rgba(196, 154, 44, 0.5); } .ash-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .ash-field-note { font-size: 11px; color: var(--t3); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5; margin-top: 2px; } .ash-error-msg { color: #D26545; font-size: 13px; padding: 8px 12px; background: rgba(210, 101, 69, 0.07); border: 1px solid rgba(210, 101, 69, 0.25); border-radius: 8px; margin-top: 8px; } /* ============================================================ ANSWER PILLS ============================================================ */ .ash-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; } .ash-pill--yes { color: #3DA864; background: rgba(61,168,100,0.12); border: 1px solid rgba(61,168,100,0.3); } .ash-pill--no { color: #D26545; background: rgba(210,101,69,0.10); border: 1px solid rgba(210,101,69,0.3); } .ash-pill--na { color: var(--t3); background: var(--surface-soft); border: 1px solid var(--bdr); } .ash-pill--blank { color: var(--t3); background: transparent; border: 1px solid var(--bdr); font-style: italic; } /* ============================================================ RESPONSES TAB ============================================================ */ .ash-resp-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--card); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; } .ash-resp-counts, .ash-resp-counts--modal { display: flex; flex-wrap: wrap; gap: 14px; } .ash-resp-count { font-size: 13px; color: var(--t2); } .ash-resp-count strong { font-weight: 700; margin-right: 3px; } .ash-resp-count--yes strong { color: #3DA864; } .ash-resp-count--no strong { color: #D26545; } .ash-resp-count--na strong { color: var(--t3); } .ash-resp-count--blank strong { color: var(--t3); } .ash-resp-section { margin-bottom: 20px; } .ash-resp-section__title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bdr); } .ash-resp-empty-section { font-size: 13px; color: var(--t3); font-style: italic; padding: 8px 0; } .ash-resp-items { display: flex; flex-direction: column; } .ash-resp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; transition: background 0.12s; font-size: 13px; } .ash-resp-item:hover { background: var(--surface-soft); } .ash-resp-item--sub { padding-left: 28px; opacity: 0.85; } .ash-resp-item__label { flex: 1; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-resp-item__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ash-resp-item__comment { font-size: 12px; color: var(--t2); font-style: italic; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ EVIDENCE TAB ============================================================ */ .ash-file-link { color: var(--gold); text-decoration: none; font-weight: 500; font-size: 13px; } .ash-file-link:hover { text-decoration: underline; } .ash-table__mono { font-family: monospace; font-size: 11.5px; color: var(--t2); } .ash-table__type { font-size: 11.5px; color: var(--t3); } .ash-table__actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; } /* ============================================================ SHARE TABLE + CHIPS ============================================================ */ .ash-chip--share-active { color: #3DA864; background: rgba(61,168,100,0.1); border: 1px solid rgba(61,168,100,0.3); } .ash-chip--share-expired { color: var(--t3); background: var(--surface-soft); border: 1px solid var(--bdr); } .ash-chip--share-revoked { color: #D26545; background: rgba(210,101,69,0.09); border: 1px solid rgba(210,101,69,0.3); } .ash-table--shares td { vertical-align: middle; } .ash-share-empty { font-size: 13px; color: var(--t3); font-style: italic; padding: 20px 0; } /* ============================================================ MINT SHARE FORM ============================================================ */ .ash-mint-form { background: var(--card); border: 1px solid var(--bdr); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; } .ash-mint-form__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; } .ash-mint-form__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .ash-mint-result { margin-top: 14px; } .ash-mint-success { background: var(--bg3); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; } .ash-mint-success__label { font-size: 11.5px; color: var(--t3); margin-bottom: 8px; font-weight: 600; } .ash-mint-success__url-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ash-mint-success__url { font-size: 12px; color: var(--gold); word-break: break-all; flex: 1; } .ash-mint-success__note { font-size: 11px; color: var(--t3); } /* ============================================================ FILTER BAR (access + audit) ============================================================ */ .ash-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .ash-result-count { font-size: 12px; color: var(--t3); margin-bottom: 8px; font-weight: 500; } /* ============================================================ AUDIT TIMELINE ============================================================ */ .ash-timeline { display: flex; flex-direction: column; gap: 2px; } .ash-timeline__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; transition: background 0.12s; } .ash-timeline__row:hover { background: var(--surface-soft); } .ash-timeline__time { color: var(--t3); font-size: 11.5px; flex-shrink: 0; min-width: 72px; cursor: default; } .ash-timeline__who { color: var(--t2); font-size: 12.5px; flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-timeline__action { color: var(--fg); font-size: 12.5px; font-weight: 500; flex-shrink: 0; } .ash-timeline__target { color: var(--t2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ SUBMISSIONS TABLE + MODAL ============================================================ */ .ash-mono { font-family: monospace; font-size: 12px; color: var(--t2); } .ash-modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .ash-modal { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 16px; width: 100%; max-width: 680px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.35); overflow: hidden; } .ash-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; } .ash-modal__title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.05em; color: var(--fg); } .ash-modal__close { width: 30px; height: 30px; background: transparent; border: 1px solid var(--bdr); border-radius: 6px; color: var(--t2); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.14s, border-color 0.14s; } .ash-modal__close:hover { color: var(--gold); border-color: var(--gold); } .ash-modal__body { flex: 1; overflow-y: auto; padding: 20px 22px; } .ash-sub-header { margin-bottom: 14px; } .ash-sub-header__org { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 4px; } .ash-sub-header__time { font-size: 12.5px; color: var(--t2); } .ash-resp-counts--modal { margin-bottom: 18px; } /* ============================================================ ONBOARDING WIZARD ============================================================ */ .ash-stepper { display: flex; align-items: center; gap: 0; margin-bottom: 28px; position: relative; flex-wrap: wrap; gap: 4px; } .ash-stepper__dot { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .ash-stepper__num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--t2); transition: all 0.2s; } .ash-stepper__dot--active .ash-stepper__num { background: var(--gold); border-color: var(--gold); color: #0a0a0a; } .ash-stepper__dot--done .ash-stepper__num { background: rgba(61,168,100,0.15); border-color: #3DA864; color: #3DA864; } .ash-stepper__lbl { font-size: 12.5px; font-weight: 600; color: var(--t3); } .ash-stepper__dot--active .ash-stepper__lbl { color: var(--fg); } .ash-stepper__dot--done .ash-stepper__lbl { color: #3DA864; } .ash-stepper__line { flex: 1; height: 2px; background: var(--bdr); margin: 0 8px; min-width: 24px; max-width: 60px; border-radius: 2px; } .ash-stepper__line--done { background: #3DA864; } .ash-stepper__progress { font-size: 11px; color: var(--t3); margin-left: auto; white-space: nowrap; } .ash-wiz-panel { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 24px 26px; max-width: 680px; } .ash-wiz-panel__title { font-size: 15px; font-weight: 700; color: var(--fg); margin-bottom: 20px; } .ash-wiz-nav { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .ash-review-card { background: var(--bg3); border: 1px solid var(--bdr); border-radius: 10px; padding: 16px 18px; margin-bottom: 4px; } /* Wizard success panel */ .ash-wiz-success { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 36px 32px; max-width: 600px; text-align: center; } .ash-wiz-success__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(61,168,100,0.12); border: 2px solid #3DA864; color: #3DA864; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .ash-wiz-success__title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--fg); margin-bottom: 6px; } .ash-wiz-success__name { font-size: 15px; font-weight: 600; color: var(--gold); margin-bottom: 20px; } .ash-wiz-success__details { text-align: left; margin-bottom: 24px; } .ash-wiz-success__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ash-success-block { background: var(--bg3); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .ash-success-block--warn { border-color: rgba(210,101,69,0.35); background: rgba(210,101,69,0.05); } .ash-success-block__label { font-size: 12px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .ash-success-block__once { font-weight: 400; color: #D26545; text-transform: none; letter-spacing: 0; } .ash-success-block__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .ash-success-url, .ash-success-pin { font-family: monospace; font-size: 12.5px; color: var(--gold); word-break: break-all; flex: 1; } .ash-success-block__note { font-size: 11.5px; color: var(--t3); line-height: 1.5; } /* ============================================================ RESPONSIVE ADDITIONS - 760px ============================================================ */ @media (max-width: 760px) { .ash-od-grid { grid-template-columns: 1fr; } .ash-tabs__tab { padding: 9px 12px; font-size: 13px; } .ash-filter-bar { gap: 8px; } .ash-filter-bar .ash-input--search { max-width: 100%; } .ash-table--shares thead { display: none; } .ash-table--shares, .ash-table--shares tbody, .ash-table--shares tr, .ash-table--shares td { display: block; width: 100%; } .ash-table--shares tr { padding: 12px 0; border-bottom: 1px solid var(--bdr); } .ash-table--shares td { padding: 4px 14px; } .ash-table__actions { flex-wrap: wrap; } .ash-wiz-panel { padding: 18px 16px; } .ash-wiz-success { padding: 24px 16px; } .ash-form-grid { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE ADDITIONS - 480px ============================================================ */ @media (max-width: 480px) { .ash-tabs { gap: 0; } .ash-tabs__tab { padding: 8px 10px; font-size: 12px; } .ash-actions-row { flex-direction: column; } .ash-actions-row .ash-btn { width: 100%; justify-content: center; } .ash-stepper__lbl { display: none; } .ash-modal { margin: 0; border-radius: 14px 14px 0 0; max-height: 90vh; } .ash-modal-overlay { align-items: flex-end; padding: 0; } .ash-resp-summary { flex-direction: column; align-items: flex-start; } } /* ============================================================ INLINE RESPONSE EDITOR (Task 1) ============================================================ */ /* Each control block in the editable responses tab */ .ash-ctrl-block { background: var(--card); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s; } .ash-ctrl-block:focus-within { border-color: rgba(196, 154, 44, 0.35); } .ash-ctrl-block--sub { margin-left: 24px; background: var(--bg3); border-radius: 8px; padding: 10px 14px; } .ash-ctrl-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .ash-ctrl-num { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); flex-shrink: 0; min-width: 34px; padding-top: 1px; } .ash-ctrl-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.45; min-width: 0; } /* Collapsible explainer */ .ash-ctrl-explainer { font-size: 12px; color: var(--t2); line-height: 1.6; margin-top: 6px; padding: 8px 10px; background: var(--bg3); border-left: 2px solid var(--bdr); border-radius: 0 6px 6px 0; } .ash-ctrl-explainer-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--t3); background: transparent; border: none; padding: 0; cursor: pointer; transition: color 0.13s; margin-top: 4px; } .ash-ctrl-explainer-toggle:hover { color: var(--gold); } /* Inline answer pill buttons */ .ash-pill-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .ash-pill-btn { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; white-space: nowrap; cursor: pointer; border: 1px solid var(--bdr); background: var(--bg3); color: var(--t2); transition: background 0.13s, color 0.13s, border-color 0.13s; } .ash-pill-btn:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); background: var(--surface-soft); } .ash-pill-btn--yes-active { color: #3DA864; background: rgba(61,168,100,0.15); border-color: #3DA864; } .ash-pill-btn--no-active { color: #D26545; background: rgba(210,101,69,0.13); border-color: #D26545; } .ash-pill-btn--na-active { color: var(--t2); background: var(--surface-soft); border-color: rgba(255,255,255,0.25); } .ash-pill-btn--blank-active { color: var(--t3); background: transparent; border-color: var(--bdr); font-style: italic; } /* Comment textarea */ .ash-ctrl-comment { width: 100%; box-sizing: border-box; height: 64px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 7px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12.5px; resize: vertical; outline: none; transition: border-color 0.15s; margin-top: 6px; } .ash-ctrl-comment:focus { border-color: rgba(196, 154, 44, 0.45); } .ash-ctrl-comment::placeholder { color: var(--t3); } /* Saving indicator */ .ash-ctrl-saving { font-size: 11px; color: var(--t3); font-style: italic; margin-left: 6px; } /* ============================================================ EVIDENCE CHIPS + INLINE UPLOAD (Task 2) ============================================================ */ .ash-ev-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bdr); } .ash-ev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t2); background: var(--bg3); border: 1px solid var(--bdr); border-radius: 6px; padding: 3px 8px; text-decoration: none; transition: border-color 0.13s, color 0.13s; max-width: 180px; } .ash-ev-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); text-decoration: none; } .ash-ev-chip__del { flex-shrink: 0; background: transparent; border: none; padding: 0 2px; color: var(--t3); cursor: pointer; font-size: 13px; line-height: 1; transition: color 0.13s; } .ash-ev-chip__del:hover { color: #D26545; } .ash-ev-add-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--t3); background: transparent; border: 1px dashed var(--bdr); border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: color 0.13s, border-color 0.13s; } .ash-ev-add-btn:hover { color: var(--gold); border-color: var(--gold); } /* Evidence tab upload panel */ .ash-ev-upload-panel { background: var(--card); border: 1px solid var(--bdr); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; } .ash-ev-upload-panel__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; } .ash-ev-upload-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } /* ============================================================ CLIENT VIEW TAB (Task 3) ============================================================ */ .ash-cv-banner { display: flex; align-items: center; gap: 10px; background: rgba(196, 154, 44, 0.08); border: 1px solid rgba(196, 154, 44, 0.3); border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; font-size: 13px; color: var(--t2); line-height: 1.5; } .ash-cv-banner svg { flex-shrink: 0; stroke: var(--gold); } .ash-cv-banner strong { color: var(--gold); } .ash-cv-section { margin-bottom: 24px; } .ash-cv-section__title { font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr); } .ash-cv-item { background: var(--card); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; } .ash-cv-item--sub { margin-left: 24px; background: var(--bg3); border-radius: 8px; padding: 10px 14px; } .ash-cv-item__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .ash-cv-item__num { font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; min-width: 34px; padding-top: 1px; } .ash-cv-item__label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.45; } .ash-cv-item__explainer { font-size: 12.5px; color: var(--t2); line-height: 1.6; margin-bottom: 10px; padding: 8px 10px; background: var(--bg3); border-left: 2px solid var(--bdr); border-radius: 0 6px 6px 0; } .ash-cv-item__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ash-cv-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .ash-cv-file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gold); background: var(--bg3); border: 1px solid var(--bdr); border-radius: 6px; padding: 2px 7px; text-decoration: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-cv-file-chip:hover { border-color: var(--gold); }