/* NJWebForge Portal Styles */

/* ============================================
   STORAGE USAGE DASHBOARD
   ============================================ */
.njwf-usage-dashboard {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    max-width: 600px;
    box-sizing: border-box !important;
}

.njwf-usage-dashboard * {
    box-sizing: border-box !important;
}

.njwf-usage-dashboard header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.njwf-usage-dashboard h3 {
    color: #e6eef6 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
}

.njwf-usage-dashboard .tier-badge {
    background: linear-gradient(135deg, #ff6a00, #ff8533) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.njwf-usage-dashboard .usage-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.njwf-usage-dashboard .usage-row:last-of-type {
    margin-bottom: 10px !important;
}

.njwf-usage-dashboard .usage-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.njwf-usage-dashboard .usage-label span {
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.njwf-usage-dashboard .usage-label span:last-child {
    color: #e6eef6 !important;
    font-weight: 500 !important;
}

.njwf-usage-dashboard .progress-bar {
    background: #0f172a !important;
    border-radius: 8px !important;
    height: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.njwf-usage-dashboard .progress {
    height: 100% !important;
    border-radius: 8px !important;
    transition: width 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.njwf-usage-dashboard .progress.unlimited {
    background: #10b981 !important;
    opacity: 0.3 !important;
    width: 100% !important;
}

.njwf-usage-dashboard footer {
    border-top: 1px solid #334155 !important;
    padding-top: 15px !important;
    margin-top: 10px !important;
    background: transparent !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.njwf-usage-dashboard footer p {
    color: #64748b !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.njwf-usage-dashboard footer strong {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .njwf-usage-dashboard {
        padding: 16px !important;
    }

    .njwf-usage-dashboard header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .njwf-usage-dashboard .usage-label {
        font-size: 13px !important;
    }
}

/* ============================================
   BUTTON TEXT WRAP (GLOBAL)
   ============================================ */
.njwf-action-btn,
.njwf-btn,
.njwf-operator-btn,
.njwf-operator-task-btn,
.njwf-operator-task-filter-btn,
.njwf-export-btn,
.njwf-plan-status-btn,
.njwf-plan-save-tpl-btn,
.njwf-plan-archive-btn,
.njwf-scan-save-btn,
.njwf-signals-dashboard button,
.njwf-signals-compact button,
button[class*="njwf-"] {
    white-space: normal !important;
    word-break: break-word;
}

/* ============================================
   SINGLE CLIENT: FORGE GLASS THEME
   ============================================ */
.single-client .njwf-single-client {
    --njwf-bg-0: #070b14;
    --njwf-bg-1: #0b1220;
    --njwf-bg-2: #111a2c;
    --njwf-border: #243147;
    --njwf-border-soft: #1c2739;
    --njwf-text: #e6eef6;
    --njwf-muted: #9fb0c8;
    --njwf-accent: #f57c20;
    --njwf-cyan: #06b6d4;
    --njwf-green: #22c55e;
    --njwf-red: #ef4444;
    color: var(--njwf-text);
    background:
        radial-gradient(900px 500px at 85% -5%, rgba(6, 182, 212, 0.10), transparent 60%),
        radial-gradient(700px 420px at 10% -10%, rgba(245, 124, 32, 0.12), transparent 58%),
        linear-gradient(180deg, var(--njwf-bg-1), var(--njwf-bg-0));
    border: 1px solid var(--njwf-border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.single-client .njwf-single-client h1,
.single-client .njwf-single-client h2,
.single-client .njwf-single-client h3,
.single-client .njwf-single-client h4 {
    color: #f4f8ff;
}

.single-client .njwf-single-client p,
.single-client .njwf-single-client span,
.single-client .njwf-single-client label,
.single-client .njwf-single-client li {
    color: var(--njwf-muted);
}

.single-client .njwf-single-client input,
.single-client .njwf-single-client select,
.single-client .njwf-single-client textarea {
    background: #0b1526;
    border: 1px solid var(--njwf-border);
    color: var(--njwf-text);
}

.single-client .njwf-single-client input:focus,
.single-client .njwf-single-client select:focus,
.single-client .njwf-single-client textarea:focus {
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}

.single-client .njwf-single-client .njwf-action-btn,
.single-client .njwf-single-client .njwf-operator-btn,
.single-client .njwf-single-client .njwf-operator-task-btn {
    border: 1px solid #30425f;
    border-radius: 10px;
    background: linear-gradient(180deg, #141f33, #0e1627);
    color: #dce7f7;
}

.single-client .njwf-single-client .njwf-action-btn.primary {
    border-color: #c86f2b;
    background: linear-gradient(135deg, rgba(245, 124, 32, 0.92), rgba(201, 99, 23, 0.9));
    color: #fff;
    box-shadow: 0 10px 24px rgba(245, 124, 32, 0.28);
}

.single-client .njwf-single-client .njwf-action-btn:hover,
.single-client .njwf-single-client .njwf-operator-btn:hover,
.single-client .njwf-single-client .njwf-operator-task-btn:hover {
    border-color: rgba(6, 182, 212, 0.65);
    transform: translateY(-1px);
}

.single-client .njwf-single-client .njwf-client-lite-panel,
.single-client .njwf-single-client .njwf-profile-folder-card,
.single-client .njwf-single-client .njwf-brand-card,
.single-client .njwf-single-client .njwf-overview-card,
.single-client .njwf-single-client .njwf-growth-text-card,
.single-client .njwf-single-client .njwf-niche-intel-card,
.single-client .njwf-single-client .njwf-operator-card,
.single-client .njwf-single-client .njwf-operator-tasks,
.single-client .njwf-single-client .njwf-opdebug-card,
.single-client .njwf-single-client .njwf-workflow-preview,
.single-client .njwf-single-client .njwf-chat-window,
.single-client .njwf-single-client .njwf-plan-card,
.single-client .njwf-single-client .njwf-storage-box {
    background: linear-gradient(180deg, rgba(17, 26, 44, 0.92), rgba(11, 18, 32, 0.95));
    border: 1px solid var(--njwf-border-soft);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 32px rgba(0, 0, 0, 0.35);
}

.single-client .njwf-single-client .njwf-operator-stage,
.single-client .njwf-single-client .njwf-client-lite-stat,
.single-client .njwf-single-client .njwf-profile-folder-item {
    background: rgba(8, 13, 24, 0.65);
    border: 1px solid #24324a;
    border-radius: 10px;
}

.single-client .njwf-single-client .njwf-operator-task-row {
    background: rgba(8, 13, 24, 0.72);
    border: 1px solid #25344f;
    border-radius: 10px;
}

.single-client .njwf-single-client .njwf-operator-task-priority.high {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fecaca;
}

.single-client .njwf-single-client .njwf-operator-task-priority.medium {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fde68a;
}

.single-client .njwf-single-client .njwf-operator-task-priority.low {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.42);
    color: #bbf7d0;
}

.single-client .njwf-single-client .njwf-client-lite-health.green {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.44);
}

.single-client .njwf-single-client .njwf-client-lite-health.yellow {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.44);
}

.single-client .njwf-single-client .njwf-client-lite-health.red {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.44);
}

.single-client .njwf-single-client .njwf-qw-icon,
.single-client .njwf-single-client .njwf-chip,
.single-client .njwf-single-client .njwf-fc-chip,
.single-client .njwf-single-client .njwf-profile-chip {
    background: rgba(6, 182, 212, 0.15);
    color: #8be9ff;
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 999px;
}

.single-client .njwf-single-client .njwf-modal,
.single-client .njwf-single-client .njwf-modal-body,
.single-client .njwf-single-client .njwf-modal-header,
.single-client .njwf-single-client .njwf-modal-footer {
    background: #0b1322;
    border-color: #25344f;
    color: var(--njwf-text);
}