/* ================================================================
   CANreduce — App Stylesheet
   Palette: warm off-white bg, sage green primary, slate text
================================================================ */

:root {
    --rp-primary:       #5b8a6e;
    --rp-primary-dark:  #4a7360;
    --rp-primary-light: #eaf3ee;
    --rp-bg:            #f7f5f0;
    --rp-surface:       #ffffff;
    --rp-border:        #e4e2dc;
    --rp-text:          #2d3748;
    --rp-text-muted:    #718096;
    --rp-success:       #68a875;
    --rp-danger:        #c0666a;
    --rp-shadow:        0 2px 12px rgba(0,0,0,.07);
    --rp-radius:        12px;
    --rp-radius-sm:     8px;
    --rp-font:          'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Bootstrap overrides ─────────────────────────────────────── */
body {
    font-family:      var(--rp-font);
    background-color: var(--rp-bg);
    color:            var(--rp-text);
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
    font-size:        0.9375rem;
}

.btn-primary, .btn-primary:focus {
    background-color: var(--rp-primary);
    border-color:     var(--rp-primary);
    color:            #fff;
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--rp-primary-dark);
    border-color:     var(--rp-primary-dark);
}
.btn-outline-primary {
    color:        var(--rp-primary);
    border-color: var(--rp-primary);
}
.btn-outline-primary:hover {
    background-color: var(--rp-primary);
    border-color:     var(--rp-primary);
}
.text-primary { color: var(--rp-primary) !important; }
a { color: var(--rp-primary); }
a:hover { color: var(--rp-primary-dark); }

.form-control:focus,
.form-select:focus {
    border-color: var(--rp-primary);
    box-shadow:   0 0 0 3px rgba(91,138,110,.15);
}

/* ── Utility ─────────────────────────────────────────────────── */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.opacity-40 { opacity: .4; }

/* ── Navbar ──────────────────────────────────────────────────── */
.rp-navbar {
    background-color: var(--rp-surface);
    border-bottom:    1px solid var(--rp-border);
    box-shadow:       0 1px 4px rgba(0,0,0,.04);
    padding:          .75rem 0;
}
.rp-brand {
    font-weight: 600;
    font-size:   1.1rem;
    color:       var(--rp-primary) !important;
    display:     flex;
    align-items: center;
    gap:         .5rem;
    text-decoration: none;
}
.rp-brand-icon {
    width:            34px;
    height:           34px;
    background:       var(--rp-primary-light);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--rp-primary);
    font-size:        1rem;
}
.rp-navbar .nav-link {
    color:         var(--rp-text-muted);
    font-weight:   500;
    padding:       .4rem .75rem;
    border-radius: var(--rp-radius-sm);
    transition:    background .15s, color .15s;
}
.rp-navbar .nav-link:hover,
.rp-navbar .nav-link.active {
    color:            var(--rp-primary);
    background-color: var(--rp-primary-light);
}
.rp-avatar {
    width:            32px;
    height:           32px;
    border-radius:    50%;
    background:       var(--rp-primary);
    color:            #fff;
    font-weight:      600;
    font-size:        .8rem;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
}
.rp-user-menu { display: flex; align-items: center; }

/* ── Main layout ─────────────────────────────────────────────── */
.rp-main {
    flex: 1;
    padding-bottom: 2rem;
}
.rp-main--auth {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         2rem 1rem;
}
.rp-footer {
    padding:          1.25rem 0;
    border-top:       1px solid var(--rp-border);
    background-color: var(--rp-surface);
}

/* ── Auth card ───────────────────────────────────────────────── */
.rp-auth-card {
    background:    var(--rp-surface);
    border-radius: var(--rp-radius);
    box-shadow:    var(--rp-shadow);
    padding:       2.5rem 2rem;
    width:         100%;
    max-width:     440px;
    border:        1px solid var(--rp-border);
}
.rp-lang-switcher { font-size: .8rem; }
.rp-lang-switcher a { color: var(--rp-text-muted); text-decoration: none; padding: 0 .2rem; }
.rp-lang-switcher a.active { color: var(--rp-primary); font-weight: 600; }
.rp-lang-switcher a:hover { color: var(--rp-primary); }

