/**
 * Savian AI - Minimal Professional Styling
 * Blends with Moodle's default theme
 * Subtle purple accents only
 */

/* =======================
   MINIMAL BRANDING
   ======================= */

/* Small logo - top right corner only */
.savian-logo-small {
    font-size: 14px;
    color: #6c3baa;
    font-weight: 600;
    float: right;
    opacity: 0.7;
    margin-bottom: 10px;
}

/* Subtle accent border for key feature cards */
.savian-accent-card {
    border-left: 4px solid #6c3baa;
}

/* =======================
   BUTTONS (Minimal)
   ======================= */

/* Savian branded button - ONLY for primary plugin actions */
.btn-savian {
    background: linear-gradient(135deg, #6c3baa 0%, #8b5ac8 100%);
    border-color: #6c3baa;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-savian:hover,
.btn-savian:focus,
.btn-savian:active {
    background: linear-gradient(135deg, #8b5ac8 0%, #9d6fd4 100%);
    border-color: #8b5ac8;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(108, 59, 170, 0.4);
}

.btn-savian:not(:disabled):not(.disabled):active,
.btn-savian:not(:disabled):not(.disabled).active {
    background: linear-gradient(135deg, #6c3baa 0%, #8b5ac8 100%);
    color: #fff;
}

/* =======================
   STATUS BADGES (Subtle)
   ======================= */

/* Processing status - subtle purple */
.badge-savian-processing {
    background-color: #f3f0f9;
    color: #6c3baa;
    border: 1px solid #d4c2ea;
}

/* =======================
   UTILITIES (Minimal)
   ======================= */

/* Purple text for emphasis (use sparingly) */
.savian-text-primary {
    color: #6c3baa;
}

/* Light purple background (very subtle) */
.savian-bg-light {
    background-color: #f9f8fc;
}

/* =======================
   RESPONSIVE
   ======================= */

@media (max-width: 768px) {
    .savian-logo-small {
        font-size: 12px;
    }
}

/* =======================
   NOTE: Everything else uses Moodle's default Bootstrap classes:
   - .card, .card-header, .card-body
   - .btn-primary, .btn-secondary, .btn-success
   - .table, .table-striped
   - .alert-info, .alert-success, .alert-warning
   - .badge-primary, .badge-success, .badge-secondary

   This ensures the plugin blends naturally with Moodle's theme.
   ======================= */

/* =======================
   WRITING PRACTICE
   ======================= */

.savian-wp-textarea {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.7;
    min-height: 280px;
    resize: vertical;
}

.savian-wp-cefr-badge {
    font-size: 2rem;
    font-weight: 700;
    color: #6c3baa;
    border: 3px solid #6c3baa;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    display: inline-block;
}

.savian-wp-error-mark {
    background-color: #fff3cd;
    border-bottom: 2px solid #ffc107;
    cursor: pointer;
    position: relative;
}

.savian-wp-error-mark.spelling {
    border-bottom-color: #dc3545;
    background-color: #f8d7da;
}

.savian-wp-progress-stage {
    font-size: 0.85rem;
    color: #6c3baa;
    font-style: italic;
}

.savian-wp-diff-original {
    background-color: #ffeef0;
    text-decoration: line-through;
    color: #86181d;
}

.savian-wp-diff-improved {
    background-color: #e6ffed;
    color: #145a32;
}

.savian-wp-ielts-overall-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}
.savian-wp-ielts-overall-badge {
    font-size: 3.5rem;
    font-weight: 800;
    color: #6c3baa;
    line-height: 1;
}
.savian-wp-ielts-outof {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.15rem;
}
.savian-wp-ielts-sublabel {
    font-size: 0.9rem;
    color: #343a40;
}
.savian-wp-ielts-subval {
    font-size: 0.9rem;
    font-weight: 700;
    color: #6c3baa;
}
.savian-wp-ielts-progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}
.savian-wp-ielts-bar {
    background-color: #6c3baa;
    border-radius: 4px;
    transition: width 0.6s ease;
}