/* Tawasul Professional Design - Clean, Stable, No Shadows */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #e9ecef;
    --button-bg: #495057;
    --button-hover: #343a40;
    --success: #28a745;
    --error: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --font-size-base: 0.875rem; /* 14px, plugin-scoped */
    --line-height: 1.5;
    --border-radius: 0.375rem; /* 6px for cards */
    --spacing: 1.5rem;
}

.tawasul-form-wrapper, .tawasul-dashboard-wrapper, .tawasul-access-wrapper {
    max-width: 900px;
    margin: var(--spacing) auto;
    padding: var(--spacing);
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    /* No box-shadow, no border - clean look */
    overflow: hidden;
    word-break: break-word;
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    direction: rtl; /* RTL for Arabic */
    box-sizing: border-box;
}

.tawasul-form-wrapper form { display: grid; gap: var(--spacing); }
.tawasul-form-wrapper .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing);
}
.tawasul-form-wrapper .form-row .form-group { margin: 0; }
.tawasul-form-wrapper .full-width { grid-column: 1 / -1; }
.tawasul-form-wrapper label { 
    display: block; 
    font-weight: 600; 
    color: var(--text-primary); 
    margin-bottom: 0.5rem; 
    font-size: var(--font-size-base);
}
.tawasul-form-wrapper input[type="text"],
.tawasul-form-wrapper input[type="email"],
.tawasul-form-wrapper input[type="tel"],
.tawasul-form-wrapper textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    word-break: break-word;
    background: #fff;
    box-sizing: border-box;
}
.tawasul-form-wrapper input:focus, .tawasul-form-wrapper textarea:focus {
    outline: 0;
    border-color: var(--button-bg);
    box-shadow: 0 0 0 0.2rem rgba(73, 80, 87, 0.25);
}
.tawasul-form-wrapper .help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.required { color: var(--error); }
.button { 
    background: var(--button-bg); 
    color: #fff; 
    padding: 0.75rem 1.5rem; 
    border: none; 
    border-radius: var(--border-radius); 
    cursor: pointer; 
    font-weight: 500; 
    font-size: var(--font-size-base); 
    transition: background 0.2s ease; 
    margin: 0 0.25rem; 
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}
.button:hover { background: var(--button-hover); }
.button.secondary { background: var(--text-secondary); }
.button.secondary:hover { background: #5a6268; }
.tawasul-form-actions, .action-buttons { 
    display: flex; 
    justify-content: flex-end; 
    gap: 0.5rem; 
    margin-top: 1rem; 
}

.tawasul-logs { 
    list-style: none; 
    padding: 0; 
    display: grid; 
    gap: 1rem; 
}
.tawasul-logs .log-item { 
    padding: 1rem; 
    border-radius: var(--border-radius); 
    background: var(--bg-secondary); 
    word-break: break-word;
    font-size: var(--font-size-base);
}
.tawasul-logs .log-item.user { border-left: 4px solid var(--success); padding-left: 1.25rem; }
.tawasul-logs .log-item.admin { border-left: 4px solid var(--button-bg); padding-left: 1.25rem; }

#tawasul-response { 
    margin-top: 1rem; 
    padding: 1rem; 
    border-radius: var(--border-radius); 
    word-break: break-word;
    font-size: var(--font-size-base);
}
#tawasul-response.success { 
    background: #d4edda; 
    color: #155724; 
    border-left: 4px solid var(--success);
}

.dashboard-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: var(--spacing); 
    padding-bottom: 1rem; 
}
.tawasul-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem 0; }
.tawasul-subtitle { font-size: 1.125rem; font-weight: 500; color: var(--text-primary); margin: 2rem 0 1rem 0; }

.request-details {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: 1.5rem 0;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
}
.request-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.status-bar { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    margin: 1rem 0; 
}
.status-progress { 
    height: 8px;
    background: var(--success); 
    border-radius: 4px; 
    transition: width 0.3s ease; 
    flex: 1;
}
.status-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-base); }

.details-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1rem; 
    margin: 1rem 0; 
}
.details-grid .detail-card { 
    padding: 1rem; 
    background: var(--bg-secondary); 
    border-radius: var(--border-radius); 
    word-break: break-word;
    font-size: var(--font-size-base);
}
.details-grid .full-text { grid-column: 1 / -1; }

.search-form, .filter-controls { 
    display: flex; 
    gap: 1rem; 
    align-items: center; 
    margin-bottom: 1.5rem; 
}
.search-form .form-group label { display: flex; align-items: center; gap: 0.5rem; }
.requests-table-wrapper { overflow-x: auto; }

.tawasul-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}
.tawasul-table th, .tawasul-table td {
    padding: 1rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}
.tawasul-table th { 
    background: var(--bg-secondary); 
    font-weight: 600; 
    color: var(--text-primary); 
}
.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-badge.new { background: #fff3cd; color: #856404; }
.status-badge.processing { background: #d1ecf1; color: #0c5460; }
.status-badge.completed { background: #d4edda; color: #155724; }
.status-badge.rejected { background: #f8d7da; color: #721c24; }
.no-data { text-align: center; color: var(--text-secondary); padding: 2rem; font-size: var(--font-size-base); }

.tawasul-message { 
    padding: 1rem; 
    border-radius: var(--border-radius); 
    margin: 1rem 0; 
    font-size: var(--font-size-base); 
}
.tawasul-message.error { background: #f8d7da; color: #721c24; border-left: 4px solid var(--error); }
.tawasul-message.success { background: #d4edda; color: #155724; border-left: 4px solid var(--success); }

.attachment-link { 
    color: var(--button-bg); 
    text-decoration: underline; 
    font-size: var(--font-size-base); 
}
.attachment-link:hover { color: var(--button-hover); }

.reply-form { margin-bottom: 1.5rem; }
.reply-form .form-group { margin-bottom: 1rem; }

@media (max-width: 768px) {
    .tawasul-form-wrapper .form-row { grid-template-columns: 1fr; gap: 1rem; }
    .dashboard-header { flex-direction: column; gap: 1rem; text-align: center; }
    .details-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .tawasul-form-wrapper, .tawasul-dashboard-wrapper { margin: 1rem; padding: 1.5rem; }
    .tawasul-table { font-size: 0.75rem; }
    .tawasul-table th, .tawasul-table td { padding: 0.5rem; }
}