.rp-auth-logo {
    font-size:   2.2rem;
    color:       var(--rp-primary);
    text-align:  center;
    margin-bottom: 1rem;
}
.rp-auth-title {
    font-size:   1.5rem;
    font-weight: 600;
    text-align:  center;
    margin-bottom: .25rem;
}
.rp-auth-subtitle {
    text-align:    center;
    color:         var(--rp-text-muted);
    margin-bottom: 1.75rem;
    font-size:     .9rem;
}
.rp-link {
    color:           var(--rp-primary);
    text-decoration: none;
    font-weight:     500;
}
.rp-link:hover { text-decoration: underline; }

/* ── Card ────────────────────────────────────────────────────── */
.rp-card {
    background:    var(--rp-surface);
    border-radius: var(--rp-radius);
    border:        1px solid var(--rp-border);
    box-shadow:    var(--rp-shadow);
}

/* ── Dashboard ───────────────────────────────────────────────── */
.rp-module-card {
    transition: transform .15s, box-shadow .15s;
}
.rp-module-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.rp-module-img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--rp-radius) var(--rp-radius) 0 0;
    display: block;
}
.rp-module-desc {
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}
.rp-badge-success {
    background-color: var(--rp-primary-light);
    color:            var(--rp-primary);
    font-weight:      500;
}

/* ── Progress bar ────────────────────────────────────────────── */
.rp-progress-bar {
    border-radius: 999px;
    background:    #e9ecef;
    overflow:      hidden;
}
.rp-progress-fill {
    background-color: var(--rp-primary) !important;
    border-radius:    999px;
    transition:       width .4s ease;
}
.rp-progress-pct {
    font-weight: 600;
    color:       var(--rp-primary);
}

/* ── Module view ─────────────────────────────────────────────── */
.rp-page-title {
    font-size:   1.4rem;
    font-weight: 600;
    line-height: 1.3;
}
.rp-module-content .rp-card {
    line-height: 1.75;
}
.rp-module-content h3,
.rp-module-content h4 {
    margin-top:    1.5rem;
    margin-bottom: .75rem;
    font-weight:   600;
}
.rp-module-content p { margin-bottom: 1rem; }
.rp-module-content ul,
.rp-module-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.rp-module-content li { margin-bottom: .35rem; }
.rp-module-content blockquote {
    border-left:  4px solid var(--rp-primary-light);
    padding-left: 1rem;
    color:        var(--rp-text-muted);
    font-style:   italic;
    margin:       1.25rem 0;
}
.rp-module-content img {
    max-width:     100%;
    border-radius: var(--rp-radius-sm);
    margin:        1rem 0;
}
.rp-btn-back { font-size: .85rem; }
.rp-btn-nav  { min-width: 160px; }

/* ── Interactive components ──────────────────────────────────── */
.rp-component {
    background:    var(--rp-primary-light);
    border-radius: var(--rp-radius-sm);
    padding:       1.25rem 1.5rem;
    border:        1px solid rgba(91,138,110,.2);
}
.rp-component-label {
    display:       block;
    font-weight:   600;
    margin-bottom: .75rem;
    color:         var(--rp-text);
    font-size:     .95rem;
}
.rp-form-check .form-check-input:checked {
    background-color: var(--rp-primary);
    border-color:     var(--rp-primary);
}
.rp-form-check .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(91,138,110,.2);
}
.rp-radio-group .rp-form-check,
.rp-checkbox-group .rp-form-check {
    padding:       .5rem .75rem;
    border-radius: var(--rp-radius-sm);
    transition:    background .12s;
    cursor:        pointer;
    margin-bottom: .25rem;
}
.rp-radio-group .rp-form-check:hover,
.rp-checkbox-group .rp-form-check:hover {
    background: rgba(255,255,255,.6);
}
.rp-textarea {
    min-height:  110px;
    resize:      vertical;
}

/* Slider */
.rp-slider { accent-color: var(--rp-primary); cursor: pointer; }
.rp-slider-value {
    font-size:   1rem;
    min-width:   2rem;
    text-align:  center;
}

