/* frontend/css/components.css - Version 1.1.0 Optimized */

.btn{display:inline-block;padding:8px 16px;border:none;border-radius:var(--border-radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1.5}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:var(--success-dark)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-dark)}
.btn-secondary{background:var(--muted);color:#fff}
.btn-sm{padding:4px 8px;font-size:.85rem}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:5px;font-size:.9rem;color:var(--text-light);font-weight:500}
.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--border-radius);font-size:.95rem;background:var(--card);color:var(--text);transition:border-color var(--transition)}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(33,150,243,.1)}
.form-control:disabled{background:var(--bg);cursor:not-allowed}
.form-row{display:flex;gap:15px;margin-bottom:15px}
.form-row .form-group{flex:1;margin-bottom:0}
.card{background:var(--card);border-radius:var(--border-radius);padding:20px;box-shadow:0 2px 4px var(--shadow);margin-bottom:20px}
.card-header{font-size:1.1rem;font-weight:600;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.progress-bar-container{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress{height:100%;background:linear-gradient(90deg,var(--accent),#64b5f6);border-radius:4px;transition:width var(--transition)}
.toggle-switch{position:relative;display:inline-block;width:50px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border);transition:var(--transition);border-radius:24px}
.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;transition:var(--transition);border-radius:50%}
input:checked+.toggle-slider{background-color:var(--accent)}
input:checked+.toggle-slider:before{transform:translateX(26px)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:9999;padding: 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;pointer-events:auto !important;backdrop-filter: blur(4px);-webkit-backdrop-filter:blur(4px);}
.modal-content{background:var(--card);border-radius:var(--border-radius);padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action: pan-y;box-shadow:0 8px 16px rgba(0,0,0,.2);scroll-margin-top: 0;pointer-events:auto !important;position: relative;z-index: 10000;}
.modal-title{margin-bottom:15px;color:var(--accent)}
.modal-message{margin-bottom:20px;line-height:1.6}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
.tooltip{position:absolute;background:var(--card);color:var(--text);padding:8px 12px;border-radius:var(--border-radius);font-size:.85rem;box-shadow:0 2px 8px var(--shadow);z-index:1000;max-width:250px;pointer-events:none;border:1px solid var(--border)}
.tooltip::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-width:0 6px 6px;border-style:solid;border-color:transparent transparent var(--card)}
body.modal-open {overflow: hidden;pointer-events: none;}
body.modal-open .modal-overlay {pointer-events:auto !important;}
body.modal-open .modal-content {pointer-events: auto !important;}
.modal-backdrop {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;background: transparent;pointer-events: auto;}
.setting-header {display: flex;align-items: center;gap: 8px;margin-bottom: 12px;}
.setting-header .setting-icon {font-size: 1rem;}
.setting-header .setting-label {font-size: 0.85rem;font-weight: 600;color: var(--text, #1a2332);}
body.dark .setting-header .setting-label {color: #e2e8f0;}
.toggle-row.disabled {opacity: 0.5;pointer-events: none;}
.toggle-row.disabled .toggle-title {color: var(--text-light);}
.toggle-row.disabled .toggle-desc {color: var(--muted);}
@media (max-width: 600px) {
    .modal-overlay {padding: 10px;}
    .modal-content {max-height: 85vh;border-radius: 4px;width: 90%;max-width: 100%;padding: 20px 16px 30px;}
}
@supports (-webkit-touch-callout: none) {
    .modal-content {-webkit-overflow-scrolling: touch;overscroll-behavior: contain;}
}
/* ===== প্রোফাইল বক্স রিড-অনলি ডিসপ্লে ===== */
.profile-info-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 0 4px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.info-row:hover {
    border-color: var(--accent);
    background: var(--card);
}

.info-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    flex-shrink: 0;
}

.info-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

.info-value.empty {
    color: var(--muted);
    font-weight: 400;
}

/* ডার্ক মোড */
body.dark .info-row {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark .info-row:hover {
    background: #3d3d3d;
    border-color: var(--accent);
}

body.dark .info-value {
    color: #e2e8f0;
}

body.dark .info-value.empty {
    color: #64748b;
}

/* রেসপনসিভ */
@media (max-width: 480px) {
    .info-row {
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 2px;
    }
    
    .info-label {
        font-size: 0.75rem;
    }
    
    .info-value {
        font-size: 0.8rem;
        max-width: 55%;
    }
}

/* প্রোফাইল বক্সের অ্যাভাটার সেকশন আপডেট */
#profileBox .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

#profileBox .avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    transition: all 0.3s ease;
}

#profileBox .avatar-large:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.15);
}

#profileBox .avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profileBox .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #64b5f6);
}

/* প্রোফাইল বক্সের প্রগ্রেস সেকশন */
#profileBox .profile-progress {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
}

#profileBox .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

#profileBox .progress-label strong {
    color: var(--accent);
}

#profileBox .progress-stats {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 6px;
    text-align: center;
}

#profileBox .progress-stats span {
    color: var(--accent);
    font-weight: 600;
}