✏️ Editing: admin.css

/*license css**/ 
.formlayer-license-tab {
padding: 20px 0;
}

.formlayer-license-card {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
overflow: hidden;
max-width: 850px;
margin: 0 auto;
margin-top: 50px;
}

.formlayer-license-row {
display: flex;
padding: 16px 24px;
border-bottom: 1px solid #f1f5f9;
align-items: center;
}

.formlayer-license-row:last-child {
border-bottom: none;
}

.formlayer-license-label {
flex: 0 0 250px;
font-weight: 700;
color: #1e293b;
font-size: 14px;
}

.formlayer-license-value {
flex: 1;
color: #64748b;
font-size: 14px;
display: flex;
align-items: center;
}

.formlayer-license-value.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px;
letter-spacing: 0.3px;
}

/* Badge for Unlicensed */
.formlayer-license-badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: #fff1f2;
color: #e11d48;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
border: 1px solid #ffe4e6;
margin-right: 15px;
}

/* License Input Field */
.formlayer-license-input-wrapper {
display: flex;
flex-direction: column;
gap: 15px;
}

.formlayer-license-input-row {
display: flex;
align-items: center;
}

.formlayer-license-input {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 16px;
width: 380px;
font-size: 14px;
color: #475569;
transition: all 0.2s;
}

.formlayer-license-input:focus {
border-color: #5525d9;
outline: none;
box-shadow: 0 0 0 3px rgba(85, 37, 217, 0.1);
}

/* Update Button */
.formlayer-license-btn {
background: #5525d9;
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
width: fit-content;
}

.formlayer-license-btn:hover {
background: #441eb5;
}

.formlayer-license-buttons{
display: flex;
gap: 10px;
margin-top: 10px;
}

.formlayer-license-btn-delete{
background-color: white;
color: #441eb5;
border-color: white;
}

.formlayer-license-btn-delete:hover{
background-color: #441eb5;
border-color: #441eb5;
color: white;
}

/* Success status text (.htaccess, etc.) */
.formlayer-text-success {
color: #16a34a;
font-weight: 700;
}

.formlayer-text-danger {
color: #ef4444;
font-weight: 700;
}

.formlayer-license-notice {
max-width: 850px;
margin: 20px auto 0;
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
line-height: 1.6;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.formlayer-license-notice-success {
background: #f0fdf4;
color: #115e59;
border: 1px solid #86efac;
}

.formlayer-license-notice-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}

/* Info container for status/expiry */
.formlayer-license-info {
margin-top: 12px;
font-size: 13px;
color: #94a3b8;
display: flex;
gap: 20px;
}

.formlayer-license-info span b {
color: #475569;
}

/* Integrations UI */
.formlayer-configure-int {
width: 100%;
justify-content: center;
display: flex;
}

#int-settings-fields .formlayer-setting-row {
border-bottom: 1px solid #f1f5f9;
padding: 15px 0;
}

#int-settings-fields .formlayer-setting-row:last-child {
border-bottom: none;
}

#int-settings-fields label {
font-size: 14px;
font-weight: 600;
color: #334155;
}

#int-settings-fields .formlayer-input {
margin-top: 5px;
}

/* Reports Dashboard Styles */
.formlayer-reports-filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 16px 24px;
border-radius: 12px;
border: 1px solid var(--formlayer-border);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Stat Card Colors & Left Border Indicator Styles on Core Classes */
.formlayer-stat-card {
position: relative;
overflow: hidden;
}
.formlayer-stat-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
}
.formlayer-stat-card.stat-total::after {
background: var(--formlayer-primary);
}
.formlayer-stat-card.stat-read::after {
background: #10b981;
}
.formlayer-stat-card.stat-unread::after {
background: #f59e0b;
}