/* Likert */
.rp-likert { flex-wrap: wrap; }
.rp-likert-item { min-width: 60px; }
.rp-likert-label {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
    padding:          .6rem .25rem;
    border-radius:    var(--rp-radius-sm);
    border:           2px solid var(--rp-border);
    cursor:           pointer;
    transition:       border-color .15s, background .15s;
    background:       var(--rp-surface);
    gap:              .25rem;
}
.rp-likert-label:hover {
    border-color: var(--rp-primary);
    background:   var(--rp-primary-light);
}
.rp-likert-input:checked + .rp-likert-label {
    border-color:     var(--rp-primary);
    background:       var(--rp-primary);
    color:            #fff;
}
.rp-likert-num { font-weight: 700; font-size: 1.1rem; }
.rp-likert-text { font-size: .7rem; line-height: 1.2; }

/* ── Settings ────────────────────────────────────────────────── */
.rp-settings-section-title {
    padding-bottom: .75rem;
    border-bottom:  1px solid var(--rp-border);
    color:          var(--rp-text);
}
.rp-privacy-note {
    background:    var(--rp-bg);
    border-radius: var(--rp-radius-sm);
    padding:       .6rem .85rem;
}
.rp-btn-primary { font-weight: 500; letter-spacing: .01em; }

/* ── Chat ────────────────────────────────────────────────────── */
.rp-chat-card {
    display:        flex;
    flex-direction: column;
    height:         62vh;
    min-height:     420px;
}
.rp-chat-messages {
    flex:       1;
    overflow-y: auto;
    padding:    1.25rem 1.25rem .5rem;
    scroll-behavior: smooth;
}
.rp-chat-empty { font-size: .9rem; }
.rp-chat-msg {
    display:       flex;
    margin-bottom: 1rem;
}
.rp-chat-msg--user   { justify-content: flex-end; }
.rp-chat-msg--assistant { justify-content: flex-start; }
.rp-chat-bubble {
    max-width:     72%;
    padding:       .6rem 1rem;
    border-radius: 14px;
}
.rp-chat-msg--user .rp-chat-bubble {
    background:    var(--rp-primary);
    color:         #fff;
    border-bottom-right-radius: 4px;
}
.rp-chat-msg--assistant .rp-chat-bubble {
    background:    var(--rp-bg);
    border:        1px solid var(--rp-border);
    border-bottom-left-radius: 4px;
}
.rp-chat-role {
    font-size:     .7rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom:  .2rem;
    opacity:        .7;
}
.rp-chat-text { font-size: .9rem; line-height: 1.6; white-space: pre-wrap; }
.rp-chat-input-wrap {
    padding:      .75rem 1rem;
    border-top:   1px solid var(--rp-border);
    background:   var(--rp-surface);
    border-radius: 0 0 var(--rp-radius) var(--rp-radius);
}
.rp-chat-input {
    resize:     none;
    max-height: 120px;
    overflow-y: auto;
    border:     1px solid var(--rp-border);
}
.rp-chat-send {
    width:    44px;
    height:   44px;
    padding:  0;
    flex-shrink: 0;
    border-radius: var(--rp-radius-sm) !important;
}

/* Typing dots */
.rp-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
}
.rp-typing span {
    width:  8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rp-primary);
    animation: rpDot 1.2s infinite;
    display: block;
}
.rp-typing span:nth-child(2) { animation-delay: .2s; }
.rp-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes rpDot {
    0%,80%,100% { transform: scale(0.6); opacity: .4; }
    40%         { transform: scale(1.0); opacity: 1; }
}

/* Disclaimer */
.rp-disclaimer {
    background:   #fef9ec;
    border:       1px solid #f4d47b;
    border-radius: var(--rp-radius-sm);
    color:        #856404;
    display:      flex;
    align-items:  flex-start;
    gap:          .5rem;
    padding:      .75rem 1rem;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-success {
    background-color: #ecf7ef;
    border-color:     #b9dfc4;
    color:            #2a6340;
}
.alert-danger {
    background-color: #fdf0f0;
    border-color:     #f3c0c0;
    color:            #7b2d2d;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 575px) {
    .rp-auth-card  { padding: 2rem 1.25rem; }
    .rp-chat-card  { height: 70vh; }
    .rp-chat-bubble { max-width: 88%; }
    .rp-btn-nav { min-width: 120px; font-size: .875rem; }
}