Add: AssetsPage Master-Detail Redesign + API-Response Fix
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -3209,3 +3209,850 @@ mark {
|
||||
.bv-contract-grid { grid-template-columns: 1fr; }
|
||||
.bv-lic-summary { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
ASSETS PAGE — Master-Detail Layout (.ap-*)
|
||||
============================================================================ */
|
||||
|
||||
/* ── Page wrapper ── */
|
||||
.ap-page {
|
||||
display: flex;
|
||||
height: calc(100vh - var(--topbar-height, 60px));
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ── Left Panel ── */
|
||||
.ap-left-panel {
|
||||
width: 340px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.015);
|
||||
}
|
||||
|
||||
.ap-left-header {
|
||||
padding: 20px 16px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ap-panel-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ap-panel-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
.ap-panel-badge {
|
||||
background: rgba(13,148,136,0.2);
|
||||
color: #0d9488;
|
||||
border: 1px solid rgba(13,148,136,0.3);
|
||||
border-radius: 12px;
|
||||
padding: 2px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Search Toggle ── */
|
||||
.ap-search-toggle {
|
||||
display: flex;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ap-search-toggle-btn {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.ap-search-toggle-btn--active {
|
||||
background: rgba(13,148,136,0.2);
|
||||
color: #0d9488;
|
||||
}
|
||||
.ap-search-toggle-btn:hover:not(.ap-search-toggle-btn--active) { color: #94a3b8; }
|
||||
|
||||
/* ── Search Box ── */
|
||||
.ap-search-box {
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ap-search-input {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px 8px 34px;
|
||||
color: #f1f5f9;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-search-input::placeholder { color: #475569; }
|
||||
.ap-search-input:focus { border-color: rgba(13,148,136,0.5); }
|
||||
.ap-search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Filter Pills ── */
|
||||
.ap-pills-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.ap-pill {
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
.ap-pill:hover { border-color: rgba(255,255,255,0.2); color: #f1f5f9; }
|
||||
.ap-pill--active {
|
||||
background: rgba(13,148,136,0.2);
|
||||
border-color: rgba(13,148,136,0.5);
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
/* ── Stat Grid ── */
|
||||
.ap-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.ap-stat-card {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.ap-stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #f1f5f9;
|
||||
line-height: 1;
|
||||
}
|
||||
.ap-stat-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.ap-stat-card--teal .ap-stat-value { color: #0d9488; }
|
||||
.ap-stat-card--green .ap-stat-value { color: #34d399; }
|
||||
.ap-stat-card--amber .ap-stat-value { color: #f59e0b; }
|
||||
|
||||
/* ── User Filter Banner ── */
|
||||
.ap-user-filter-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(96,165,250,0.1);
|
||||
border: 1px solid rgba(96,165,250,0.25);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
margin: 0 16px 8px;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: #93c5fd;
|
||||
}
|
||||
.ap-user-filter-text { flex: 1; min-width: 0; }
|
||||
.ap-user-filter-text strong { color: #bfdbfe; }
|
||||
.ap-user-filter-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
.ap-user-filter-clear:hover { color: #ef4444; }
|
||||
|
||||
/* ── Asset List ── */
|
||||
.ap-asset-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.ap-asset-list::-webkit-scrollbar { width: 4px; }
|
||||
.ap-asset-list::-webkit-scrollbar-track { background: transparent; }
|
||||
.ap-asset-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||||
|
||||
.ap-asset-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.ap-asset-item:hover { background: rgba(255,255,255,0.04); }
|
||||
.ap-asset-item--active {
|
||||
background: rgba(13,148,136,0.1);
|
||||
border-color: rgba(13,148,136,0.3);
|
||||
}
|
||||
|
||||
.ap-asset-icon-wrap {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ap-asset-item--active .ap-asset-icon-wrap { background: rgba(13,148,136,0.15); }
|
||||
|
||||
.ap-asset-info { flex: 1; min-width: 0; }
|
||||
.ap-asset-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #f1f5f9;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ap-asset-sub {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ap-asset-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Status Badges ── */
|
||||
.ap-status-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ap-badge-available { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
|
||||
.ap-badge-assigned { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
|
||||
.ap-badge-inactive { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
|
||||
.ap-badge-damaged { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
|
||||
|
||||
.ap-type-badge {
|
||||
background: rgba(13,148,136,0.15);
|
||||
color: #0d9488;
|
||||
border: 1px solid rgba(13,148,136,0.3);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ── Online Dot ── */
|
||||
.ap-online-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #475569;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ap-online-dot--on { background: #34d399; box-shadow: 0 0 4px rgba(52,211,153,0.6); }
|
||||
|
||||
/* ── Online Badge ── */
|
||||
.ap-online-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.ap-online-badge--on { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
|
||||
.ap-online-badge--off { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
|
||||
|
||||
/* ── Right Panel ── */
|
||||
.ap-right-panel {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
min-width: 0;
|
||||
}
|
||||
.ap-right-panel::-webkit-scrollbar { width: 6px; }
|
||||
.ap-right-panel::-webkit-scrollbar-track { background: transparent; }
|
||||
.ap-right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
|
||||
|
||||
/* ── Empty State ── */
|
||||
.ap-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
color: #475569;
|
||||
text-align: center;
|
||||
}
|
||||
.ap-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
|
||||
.ap-empty-text { font-size: 15px; font-weight: 600; color: #64748b; }
|
||||
.ap-empty-sub { font-size: 13px; color: #475569; margin-top: 5px; }
|
||||
|
||||
/* ── Detail Header ── */
|
||||
.ap-detail-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ap-detail-icon-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: rgba(13,148,136,0.15);
|
||||
border: 1px solid rgba(13,148,136,0.3);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ap-detail-title-area { flex: 1; }
|
||||
.ap-detail-name {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #f1f5f9;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ap-detail-sub {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ap-detail-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ap-detail-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
/* ── Buttons ── */
|
||||
.ap-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.15s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
color: #94a3b8;
|
||||
}
|
||||
.ap-btn-outline:hover { border-color: rgba(255,255,255,0.3); color: #f1f5f9; }
|
||||
.ap-btn-teal { background: #0d9488; color: #fff; }
|
||||
.ap-btn-teal:hover { background: #0f766e; }
|
||||
.ap-btn-teal:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.ap-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.ap-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
|
||||
.ap-btn-danger-outline {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(239,68,68,0.3);
|
||||
color: #ef4444;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.ap-btn-danger-outline:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); }
|
||||
.ap-btn-icon {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #94a3b8;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-btn-icon:hover { background: rgba(255,255,255,0.1); }
|
||||
|
||||
/* ── More Menu ── */
|
||||
.ap-more-wrap { position: relative; }
|
||||
.ap-more-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
background: #1e293b;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
||||
min-width: 200px;
|
||||
overflow: hidden;
|
||||
z-index: 200;
|
||||
}
|
||||
.ap-more-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #f1f5f9;
|
||||
transition: background 0.12s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-more-item:last-child { border-bottom: none; }
|
||||
.ap-more-item:hover { background: rgba(255,255,255,0.06); }
|
||||
.ap-more-item--danger { color: #ef4444; }
|
||||
.ap-more-item--danger:hover { background: rgba(239,68,68,0.08); }
|
||||
|
||||
/* ── KPI Grid ── */
|
||||
.ap-kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ap-kpi-card {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 14px 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.ap-kpi-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ap-kpi-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #f1f5f9;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.ap-kpi-sub { font-size: 11px; color: #64748b; margin-top: 3px; }
|
||||
.ap-kpi-card--amber .ap-kpi-value { color: #f59e0b; }
|
||||
.ap-kpi-card--amber { border-color: rgba(245,158,11,0.2); }
|
||||
.ap-kpi-card--red .ap-kpi-value { color: #ef4444; }
|
||||
.ap-kpi-card--red { border-color: rgba(239,68,68,0.2); }
|
||||
.ap-kpi-card--green .ap-kpi-value { color: #34d399; }
|
||||
.ap-kpi-card--blue .ap-kpi-value { color: #60a5fa; }
|
||||
|
||||
/* ── Tab Bar ── */
|
||||
.ap-tab-bar {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ap-tab {
|
||||
padding: 10px 18px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s;
|
||||
margin-bottom: -1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ap-tab:hover { color: #94a3b8; }
|
||||
.ap-tab--active { color: #0d9488; border-bottom-color: #0d9488; }
|
||||
|
||||
/* ── Content Grid ── */
|
||||
.ap-content-grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Card ── */
|
||||
.ap-card {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.ap-card-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* ── Info Row ── */
|
||||
.ap-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.ap-info-row:last-child { border-bottom: none; }
|
||||
.ap-info-label { color: #64748b; font-size: 12px; }
|
||||
.ap-info-value {
|
||||
color: #f1f5f9;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.ap-copy-btn {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
transition: all 0.12s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-copy-btn:hover { background: rgba(255,255,255,0.1); color: #94a3b8; }
|
||||
|
||||
/* ── AfA Bar ── */
|
||||
.ap-afa-bar-wrap { margin-top: 10px; }
|
||||
.ap-afa-bar-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.ap-progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ap-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.ap-fill-teal { background: linear-gradient(90deg, #0d9488, #14b8a6); }
|
||||
.ap-fill-green { background: linear-gradient(90deg, #059669, #34d399); }
|
||||
.ap-fill-amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
|
||||
.ap-fill-red { background: linear-gradient(90deg, #dc2626, #ef4444); }
|
||||
.ap-afa-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #475569;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── User Card ── */
|
||||
.ap-user-card-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ap-user-avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #0d9488, #0891b2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ap-user-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
|
||||
.ap-user-pos { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* ── Agent Metric ── */
|
||||
.ap-agent-metric {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ap-agent-metric-label { font-size: 12px; color: #64748b; width: 40px; flex-shrink: 0; }
|
||||
.ap-agent-metric-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
|
||||
.ap-agent-metric-value { font-size: 12px; color: #94a3b8; width: 90px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
/* ── Timeline ── */
|
||||
.ap-timeline { position: relative; padding-left: 24px; }
|
||||
.ap-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.ap-timeline-item { position: relative; margin-bottom: 16px; }
|
||||
.ap-timeline-dot {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #0d9488;
|
||||
border: 2px solid #0f172a;
|
||||
}
|
||||
.ap-timeline-dot--planned { background: #f59e0b; }
|
||||
.ap-timeline-date { font-size: 11px; color: #64748b; margin-bottom: 3px; }
|
||||
.ap-timeline-title { font-size: 13px; font-weight: 500; color: #f1f5f9; }
|
||||
.ap-timeline-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* ── History Table ── */
|
||||
.ap-history-table { width: 100%; border-collapse: collapse; }
|
||||
.ap-history-table th {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.ap-history-table td {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.ap-history-table tr:last-child td { border-bottom: none; }
|
||||
.ap-history-table td:first-child { color: #f1f5f9; }
|
||||
|
||||
/* ── Agent Data Grid ── */
|
||||
.ap-agent-data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── Document Items ── */
|
||||
.ap-doc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.ap-doc-item:hover { background: rgba(255,255,255,0.06); }
|
||||
.ap-doc-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(96,165,250,0.1);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ap-doc-name { font-size: 13px; font-weight: 500; color: #f1f5f9; }
|
||||
.ap-doc-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* ── Modal ── */
|
||||
.ap-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.ap-modal {
|
||||
background: #1e293b;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 14px;
|
||||
width: 90vw;
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
||||
}
|
||||
.ap-modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ap-modal-title { font-size: 16px; font-weight: 700; color: #f1f5f9; }
|
||||
.ap-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ap-modal-body { padding: 0 24px 16px; }
|
||||
.ap-modal-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.ap-modal-section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #64748b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* ── Form in Modal ── */
|
||||
.ap-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
|
||||
.ap-form-row { display: flex; flex-direction: column; gap: 5px; }
|
||||
.ap-form-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.ap-form-input {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 7px;
|
||||
padding: 8px 10px;
|
||||
color: #f1f5f9;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
}
|
||||
.ap-form-input:focus { border-color: rgba(13,148,136,0.5); }
|
||||
.ap-form-input::placeholder { color: #475569; }
|
||||
.ap-form-input option { background: #1e293b; color: #f1f5f9; }
|
||||
|
||||
/* ── Light Theme Overrides ── */
|
||||
html[data-theme="light"] .ap-left-panel {
|
||||
background: rgba(0,0,0,0.02);
|
||||
border-right-color: #e2e8f0;
|
||||
}
|
||||
html[data-theme="light"] .ap-panel-title { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-search-input { background: #ffffff; border-color: #e2e8f0; color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-search-input:focus { border-color: #008487; }
|
||||
html[data-theme="light"] .ap-search-input::placeholder { color: #94a3b8; }
|
||||
html[data-theme="light"] .ap-asset-item:hover { background: rgba(0,0,0,0.03); }
|
||||
html[data-theme="light"] .ap-asset-item--active { background: rgba(0,132,135,0.07); border-color: rgba(0,132,135,0.3); }
|
||||
html[data-theme="light"] .ap-asset-name { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-asset-sub { color: #6e6e73; }
|
||||
html[data-theme="light"] .ap-stat-card { background: rgba(0,0,0,0.03); border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-stat-value { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-detail-name { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-card { background: #ffffff; border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-kpi-card { background: #ffffff; border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-kpi-value { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-info-value { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-info-row { border-bottom-color: #f1f5f9; }
|
||||
html[data-theme="light"] .ap-modal { background: #ffffff; border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-modal-title { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-form-input { background: #ffffff; border-color: #e2e8f0; color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-form-input option { background: #ffffff; color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-more-menu { background: #ffffff; border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-more-item { color: #1d1d1f; border-bottom-color: #f1f5f9; }
|
||||
html[data-theme="light"] .ap-more-item:hover { background: #f5f5f7; }
|
||||
html[data-theme="light"] .ap-timeline::before { background: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-timeline-title { color: #1d1d1f; }
|
||||
html[data-theme="light"] .ap-asset-icon-wrap { background: rgba(0,0,0,0.05); }
|
||||
html[data-theme="light"] .ap-detail-icon-box { background: rgba(0,132,135,0.08); border-color: rgba(0,132,135,0.2); }
|
||||
html[data-theme="light"] .ap-search-toggle { background: rgba(0,0,0,0.04); border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-pill { color: #6e6e73; border-color: #e2e8f0; }
|
||||
html[data-theme="light"] .ap-pill:hover { color: #1d1d1f; border-color: #94a3b8; }
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1100px) {
|
||||
.ap-kpi-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.ap-content-grid2 { grid-template-columns: 1fr; }
|
||||
.ap-agent-data-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.ap-left-panel { display: none; }
|
||||
.ap-right-panel { padding: 16px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user