/**
 * Enhanced Styles for the "Doubts" Dashboard Tab
 */

/* --- Form Styles --- */
.iw-form-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .iw-form-row { grid-template-columns: 1fr 1fr; } }
.iw-form-group { margin-bottom: 20px; position: relative; }
.iw-form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--color-primary-dark); }
.iw-form-group input[type="text"], .iw-form-group textarea, .iw-form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; font-size: 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.iw-form-group input[type="text"]:focus, .iw-form-group textarea:focus, .iw-form-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(35, 78, 82, 0.1); }
.iw-form-group select[disabled] { background-color: #f1f1f1; cursor: not-allowed; }
.iw-islamic-note { display: flex; align-items: center; gap: 15px; padding: 15px; background-color: var(--color-quaternary-light); border-radius: 8px; margin: 20px 0; border-left: 5px solid var(--color-quaternary); }
.iw-islamic-note i { font-size: 24px; color: var(--color-quaternary); }
.iw-islamic-note p { margin: 0; color: var(--color-primary-dark); }
.iw-submit-button { background-color: var(--color-primary); color: #fff; padding: 12px 25px; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.iw-submit-button:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); }
.iw-loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--color-primary); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; position: absolute; right: 15px; top: 45px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Statistics Dashboard --- */
.iw-doubts-stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.iw-stat-card { background: var(--color-white); border-radius: var(--border-radius); padding: 20px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 15px; transition: var(--transition); }
.iw-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.iw-stat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; }
.iw-stat-icon.total { background-color: var(--color-primary); }
.iw-stat-icon.pending { background-color: var(--color-tertiary); }
.iw-stat-icon.answered { background-color: var(--color-quaternary); }
.iw-stat-icon.declined { background-color: var(--color-secondary); }
.iw-stat-info h3 { margin: 0 0 5px 0; font-size: 14px; color: var(--color-text-light); }
.iw-stat-number { font-size: 28px; font-weight: 700; color: var(--color-primary-dark); }

/* --- Doubts Table --- */
.iw-doubts-search { position: relative; width: 250px; }
.iw-doubts-search input { width: 100%; padding: 10px 15px 10px 40px; border: 1px solid #ddd; border-radius: 20px; font-size: 14px; }
.iw-doubts-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--color-text-light); }
.iw-doubts-filters { display: flex; align-items: center; gap: 15px; margin: 20px 0; flex-wrap: wrap; }
.iw-doubts-filters span { font-weight: 600; color: var(--color-primary-dark); }
.iw-doubts-filters select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background-color: white; }
.iw-doubts-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.iw-doubts-table th, .iw-doubts-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; vertical-align: middle; }
.iw-doubts-table th { background-color: #f8f9fa; font-weight: 600; color: var(--color-primary-dark); }
.iw-doubt-status, .iw-doubt-priority { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.iw-doubt-status.status-pending { background-color: #fff3cd; color: #856404; }
.iw-doubt-status.status-answered { background-color: #d4edda; color: #155724; }
.iw-doubt-status.status-declined { background-color: #f8d7da; color: #721c24; }
.iw-doubt-priority.priority-high { background-color: #f8d7da; color: #721c24; }
.iw-doubt-priority.priority-medium { background-color: #fff3cd; color: #856404; }
.iw-doubt-priority.priority-low { background-color: #d1ecf1; color: #0c5460; }
.iw-view-doubt-btn { background-color: var(--color-primary); color: #fff; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }

/* --- Modal Styles --- */
.iw-modal-open { overflow: hidden; }
.iw-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(35, 78, 82, 0.7); /* Primary color overlay */
    z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(4px); /* This adds the blur effect */
}
.iw-modal-content { background-color: #fff; border-radius: var(--border-radius); width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); position: relative; }
.iw-modal-close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: var(--color-text-light); cursor: pointer; line-height: 1; z-index: 10; }
.iw-modal-header { padding: 25px 25px 15px; border-bottom: 1px solid #eee; }
.iw-modal-title { font-size: 24px; color: var(--color-primary-dark); margin: 0 0 15px 0; }
.iw-modal-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.iw-doubt-badge { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.iw-doubt-badge.status-pending { background-color: #fff3cd; color: #856404; }
.iw-doubt-badge.status-answered { background-color: #d4edda; color: #155724; }
.iw-doubt-badge.status-declined { background-color: #f8d7da; color: #721c24; }
.iw-doubt-badge.priority-high { background-color: #f8d7da; color: #721c24; }
.iw-doubt-badge.priority-medium { background-color: #fff3cd; color: #856404; }
.iw-doubt-badge.priority-low { background-color: #d1ecf1; color: #0c5460; }
.iw-chat-history { padding: 25px; overflow-y: auto; flex-grow: 1; }
.iw-chat-message { margin-bottom: 25px; max-width: 85%; }
.iw-chat-message.is-instructor { margin-right: auto; }
.iw-chat-message.is-student { margin-left: auto; }
.iw-message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.iw-message-sender { font-size: 14px; font-weight: 600; color: var(--color-primary-dark); display: flex; align-items: center; gap: 8px; }
.iw-message-time { font-size: 12px; color: var(--color-text-light); display: flex; align-items: center; gap: 5px; }
.iw-message-bubble { padding: 15px; border-radius: 18px; line-height: 1.6; position: relative; }
.is-instructor .iw-message-bubble { background-color: #f1f1f1; color: var(--color-text); border-top-left-radius: 4px; }
.is-student .iw-message-bubble { background-color: var(--color-primary); color: #fff; border-top-right-radius: 4px; }