/* ============================================================
   AIOS SaaS Generator & Billing Dashboard Styles
   ============================================================ */

/* Layout */
.aios-saas__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .aios-saas__two-col { grid-template-columns: 1fr; }
}

.aios-saas__panel { min-height: 320px; }

/* Form helpers */
.aios-saas .si-form-row { display: flex; gap: 16px; }
.aios-saas .si-form-row .si-form-group { flex: 1; }
.aios-saas .si-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary, var(--gray-100));
}

/* Template grid */
.aios-saas__template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.aios-saas__template-card {
    background: var(--bg-secondary, var(--navy-900));
    border: 1px solid var(--border-default, var(--navy-800));
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.aios-saas__template-card:hover { border-color: var(--accent-primary, var(--purple-600)); }
.aios-saas__template-name { font-weight: 600; color: var(--text-primary, var(--gray-100)); font-size: 14px; }
.aios-saas__template-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.aios-saas__template-stats { font-size: 12px; color: var(--text-muted, var(--gray-400)); display: flex; gap: 12px; }
.aios-saas__deploy-btn { margin-top: auto; width: 100%; }

/* Plans grid */
.aios-saas__plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.aios-saas__plan-card {
    background: var(--bg-secondary, var(--navy-900));
    border: 1px solid var(--border-default, var(--navy-800));
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aios-saas__plan-card--professional { border-color: var(--accent-primary, var(--purple-600)); }
.aios-saas__plan-card--enterprise { border-color: var(--yellow-500); }
.aios-saas__plan-name { font-weight: 700; color: var(--text-primary, var(--gray-100)); font-size: 16px; }
.aios-saas__plan-price { font-size: 22px; font-weight: 800; color: var(--accent-primary, var(--purple-600)); }
.aios-saas__plan-features { list-style: disc; padding-left: 16px; margin: 4px 0; }
.aios-saas__plan-features li { font-size: 12px; color: var(--text-secondary, #b0b0c0); margin-bottom: 2px; }

/* Result area */
.aios-saas__result-area {
    background: var(--bg-secondary, var(--navy-900));
    border: 1px solid var(--border-default, var(--navy-800));
    border-radius: 8px;
    padding: 12px;
    min-height: 200px;
    overflow-x: auto;
}
.aios-saas__gen-result { display: flex; flex-direction: column; gap: 10px; }
.aios-saas__gen-success { display: flex; align-items: center; gap: 10px; }
.aios-saas__feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Deploy link */
.aios-saas__deploy-link {
    color: var(--accent-primary, var(--purple-600));
    text-decoration: none;
    font-size: 12px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aios-saas__deploy-link:hover { text-decoration: underline; }

/* List header */
.aios-saas__list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Plan tier badges */
.si-badge--free         { background: #22c55e22; color: var(--emerald-500); }
.si-badge--starter      { background: #3b82f622; color: var(--blue-500); }
.si-badge--professional { background: #a855f722; color: #a855f7; }
.si-badge--enterprise   { background: #f59e0b22; color: var(--yellow-500); }
.si-badge--success      { background: #22c55e22; color: var(--emerald-500); }
.si-badge--danger       { background: #E9745122; color: var(--red-500); }
.si-badge--warning      { background: #f59e0b22; color: var(--yellow-500); }

/* Shared list */
.aios-saas .si-list-item { padding: 12px; border-bottom: 1px solid var(--border-default, var(--navy-800)); }
.aios-saas .si-list-item:last-child { border-bottom: none; }
.aios-saas .si-list-title { font-weight: 500; color: var(--text-primary, var(--gray-100)); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aios-saas .si-list-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted, var(--gray-400)); flex-wrap: wrap; }
.aios-saas .si-pre { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text-secondary, #b0b0c0); }
.aios-saas .si-error { color: var(--danger, var(--red-500)); font-size: 13px; }

/* Loading overlay */
.aios-saas__loading { position: relative; }
.aios-saas__loading::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(15,15,26,0.6); border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
}

/* Form validation */
.aios-saas .si-form-group--error input,
.aios-saas .si-form-group--error select { border-color: var(--red-500); }
.aios-saas .si-form-group--error .si-form-error { color: var(--red-400); font-size: 0.75rem; margin-top: 0.2rem; }