.stat-total .formlayer-stat-icon {
background: rgba(85, 37, 214, 0.08);
color: var(--formlayer-primary);
}
.stat-read .formlayer-stat-icon {
background: rgba(16, 185, 129, 0.08);
color: #10b981;
}
.stat-unread .formlayer-stat-icon {
background: rgba(245, 158, 11, 0.08);
color: #f59e0b;
}

.formlayer-reports-charts-grid {
display: grid;
grid-template-columns: 2fr 1.2fr;
gap: 24px;
margin-bottom: 30px;
min-width: 0;
}
.formlayer-reports-charts-grid.single-col {
grid-template-columns: 1fr;
}
.formlayer-reports-chart-card {
background: #ffffff;
border: 1px solid var(--formlayer-border);
border-radius: 16px;
padding: 24px;
box-shadow: var(--formlayer-shadow);
min-width: 0;
overflow: hidden;
}
.formlayer-reports-chart-card-title {
font-size: 16px;
font-weight: 700;
color: var(--formlayer-text-dark);
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 8px;
}
.formlayer-reports-chart-container {
position: relative;
height: 280px;
width: 100%;
min-width: 0;
overflow: hidden;
}
.formlayer-reports-secondary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
min-width: 0;
}
.formlayer-reports-no-data {
text-align: center;
padding: 60px 20px;
color: var(--formlayer-text-muted);
}
.formlayer-reports-no-data-icon {
font-size: 48px;
margin-bottom: 16px;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1024px) {
.formlayer-reports-charts-grid {
grid-template-columns: 1fr !important;
}
.formlayer-reports-secondary-grid {
grid-template-columns: 1fr !important;
}
}

/* ── Conversion stat card ─────────────────────────────── */
.formlayer-stat-card.stat-conversion::after {
background: #3b82f6;
}
.stat-conversion .formlayer-stat-icon {
background: rgba(59,130,246,0.08);
color: #3b82f6;
}

/* ── Chart card header with tabs ──────────────────────── */
.formlayer-reports-chart-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.formlayer-reports-chart-card-header .formlayer-reports-chart-card-title {
margin: 0;
}
.formlayer-trend-tabs {
display: flex;
gap: 4px;
background: #f1f5f9;
border-radius: 8px;
padding: 3px;
}
.formlayer-trend-tab {
background: none;
border: none;
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.2s;
}
.formlayer-trend-tab.active {
background: #ffffff;
color: #5525d6;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Device Legend ───────────────────────────────────── */
.formlayer-device-legend {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.formlayer-device-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #475569;
}
.formlayer-device-legend-item strong {
margin-left: auto;
color: #1e293b;
}
.formlayer-device-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}

/* ── Heatmap ─────────────────────────────────────────── */
.formlayer-heatmap-wrap {
overflow-x: auto;
}
.formlayer-heatmap-grid {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 480px;
}
.formlayer-heatmap-row {
display: grid;
grid-template-columns: 36px repeat(8, 1fr);
gap: 3px;
align-items: center;
}
.formlayer-heatmap-day-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-align: right;
padding-right: 6px;
}
.formlayer-heatmap-hour-label {
font-size: 10px;
color: #94a3b8;
text-align: center;
}
.formlayer-heatmap-cell {
height: 32px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
cursor: default;
transition: transform 0.15s;
}
.formlayer-heatmap-cell:hover {
transform: scale(1.15);
z-index: 2;
position: relative;
}
.formlayer-heatmap-header .formlayer-heatmap-day-label {
height: auto;
}

/* ── Form Performance Table ─────────────────────────── */
.formlayer-perf-table th,
.formlayer-perf-table td {
white-space: nowrap;
}
.formlayer-conv-bar-wrap {
background: #f1f5f9;
border-radius: 99px;
height: 7px;
min-width: 80px;
overflow: hidden;
}
.formlayer-conv-bar {
height: 100%;
border-radius: 99px;
transition: width 0.6s ease;
}

@keyframes fl-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: fl-spin 1s infinite linear;
}

Advanced Web Server Manager